Question

I’m working to use the following jQuery File Upload plugin:

https://github.com/blueimp/jQuery-File-Upload/wiki/Options

I need to specific extra formdata which it says there is an option for, but I’m getting a JS error “Uncaught SyntaxError: Unexpected identifier” and there are no FormData examples, which is making it hard to get to work.

Here is what i have:

$(function () {
    $('.upload').fileUploadUI({
        uploadTable: $('.upload_files'),
        downloadTable: $('.download_files'),
        buildUploadRow: function (files, index) {
            var file = files[index];
            return $(
                '<tr>' +
                '<td>' + file.name + '<\/td>' +
                '<td class="file_upload_progress"><div><\/div><\/td>' +
                '<td class="file_upload_cancel">' +
                '<div class="ui-state-default ui-corner-all ui-state-hover" title="Cancel">' +
                '<span class="ui-icon ui-icon-cancel">Cancel<\/span>' +
                '<\/div>' +
                '<\/td>' +
                '<\/tr>'
            );
        },
        buildDownloadRow: function (file) {
            return $(
                '<tr><td>' + file.name + ' ' + file.type + ' ' + file.size + '<\/td><\/tr>'
            );
        },
  formData: 
   [
     {
       name: '_http_accept'
       value: 'application/javascript'
     },
     {
       name: '<%= session_key_name %>'
       value: encodeURIComponent('<%= u cookies[session_key_name] %>'),
     },
     {
       name: 'authenticity_token'
       value: encodeURIComponent('<%= u form_authenticity_token %>')
     }
   ]
    });
});

Answer 1

You don’t have commas in the right places in your formData, I think you want it to be like this:

formData: [
    {
        name: '_http_accept',
        value: 'application/javascript'   
    }, {
        name: '<%= session_key_name %>',
        value: encodeURIComponent('<%= u cookies[session_key_name] %>')    
    }, {
        name: 'authenticity_token',
        value: encodeURIComponent('<%= u form_authenticity_token %>')  
    }
]

Note that there are commas after the name: ... parts but not the value: ... parts.

Also, I don’t think encodeURIComponent() is the appropriate escaping/encoding mechanism here and <%= u ... already URI encodes. All you need to do is make sure the string doesn’t contain an unescaped single quote so something more like this would probably work (assuming that this JavaScript is going through ERB):

value: '<%= cookies[session_key_name].gsub(/'/, "\'") %>'

The appropriate encoding should be handled by the plugin and it is almost certainly doing a POST anyway so URL encoding doesn’t even apply.

Also, you don’t need to escape slashes in JavaScript strings, they’re not special so you can just say '</td>' where you say '<\/td>'.

I don’t know anything about jQuery-File-Upload but fixing your commas should at least get you past your immediate problem (and on to new and more interesting problems!).