margusholland
margusholland

Reputation: 3348

jQuery file upload directly to S3

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?

Upvotes: 2

Views: 1250

Answers (1)

margusholland
margusholland

Reputation: 3348

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.

Upvotes: 1

Related Questions