Jquery File Upload - $_FILES array empty

Question

Using Jquery File Upload. It's 'working' and uploading images & displaying the thumbs. However when I Submit the form in the handler if I dump $_FILES there's nothing there.

I'm basically using the Basic Plus example with autoUpload set to false. I was hoping that I would be able to use this to have users select multiple images. Then have them uploaded once the form was submitted and handle them basically the same way I would handle them if I had X number of file upload buttons on a page.

Uploading them using autoUpload=TRUE also works as well. I tried that and didn't see anything in POST or FILES either.

Comments to get either method working would be great.

Here's my js below.

$('#fileupload').fileupload({
    url: url,
    method: 'POST',
    dataType: 'json',
    autoUpload: false,
    acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
    maxFileSize: 5000000, // 5 MB
    // Enable image resizing, except for Android and Opera,
    // which actually support image resizing, but fail to
    // send Blob objects via XHR requests:
    disableImageResize: /Android(?!.*Chrome)|Opera/
        .test(window.navigator.userAgent),
    previewMaxWidth: 100,
    previewMaxHeight: 100,
    previewCrop: true
}).on('fileuploadadd', function (e, data) {
    data.context = $('<div/>').appendTo('#files');
    $.each(data.files, function (index, file) {
        var node = $('<p/>')
                .append($('<span/>').text(file.name));
        node.appendTo(data.context);
    });
}).on('fileuploadprocessalways', function (e, data) {
    var index = data.index,
        file = data.files[index],
        node = $(data.context.children()[index]);
    if (file.preview) {
        node
            .prepend('<br>')
            .prepend(file.preview);
    }
    if (file.error) {
        node
            .append('<br>')
            .append($('<span class="text-danger"/>').text(file.error));
    }
    if (index + 1 === data.files.length) {
        data.context.find('button')
            .text('Upload')
            .prop('disabled', !!data.files.error);
    }
}).on('fileuploadprogressall', function (e, data) {
    var progress = parseInt(data.loaded / data.total * 100, 10);
    $('#progress .progress-bar').css(
        'width',
        progress + '%'
    );
}).on('fileuploaddone', function (e, data) {
    $.each(data.result.files, function (index, file) {
        if (file.url) {
            var link = $('<a>')
                .attr('target', '_blank')
                .prop('href', file.url);
            $(data.context.children()[index])
                .wrap(link);
        } else if (file.error) {
            var error = $('<span class="text-danger"/>').text(file.error);
            $(data.context.children()[index])
                .append('<br>')
                .append(error);
        }
    });
}).on('fileuploadfail', function (e, data) {
    $.each(data.files, function (index, file) {
        var error = $('<span class="text-danger"/>').text('File upload failed.');
        $(data.context.children()[index])
            .append('<br>')
            .append(error);
    });
}).prop('disabled', !$.support.fileInput)
    .parent().addClass($.support.fileInput ? undefined : 'disabled');

Here's my html

<form action="/submit_form" accept-charset="utf-8" class="form-horizontal review-validate-form" id="review-form" autocomplete="off" enctype="multipart/form-data" method="POST"><div style="display:none">

        <div class="control-group">
            <label class="required control-label" for="first_name">Comments <span class="required">*</span></label>
            <div class="controls">
                <textarea name="comments" cols="40" rows="10" class="span8 required" id="comments" ></textarea>             </div>
        </div>



        <!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
    <i class="glyphicon glyphicon-plus"></i>
    <span>Add files...</span>
    <!-- The file input field used as target for the file upload widget -->
    <input id="fileupload" type="file" name="files[]" multiple>
</span>
<br>
<br>
<!-- The global progress bar -->
<div id="progress" class="progress">
    <div class="progress-bar progress-bar-success"></div>
</div>
<!-- The container for the uploaded files -->
<div id="files" class="files"></div>
<br>



        <div class="form-actions" style="">
            <input type="submit" value="Submit Review" name="submitReview" class="btn btn-primary btn-large">
        </div>
        </form>

Tutcugil · Accepted Answer · 2014-01-10 11:09:57Z

3

+100

You need the set correct datatype dataType: 'json', to multipart form data you cant set $_FILES variable with data type json attribute

answered Jan 10, 2014 at 11:09

Tutcugil

3584 silver badges12 bronze badges

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

2 Comments

Tutcugil Over a year ago

if you want to get files with $_FILES variable via PHP, you need to set dataType multipart/form-data, you can't get files with $_FILES variable with dataType json

