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

---

Hello shels

I lost a lot of time to searching of a solution of this issue. I read a many articles and found that this solution working for me fine:

actions: {
 listAction: 'modules_data.php?action=list',
 deleteAction: 'modules_data.php?action=delete',

 updateAction: 'modules_data.php?action=update',
 createAction: 'modules_data.php?action=create'
},

...

image_file: {
                        title: 'Album cover',
                        list: true,
                        create: true,
                        edit: true,
                        input: function(data) {
                            return '<form target="iframeTarget" class="formUploadFile" action="file_upload.php" method="post" enctype="multipart/form-data"> <input type="file" onchange="this.form.submit()" name="myFile"/> </form> <iframe class="upload-iframe" style="display: none;" src="#" name="iframeTarget"></iframe>';
                        }
                    },

image: {
                        title: 'Album cover',
                        list: true,
                        create: true,
                        edit: true,
                        input: function(data) {
                            html = '<input type ="hidden" id="image" name="image" />';
                            return html;
                        }
                    },

....

How to capture submit response in a form created dynamically?

So you can capture submit event using: ...

formSubmitting: function(event, data) {
                    filename = $('input[type=file]').val().split('\\').pop();
                    ($("#" + data.form.attr("id")).find('input[name="image"]').val(filename));
                },

And save data to the server side script. I think, it's a good solution and hope will be helpful.

Best Regards

Kameliya

Answer 2

console.log not working for FormData. Use instead

for (var data of formData) {
    console.log(data);
}

Answer 3

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.