Additional file upload with Blueimp jquery file upload plugin

Question

The question is related to the jquery file upload plugin from blueimp

I am creating a form in which file uploading is optional. It turns out I can’t publish the form when there are no files selected for upload. Just because of this, I need to create two forms on my page and do all the dirty checking to delete the downloaded files if the user decides not to add the actual data.

The question arises:

Is it possible to submit a form even if no files are selected so that I can receive additional form data on the server side?

Answer 1

I have the same problem. I have a form (built-in Angular) using the blue imp angular implementation. The form itself has fields; file is optional. You need to be the only message (with or without a file).

On submit (), nothing happens.

Useful events listed above are triggered only when a file is added.

Answer 2

I know this is an old question, but for those who struggled with the same problem:

You need to dig into the Doc here:

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

And there is a list of useful 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

Setting SingleFileUploads to false did not help with the JQuery file downloader, because there seems to be an error described here. Therefore, I have returned this truth.

I divided the inputs into two separate forms: one for entering text fields and one for files (which goes through the jQuery file loader). For the form of the text fields, I saved a visible button that the user can click. For another, I hid the button. Thus, as soon as the user clicks on the visible button, I send only text input and create a database entry in the backend (this is done using an AJAX call), and in the success field of the AJAX call I have .click () a hidden button if the number of files is more 0.

Answer 4

I know I'm late for the party, but to date there has been no real solution. You can fake the fact of adding a file by manually calling the upload event, for example:

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

You must set a variable to store information about the form, update the variable when adding, and activate the add as described above if there was no file. This is what the code looks 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 updated on how data is transferred to the server.