Optional File Upload with Blueimp jquery file uplo

Question

The question is related to jquery file upload plugin from blueimp

I am building a form where the file uploads are optional. It turns out I cannot post form when there are no files selected for upload. Just because of this I have to create two forms on my page and do all the dirty checking to delete uploaded files if the user decides not to add actual data.

The question is :

Can I submit the form even if no files are selected so that i can still be able to receive the additional form data on server side ?

Answer 1

I know I am late to the party, but there was no real solution listed to date. You can fake the fact there is a file being added, by manually calling the add event like:

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

You would setup a variable to store the form information, update the variable when add and trigger the add like above if there was no file. Here is what the code would look like:

var fileData;
$('#fileupload').fileupload({
    add: function (e, data) {
        fileData = data;
    }
});

$('form').submit(function () {
    if (!fileData) {
        $('#fileupload').fileupload('add', { files: [{}] });
    }
    fileData.formData = params;
    fileData.submit();
    return false;
});

This allows you to stay consistent with how the data is passed to the server.

Answer 2

I know this is an old question but for those who was struggling with the same issue:

You need to dig into the Doc's here:

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

And there is a list of helpful events:

$('#fileupload')
.bind('fileuploadadd', function (e, data) {/* ... */})
.bind('fileuploadsubmit', function (e, data) {/* ... */})
.bind('fileuploadsend', function (e, data) {/* ... */})
.bind('fileuploaddone', function (e, data) {/* ... */})
.bind('fileuploadfail', function (e, data) {/* ... */})
.bind('fileuploadalways', function (e, data) {/* ... */})
.bind('fileuploadprogress', function (e, data) {/* ... */})
.bind('fileuploadprogressall', function (e, data) {/* ... */})
.bind('fileuploadstart', function (e) {/* ... */})
.bind('fileuploadstop', function (e) {/* ... */})
.bind('fileuploadchange', function (e, data) {/* ... */})
.bind('fileuploadpaste', function (e, data) {/* ... */})
.bind('fileuploaddrop', function (e, data) {/* ... */})
.bind('fileuploaddragover', function (e) {/* ... */})
.bind('fileuploadchunksend', function (e, data) {/* ... */})
.bind('fileuploadchunkdone', function (e, data) {/* ... */})
.bind('fileuploadchunkfail', function (e, data) {/* ... */})
.bind('fileuploadchunkalways', function (e, data) {/* ... */});

Answer 3

I have the same issue myself. I have a form (built in Angular), using blue imp angular implementation. The form itself has fields; the file is optional. Needs to be a single post (with or without the file).

On submit() nothing happens.

The "helpful events" listed above only are fired when a file is added.

Answer 4

Setting SingleFileUploads to false didn't help much with JQuery file uploader since there seems to be a bug as discussed here. So I set that thing back to true.

I separated the inputs into two separate forms - one for text fields input and one for files(which goes through JQuery file uploader). For the text fields form, I kept a visible button the user can click. For the other one, I hid the button. So once the user clicks the visible button, I submit only the text input and create a database record in the backend(this is done using an AJAX call) and in the success field of AJAX call, I .click() the hidden button if the file count is more than 0.