Question

I’m using the jQuery File Upload plugin to upload files to S3 and for some reason, S3 always thinks I’m sending multiple files, while I’m not.

$('#fileupload').fileupload({
    dataType: 'json',
    limitConcurrentUploads: 1,
    singleFileUploads: true,
    replaceFileInput: false,
    limitMultiFileUploads: 1,
    sequentialUploads: true,
    add: function(e, uploadData) {

        var file = {};
        file.id = 'randomstring';
        file.name = uploadData.files[0].name;
        $.ajax({
            type: 'post',
            url: /sign_files_path/,
            dataType: 'json',
            data: {'upload_filename': file.name, 'file_uploader_id': file.id },
            success: function(result, text) {
                if (result && result.amazon_request && result.post_url) {

                    uploadData.formData = result.amazon_request;
                    uploadData.url = result.post_url;
                    console.log(uploadData.files.length) // This always shows 1
                    console.log(uploadData)
                    uploadData.submit();
                }
            },
            error: function(xhr, status) {
            }
        });
    },
    progress: function(e, data) {
        // console.log(data)
    }
});

I get specific details from S3 about where to send the file and when I call the submit it doesn’t work. I’ve set every config option imaginable and re-read the docs 5 times, but every time I try to upload, I get a 400 response from S3.

Anyone has any ideas what I might be missing?

Answer 1

Finally figured it out. As it was working with Flash uploader, I just needed to compare the two POST requests and the solution was twofold:

1. I needed to change the name of the file input field to “file”
2. Add 2 more POST variables, that were defined in the S3 Policy.