jQuery file upload plugin, multiple files and form data

Question

I'm having an issue with implementing the jQuery file upload plugin (https://github.com/blueimp/jQuery-File-Upload/wiki/Options).

My form has a file field set to multiple and a number of regular input fields. I'm using PHP to handle the form on the server side.

The problem seems to occur when I select several large files to upload and submit the form, in which case the $_POST and $_FILES arrays are empty.

I haven't to been able to figure out exactly when this happens - at first I though it occurred when selecting large files so that the total size of the files exceeded my max file size upload limit, but this doesn't seem to be the case.

It seems the problem lies on the client side, since it appears that no form data is sent to the server at all in these cases.

Has anyone had this problem and is there a solution?

UPDATE

The problem seems to be that PHP removes all data in $_POST and $_FILES if the submit size is larger than the max allowed upload size. It was my understanding that this plugin could make several requests to upload multiple files to avoid this problem, but no matter what settings I use I can't get this to work.

So, let me try to explain a bit better what I'm trying to achieve. The user can enter info in the form and can also choose to attach any number of files. The file size for each file must not be larger than the max allowed upload limit, but it's possible that the user selects several files whose total file size will be larger than the maximum. In this case I would like the plugin to make several requests to the server, making sure that each request stays below the size limit. But I can't get this to work. Only one request is ever made.

Here's the current version of my code

$('#applicationform').fileupload({
    autoUpload: false,
    singleFileUploads: false,
    //limitMultiFileUploads: 3,
    //sequentialUploads: true,
    //limitMultiFileUploads: 3,
    //limitMultiFileUploadSize: 1000000,
    dataType: 'json',
    progress: function(e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
    },
    add: function (e, data) {
        $("#applicationform-submit").off('click').on('click', function (e) {
            e.preventDefault();
            data.formData = $("#applicationform").serializeArray();  
            data.submit();
            console.log("submit", data.files);
        });
    });

The server uses the php code provided by the plugin to save the files to the server and each request returns a JSON array with the files the user uploaded. For example:

{"files":[{"name":"Screen Shot 2017-07-24 at 20.28.48 (3).png","size":1289712,"type":"image\/png","url":"[snip]","thumbnailUrl":"[snip]","deleteUrl":"[snip]","deleteType":"DELETE"}]}

Question - can you confirm this is a standard form post and not any kind of Ajax? Also reading the docs at your link there are options for singleFileUploads, limitMultiFileUploads, limitMultiFileUploadSize, and limitMultiFileUploadSizeOverhead. So, is it safe to assume that you did not override any of these? Finally, show some code. — Vanquished Wombat
– Vanquished Wombat, Commented Nov 11, 2017 at 13:10
Please show us the code that's not working (both client and server side). — M. Eriksson
– M. Eriksson, Commented Nov 11, 2017 at 13:13
Please read: How to create a Minimal, Complete, and Verifiable example and also How do I ask a good question? — M. Eriksson
– M. Eriksson, Commented Nov 11, 2017 at 13:19
The problem seems to be that PHP removes the $_POST and $_FILES if the submit is larger than the allowed upload limit. This means I will have to make several submits if the total size of the files are too large. I have tried changing the singleFileUploads and the other relevant options, but it only makes one submit, either with all files or just the first file depending on the settings. — rodskagg
– rodskagg, Commented Nov 11, 2017 at 14:26

Jonas0000 · Accepted Answer · 2017-11-11 13:24:39Z

1

It's hard to get your question right if you don't share any code. But this code seems to work fine for my own.

Maybe this code could help you:

var yourFilesList = [],
yourParameters = [],
elem = $("yourform");
file_upload = elem.fileupload({
    formData:{extra:1},
    autoUpload: false,
    fileInput: $("input:file"),
}).on("uploadadd", function(e, data) {
    yourFilesList.push(data.files[0]);
    yourParameters.push(e.delegatedEvent.target.name);
});

$("sendbutton").click(function(e) {
    e.preventDefault();
    file_upload.fileupload('send', {files:yourFilesList, paramName: yourParameters});
})

edited Nov 11, 2017 at 13:24

answered Nov 11, 2017 at 13:13

Jonas0000

1,1231 gold badge13 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rotimi Over a year ago

Don't give code without explanations. It does not help OP!!

rodskagg Over a year ago

Actually, the code was just what I needed. This solved my problem. Thanks!

emale · Accepted Answer · 2018-01-24 09:03:47Z

0

You should set the maxChunkSize to something lower than post_max_size and upload_max_filesize in php.ini Only maxChunkSize splits large files into several requests.

Example:

$('#applicationform').fileupload({
    maxChunkSize: 10*1024*1024, // 10 MB <--- 
    ...
    });

answered Jan 24, 2018 at 9:03

emale

3372 silver badges6 bronze badges

Collectives™ on Stack Overflow

jQuery file upload plugin, multiple files and form data

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related