current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 5 down vote favorite

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>
share|improve this question

3 Answers 3

up vote 2 down vote accepted
+100

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

share|improve this answer
    
what do you mean? Is dataType: 'json' wrong? –  Fer Jan 15 at 13:48
    
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 –  Tutcugil Jan 15 at 15:14
    
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? –  Fer Jan 16 at 8:29
up vote 3 down vote

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');
share|improve this answer
    
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? –  krizajb Apr 27 at 16:19
    
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. –  Jason Apr 29 at 16:32
    
@krizajB - Added full example into my answer above. –  Jason Apr 29 at 16:35
up vote 0 down vote

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
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.