How to upload multiple files from jqgrid and Laravel?

Question

Here is my code below:

  let colNames = ['ID', 'Image', 'Title', 'Description'];
  let colModel = [                
            {name: 'id', index: 'id', width: 30, editable: true, editoptions: {size: "30", maxlength: "50"}},                
            {
                name: 'image',
                index: 'image',
                align: 'left',
                editable: true,
                edittype: 'file',
                editoptions: {
                    multiple: true,
                    accept: ".jpg,.png,.jpeg",
                    enctype: "multipart/form-data"
                },
                width: 210,
                align: 'center',
                formatter: imageFormatter,
                search: false
            },
            {name: 'image_title', index: 'image_title', width: 150, editable: true, editoptions: {size: "30", maxlength: "50"}},
            {name: 'image_description', index: 'image_description', width: 150, editable: true, editoptions: {size: "30", maxlength: "50"}}
        }
    ];

I am using ajaxFileUpload and here is my code to upload the same:

          afterSubmit: function (response) {
                    if(response.responseJSON){
                        $.ajaxFileUpload({
                              url: fileuploadUrl, 
                              secureuri:false,
                              fileElementId:'image',
                              dataType: 'json',
                              success: function (data, status) {
                                  alert("Upload Complete.");
                              }
                           });
                    }          
                    return [true];
                }
            },

This fileElementId is referring to image. Where image is picked only once. Tried assigning image to images[] as we do it from plain HTML. But still no luck as ajaxFileUpload.js throwing error as id not found with images[].

Pisarik

It seems you use the plugin from phpletter. In this case I need to ask which version of jQuery is used? The ajaxFileUpload is very old plugin and it can't work with the latest jquery. You may need to include the migrate plugin in order to get it work. I'm not sure that this plugin support multiple fileuploads. Just for the test. Try to upload only one file – Diablerie

Single file upload is working fine but not multiple. Yes the plugin seems to be outdated, any suggestions for latest jQuery supported to handle multiple uploads ? – Pisarik

Answer 1

afterSubmit: function (response) {
    if(response.responseJSON){
        // Simple change here
        $('#image').attr('name', 'images[]');
        $.ajax({
            url: 'upload_files.php', // your php upload script
            dataType: 'text', // what to expect back from the php upload script
            cache: false,
            contentType: false,
            processData: false,
            data: {
                rowId: rowId,
                _token: $('meta[name="csrf-token"]').attr('content')                                
            },
            fileElementId:'image',
            type: 'post',
            success: function (response) {
                alert("Upload Complete.");
            },
            error: function (response) {
                // handle any errors
            }
        });
    }          
    return [true];
}

As jqgrid dynamically creates id and name, for multiple file uploads, we need array of name. Hence dynamically changed to array of name which internally handles everything in the backend.

Pisarik

Answer 2

You could try rolling your own, something like (not tested):

afterSubmit: function (response) {
    if(response.responseJSON){
        var form_data = new FormData();
        var count = document.getElementById('image').files.length; // assuming your file input names is image
        for (var x = 0; x < count; x++) {
            form_data.append("files[]", document.getElementById('image').files[x]);
        }
        $.ajax({
            url: 'upload_files.php', // your php upload script
            dataType: 'text', // what to expect back from the php upload script
            cache: false,
            contentType: false,
            processData: false,
            data: form_data, // data created above
            type: 'post',
            success: function (response) {
                alert("Upload Complete.");
            },
            error: function (response) {
                // handle any errors
            }
        });
    }          
    return [true];
}
...

Then you could access the files in your php upload script with $_FILES['files']

Otherwise you could use a plugin like jQuery File Upload

Renee

This will need more http calls, which is not ideal – Pisarik

Why more? Only one call needed to submit a set of files using one ajax call. – Thicken

@Mithun, my answer only uses one ajax post, it loops through the files and builds an array to send to the upload script. – Renee

I am getting error @Renee as: form_data => FormData {} jquery.jqGrid.min.js:9249 Uncaught TypeError: Cannot read property '0' of undefined at Object.complete (jquery.jqGrid.min.js:9249) at j (jquery-2.1.4.min.js:2) at Object.fireWith (jquery-2.1.4.min.js:2) at x (jquery-2.1.4.min.js:4) at XMLHttpRequest.<anonymous> (jquery-2.1.4.min.js:4) – Pisarik

Do you have an input with id="image"? – Renee

form_data is empty when i try to print @Renee – Pisarik

Yes @CUGreen, i have id of image – Pisarik