Jquery File Upload always fails with File Upload Aborted

Question

I'm trying to get Blueimp's Jquery File Upload plugin working on my website, but for the life of me can't get it to upload files. I've been working on this all day and am stuck. It will upload the file and submit it to the UploadHandler class, but when it's trying to complete the handle_file_upload function it gets to:

file_put_contents(
    $file_path,
    fopen('php://input', 'r'),
    $append_file ? FILE_APPEND : 0
);

but that always returns 0. I cannot figure out why the file won't upload. The full response I get back is:

{"files":[
    {"name":"1397489968-32",
    "size":0,
    "type":"multipart\/form-data; boundary=----WebKitFormBoundaryrmi4L2ouOmB4UTVm",
    "error":"File upload aborted",
    "deleteUrl":"http:\/\/onceridden.demomycms.co.uk\/eshop\/library\/ajax\/?file=1397489968-32",
    "deleteType":"DELETE"}
]}

ajax.file-upload.php only instantiates UploadHandler, nothing else.

If you'd like to see the full code you for UploadHandler you can download it from github, it's too big for me to post on here.

Can someone please tell me why the files won't upload? Yes I've done the basics such as checking the folder is CHMOD 777. I've tried this with various files of different types (they must be images to work, limited to jpg, png or gif) and sizes; all produce the same result.

As requested this is the JS file:

$(function () {
    'use strict';
    // Change this to the location of your server-side upload handler:
    var url = '/eshop/library/ajax/ajax.file-upload.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();
                });
            });
    $('#register-photo').fileupload({
        url: url,
        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('#register-files');
        $.each(data.files, function (index, file) {
            var node = $('<p/>')
                    .append($('<span/>').text(file.name));
            if (!index) {
                node
                    .append('<br>')
                    .append(uploadButton.clone(true).data(data));
            }
            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);
        $('#register-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');
});

It's pretty much the default file you get with the plugin with just the ID's changed to match my form.

---

Update

After much playing around and testing I have found out that the problem occurs when you change the name of the input from files to anything else. Why I have no idea. This is obviously an issue if you want to have it running on more than one input on a page...

I created a very simple version of the interface myself, and that does allow me to change the file name, so it must be something to do with the example they use. I would like to be able to use preview images and the such (something I couldn't figure out in my simple test) so I need to solve this issue.

Answer 1

This is in case anyone else ever gets stuck on this problem as well. The issue is caused by the paramName option, which if not set takes it's value from the input name. It's not set by default, so when changing the input name I was also changing paramName, meaning it no longer matched the variable coming back from the UploadHandler class.

The solution is to add paramName: 'files[]' as an option.