How to upload image in jQuery jTable

Question

I successfully created an upload field in create mode in jQuery jTable as follows:

upload: {
title: 'Upload Image',                                      
input: function (data) {    
return  '<input type="file" name="file">';
'<input type="submit" value="Submit" id="submitBtn" />';
  },
},

I am able to successfully display the browse button and select files. I am unable to submit the form:

Error: newcourse.php' not found or unable to stat.

with the same file name in which the code is.

I am at a dead end. Where will the file be uploaded to? In the same directory? How to do it in jTable ? Can it be done using ajax ? If so, how to proceed? jTable documentation is very poor.

Answer 1

I finally found a soluton to upload files on jTable Now with the version of jtable 2.4.0 (the most recent at the moment writing this post)

on your file.js add the following methods:

// Read a page's GET URL variables and return them as an associative array.
function getVars(url)
{
    var formData = new FormData();
    var split;
    $.each(url.split("&"), function(key, value) {
        split = value.split("=");
        formData.append(split[0], decodeURIComponent(split[1].replace(/\+/g, " ")));
    });

    return formData;
}

// Variable to store your files
var files;

$( document ).delegate('#input-image','change', prepareUpload);

// Grab the files and set them to our variable
function prepareUpload(event)
{
    files = event.target.files;
}

//The actions for your table:

$('#table-container').jtable({
    actions: {
                listAction:     'backoffice/catalogs/display',
                deleteAction:   'backoffice/catalogs/delete',
                createAction: function (postData) {
                    var formData = getVars(postData);

                    if($('#input-image').val() !== ""){
                        formData.append("userfile", $('#input-image').get(0).files[0]);
                    }

                    return $.Deferred(function ($dfd) {
                        $.ajax({
                            url: 'backoffice/catalogs/update',
                            type: 'POST',
                            dataType: 'json',
                            data: formData,
                            processData: false, // Don't process the files
                            contentType: false, // Set content type to false as jQuery will tell the server its a query string request
                            success: function (data) {
                                $dfd.resolve(data);
                                $('#table-container').jtable('load');
                            },
                            error: function () {
                                $dfd.reject();
                            }
                        });
                    });
                },
                updateAction: function (postData) {
                    var formData = getVars(postData);

                    if($('#input-image').val() !== ""){
                        formData.append("userfile", $('#input-image').get(0).files[0]);
                    }

                    return $.Deferred(function ($dfd) {
                        $.ajax({
                            url: 'backoffice/catalogs/update',
                            type: 'POST',
                            dataType: 'json',
                            data: formData,
                            processData: false, // Don't process the files
                            contentType: false, // Set content type to false as jQuery will tell the server its a query string request
                            success: function (data) {
                                $dfd.resolve(data);
                                $('#table-container').jtable('load');
                            },
                            error: function () {
                                $dfd.reject();
                            }
                        });
                    });
                },

// Now for the fields:

    fields: {
                id_catalog: {
                    key: true,
                    create: false,
                    edit: false,
                    list: false
                },
                thumb_url: {
                    title: 'Image',
                    type: 'file',
                    create: false,
                    edit: true,
                    list: true,
                    display: function(data){
                        return '<img src="' + data.record.thumb_url +  '" width="150" height="207" class="preview">';
                    },
                    input: function(data){
                        return '<img src="' + data.record.thumb_url +  '" width="150" height="207" class="preview">';

                    },
                    width: "150",
                    listClass: "class-row-center"
                },
                image: {
                    title: 'Select File',
                    list: false,
                    create: true,
                    input: function(data) {
                        html = '<input type ="file" id="input-image" name="userfile" accept="image/*" />';
                        return html;
                    }
                }
           }
});

Now, you are able to process the files on your server side.

That's all folks.