Need help on uploading files (using uploadify)

[lisandru]

Hello! I am new in programming, I found this plugin, but I can't integrate it on JTable. I would like to upload files on Add/Edit. I tried to use Uploadify (uploadify.com) + asp.net web forms. If there is somebody who already made this could you please help me with this issue. Thanks in advance.

[galastur]

the add, edit, delete are used with the table records, what does your table look like? if you want to add some general functionality, like print, upload file you could use, the toolbar option:

var uploadFileIcon = '@Url.Content("~/Images/upload.png")';
....

          toolbar: {
              items: [{
                  icon: uploadFileIcon,
                  text: 'Upload',
                  click: function () {
                      fileUpload(); //
                  }
              }]
.....

function fileUpload() {
   //do the upload here
}

If you want to be able to add the upload button in each of the records row,you could define a field like this:

UploadFile: {
                        title: '',
                        display: function (data) {
                                var $img = $(<'img alt="" style="cursor: pointer;" src="' + uploadFileIcon+ '" />');
                                $img.click(function () {
                                   fileUpload();
                                  //remember you can also pass record info at this point, assuming there is an ID field,
                                  //which may be needed you could do something like:  fileUpload(data.record.ID);

                                });

                                return $img;
                        }
                    }

Hope it helps

[pak437337]

how to upload file using the create dialog ?

[galastur]

this might help #261

[une6]

Hi, as a temporary workaround i tried this:

add a Field Option like this:

FileUpload: {
                title: 'Customers File',
                list: false,
                create: true,
                edit: true,
                input: function (data) {
                    return '<div id="FileUpload" name="FileUpload"></div>';

                }
            },

then add a JTable property like this:

formCreated: function (event, data) {

            $("#FileUpload").uploadify({
                height: 12,
                swf: 'js/vendor/uploadify/uploadify.swf',
                uploader: 'js/vendor/uploadify/Upload.ashx',
                folder: 'uploads/',
                cancelImg: 'js/vendor/uploadify/uploadify-cancel.png',
                removeCompleted: false,
                'onUploadComplete': function (file) {
                    //alert('The file ' + file.name + ' finished processing.');
                    FileUploaded = file.name;

                },
                width: 120
            });
        },

take note of the global variable "FileUploaded"... you'll need this if you want the value after clicking on Save (or adding record)

to get the name of the file you have uploaded (may be for later processing like i wanted to):

 formSubmitting: function (event, data) {

       $("#FileUpload").html('<input type="text" id="FileUpload" name="FileUpload" value="' + FileUploaded + '">');

            return data.form.validationEngine('validate');
  },

you basically changed the FileUpload html so that it posts the filename of the uploaded file you have submitted. take note that this works only for 1 uploaded file, use some imagination on how to upload multiple files :)

[Nirmalann]

Hi une6 ,

Thanks for your idea to share with us, i have tried your way, it's appearing in the page but i cant load the file select browser through click event, can you please share a working example?

Also did you manage to find a solution for multiple file upload?

Thanks

[reef1390]

Hi All,

I am also need some PHP file to do move uploaded file into upload folder, because using

uploader: '<?php echo base_url();?>uploadify/uploadify.php',

it seem not working. Please help :)

[ashmohd]

just Followe these steps 1.add this code to jtable javascript code below field image_upload: { title: 'P. Image', list:true, width: '20%',

                     display: function (data) {
                  return '<div id='+ data.record.PersonId + '><form id="form'+ data.record.PersonId +'" method="post" enctype="multipart/form-data" action="ajaximage.php"><input type="file" name="photoimg" id="'+ data.record.PersonId +'" class="upload"/><input type="hidden"  value="'+ data.record.PersonId +'"/></form></div><div id="preview'+ data.record.PersonId +'"></div>';
                       }

in "data.record.PersonId" PersonId is return by jtable from database

2. download script from
   http://www.9lessons.info/2011/08/ajax-image-upload-without-refreshing.html
3. unzip the folder
   copy paste a file jquery.form.js from and include this file to you page

4. add this code to header

   $(document).ready(function() {

        $('.upload').live('change', function()          { 
           var id=this.id;
               $("#preview"+id).html('');
            $("#preview"+id).html('<img src="img/loader.gif" alt="Uploading...."/>');
         $("#form"+id).ajaxForm({
                    target: '#preview'+id
        }).submit();

        });
    }); 

1. make folder name uploads to store your file or customize it to ajaximage.php
2. copy paste loader.gif from unzip directory to your directory and enjoy

[jackzheng]

thanks

[mamirmugal]

i have found a way out of this we can use FormData object https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects

here is the js code

// just a test url
var baseurl = "http://localhost/test/";
$(document).ready(function() {
    $('#tblGrid').jtable({
        title: 'Test',
        paging: true,
        pageSize: 10,
        sorting: true,
        multiSorting: true,
        actions: {
            // simple ajax call to get the list of users
            listAction: baseurl + 'user/get_list',
            createAction: function(postData) {
                return $.Deferred(function($dfd) {
                    // we need fonm object to send by ajax
                    // luckly i have only one form on my page :D
                    var formData = new FormData(document.forms[0]);
                    $.ajax({
                        url: baseurl + 'user/add',
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        dataType: 'json',
                        success: function(data) {
                            $dfd.resolve(data);
                        }
                    });
                });
            },
            updateAction: function() {
                return $.Deferred(function($dfd) {
                    // same for upload
                    var formData = new FormData(document.forms[0]);
                    $.ajax({
                        url: baseurl + 'user/update',
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        dataType: 'json',
                        success: function(data) {
                            $dfd.resolve(data);
                        }
                    });
                });
            },
            deleteAction: baseurl + 'user/del'
        },
        fields: {
            id: {
                key: true,
                list: false
            },
            name: {
                title: 'Name',
                width: '50%'
            },
            img: {
                title: 'Img',
                width: '50%',
                display: function(data) {
                    return "<img src='" + baseurl + "content/uploads/" + data.record.id + "/" + data.record.img + "' width='50' >";
                },
                input: function(data) {
                    // data.value will be undefined on create method so we will show only input file tag
                    if (typeof data.value === "undefined") {
                        return '<div><input type="file" name="photo" id="photo" class="upload"/></div>';
                    }
                    else {
                        // on edit method we will show the image and the input file tag
                        return '<div><input type="file" name="photo" id="photo" class="upload"/></div>'+
                               '<div><img style="margin:5px;" src="' + baseurl + 'content/uploads/' + data.record.qid + '/' + data.value + '"  width="50" /></div>';
                    }
                }
            }
        }
    });
    $('#tblGrid').jtable('load');
});

I am using Codeigniter to upload the image and below is the php code

// getting the absolute path
$server_path = dirname($_SERVER["SCRIPT_FILENAME"]) . "/content/uploads/";
$config = array(
    'upload_path' => $server_path,
    'upload_url' => base_url() . "content/uploads/",
);
// loading library
$this->load->library('upload', $config);
// uploding the "phone" 
if ($this->upload->do_upload('photo')) {

    // adding to db
    $user_obj = array(
        "name" => $this->input->post("name"),
        "question_img" => $file,
    );
    $this->user_model->save_user($user_obj);
    $_id = $this->db->insert_id();

    $user_list = $this->user_model->get_user($_id);
    echo json_encode(array("Result" => "OK", "Record" => $user_list));
}