Fer Over a year ago

Are you sure? I get files with $_FILES variable via PHP while dataType is json. I think multipart/form-data is related with an other property and its default value is already multipart/form-data. Am i missing something?

Jason · Accepted Answer · 2014-04-29 16:34:52Z

Got it to work by appending a hidden input for each file uploaded so that I can process them and add them to the database after the form is submitted.

I feel like there should be something built in already to handle this but for now this works.

Added a filesHidden div to hold the hidden fields.

<div id="files" class="files"></div>

Then updated the js to which appends a hidden input with filename to pass along to my form handler so I can link up the images with the form submission.

}).on('fileuploaddone', function (e, data) {
        $.each(data.result.files, function (index, file) {
            if (file.url) {
                $( "#filesHidden" ).append( '<input type="hidden" name="images[]" value="' + file.name + '">' );
            } else if (file.error) {
                var error = $('<span class="text-danger"/>').text(file.error);
                $(data.context.children()[index])
                    .append('<br>')
                    .append(error);
            }
    });
        }

Full Example Below (Requested in comments below). Note my example also adds a title text box to each uploaded image.

var url = '/js/fileUpload/server/php/';
uploadButton = $('<button/>')
 .addClass('btn btn-primary')
 .prop('disabled', true)
 .text('Processing...')
 .on('click', function () {
     var $this = $(this),
         data = $this.data();
     $this
         .off('click')
         .text('Abort')
         .on('click', function () {
             $this.remove();
             data.abort();
         });
     data.submit().always(function () {
         $this.remove();
     });
 });

$('#fileupload').fileupload({
    url: url,
    method: 'POST',
    dataType: 'json',
    autoUpload: true,
    acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
    maxFileSize: 5000000, // 5 MB
    // Enable image resizing, except for Android and Opera,
    // which actually support image resizing, but fail to
    // send Blob objects via XHR requests:
    disableImageResize: /Android(?!.*Chrome)|Opera/
        .test(window.navigator.userAgent),
    previewMaxWidth: 100,
    previewMaxHeight: 100,
    previewCrop: true
}).on('fileuploadadd', function (e, data) {
    data.context = $('<div/>').appendTo('#files');
}).on('fileuploadprocessalways', function (e, data) {
    var index = data.index,
        file = data.files[index],
        node = $(data.context.children()[index]);
    if (file.preview) {
        var node = $('<p/>')
        .append('<br /><strong>Description</strong>: <input type="text" name="title[]" value="">');
        node.appendTo(data.context);

        node = $(data.context.children()[index]);
        node
            .prepend('<br>')
            .prepend(file.preview);
    }
    if (file.error) {
        alert(file.error);
    }
    if (index + 1 === data.files.length) {
        data.context.find('button')
            .text('Upload')
            .prop('disabled', !!data.files.error);
    }
}).on('fileuploadprogressall', function (e, data) {
    var progress = parseInt(data.loaded / data.total * 100, 10);
    $('#progress .progress-bar').css(
        'width',
        progress + '%'
    );
}).on('fileuploaddone', function (e, data) {
    $.each(data.result.files, function (index, file) {
        if (file.url) {
            $( "#filesHidden" ).append( '<input type="hidden" name="images[]" value="' + file.name + '">' );
        } else if (file.error) {
            var error = $('<span class="text-danger"/>').text(file.error);
            $(data.context.children()[index])
                .append('<br>')
                .append(error);
        }
    });
}).on('fileuploadfail', function (e, data) {
    $.each(data.files, function (index, file) {
        var error = $('<span class="text-danger"/>').text('File upload failed.');
        $(data.context.children()[index])
            .append('<br>')
            .append(error);
    });
}).prop('disabled', !$.support.fileInput)
    .parent().addClass($.support.fileInput ? undefined : 'disabled');

Would it be possible to see the whole solution? Dealing with the same problem. Who handles file upload on serve side in your case, php?
Sure. php handles the file upload in my case. After form submit I loop through the hidden images array and move files from the default location. And I just have a script to periodically clear out that default folder of any old files which happens when someone uploads but doesn't submit.

kurroman · Accepted Answer · 2014-10-30 12:23:20Z

2

I had a similar problem time ago, my solution was to increase post data size data and max size per file in php.ini:

post_max_size=15M
upload_max_filesize=15M

answered Oct 30, 2014 at 12:23

kurroman

98610 silver badges13 bronze badges

Collectives™ on Stack Overflow

Jquery File Upload - $_FILES array empty

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related