blueimp jQuery-File-Upload - How do I submit form without files attached?

Question

I have found solutions on how to add additional form data when submitting the file upload form. This question is how to upload the additional data if there is no file to upload.

I am using blueimp jquery-file-upload in a task management app in order to drag and drop files and attach them to a task.

The script is initialized and setup to not automatically upload when files are attached. On the fileuploadadd callback I attach data.submit() to my submit event handler. This accomplishes that we submit the task data and the files in one POST request.

Until files are added I'm unable to get access to the file-upload data to use the data.submit() function. I came up with a work around by adding an empty file (and then removing it) on page load which would trigger the binding data.submit() to the submit button. The problem is that the plugin is returning an error while trying to loop through an empty array of files. This problem would also occur if you added a file and then removed it before submitting the form.

I have been looking for a solution to this for a while and have looked high and low but couldn't find anything in the (IMHO) terrible documentation.

Have a look at my code below:

    $('#post_task').fileupload({
        autoUpload: false,
        singleFileUploads: false,
        disableImagePreview: true,
    }).on('fileuploadadd', function (e, data) {
        $.each(data.files, function (index, file) {
            var filename = file.name,
                filesize = bytesToSize(file.size) 
                ext = filename.substr(filename.lastIndexOf('.')+1,5),
                icon = '<i class="sprite_file sprite_file-file_extension_'+ext+'"></i>',
                node = $('<li/>').append($('<span/>').html(icon + filename + ' ' + filesize + '<a href="#">&times</a>')).attr('data-index',index);

            node.find('a').click(function(e){
                e.preventDefault();
                var $self = $(this),
                    $listItem = $self.parents('li'),
                    listIndex = $listItem.attr('data-index');
                $listItem.remove();
                $('#files li').attr('data-index',function(index){return index;});
                data.files.splice(listIndex,listIndex);
                console.log(data);
                vardata = data;
            });
            $('#files').append(node);
        });
        $('#post_task').unbind('submit').submit(function(ev){
            ev.preventDefault();
            data.submit();
        });
    });

Answer 1

I faced the same problem and I ended up adding an empty file prior to submitting if there is no file.

$("#fileupload").fileupload('add', {
    files: ['']
});

This works perfectly in my situation and the backend receives the POST while the submitted file is null.

With most browsers (tested Chrome and FF) my Backend will receive no file (null) but with IE8 there is one with size 0. I haven't tested it with any other IE.