jQuery:File+Data upload using Blueimp File Upload plugin on form submit

Question

I am using Blueimp File Upload plugin to upload file. Let say I have following form:

<form id="myForm">
   <input type="text" name="n1" />
   <input type="text" name="n3" />
   <input type="text" name="n3" />
   <input type="file" name="files" id="file" style="display: none" multiple/>
   <button>Upload</button>
</form>

My job is

I want to upload files+data when use click Upload button. I have done auto file upload i.e. uploading file just after drag drop or selecting file.

But for this one I have no idea how to do.Can I have some simple example for this kind of cases?

Averyaveryl

Hi did you manage to solve this, I am submitting files and email address, but I am not sure how to get this email address from the PHP end. I used both $_REQUEST['email'] and $_POST['email'] but no success yet. – Bimestrial

Answer 1

You need something like this:

var sendData= true;  
$('#file').fileupload({
   dataType : 'json',
   autoUpload : false,
   add : function(e,data){
      $("#myForm button").on("click",function(){
          if(sendData){
              data.formData = $("#myForm").serializeArray();              
              sendData = false;
          }

          data.submit();
      });
   },
   done: function(e,data){
       sendData = true;
   }
})

here you can find more information about formData

Etna

the problem is if i select 5 files it calls the given url 5 times – Averyaveryl

there is an ajax call for every file. So you want that you send the data only once, for example with the first file? – Etna

yes! I want to send all files in one shot.IS it possible?. Because the problem I am facing is If I have 5 attached file and if i submit the form then all field is submitted five times that is n1 n2... is received by server five times – Averyaveryl

@Manish I updated my answer with a workaround to send the data only in the first ajax call. – Etna

not working..Its still send 3 ajax call for 3 files and with each call its sending the form data i.e same text field data 3 times – Averyaveryl

Got it done singleFileUploads:false option will work. I have update this answer. – Averyaveryl

The singleFileUploads is the best option. However, you need to review the names that you received in the post call. If you receive something like this var files = Request.Files.Cast<string>().Select(k => Request.Files[k]).ToArray(); for preprocess the files change for something like this List<string> names = new List<string>(); for (int i = 0; i < Request.Files.Count; i++) { HttpPostedFileBase fileUpload = Request.Files[i]; names.Add(fileUpload.FileName); } – Rowel

Otherwise you will face a problem with the same file name. It happened to me,so I hope it could help someone else. – Rowel

Hi did you manage to solve this, I am submitting files and email address, but I am not sure how to get this email address from the PHP end. I used both $_REQUEST['email'] and $_POST['email'] but no success yet. – Bimestrial

Answer 2

Multi-file upload, with support for drag and drop and multibrowser support, is not possible without some tricks.

With the jquery file upload plugin, you can set autoUpload to false, collect the files being added or dropped, and then on form submit, you cancel the normal submit request. Instead you do a single ajax call which will contain all your files and the form content. When the ajax call returns you can redirect back to your view page etc.

var filesList = new Array();
$(function () {
    $('#fileupload').fileupload({
        autoUpload: false,
     }).on('fileuploadadd', function (e, data) {
        $.each(data.files, function (index, file) {
            filesList.push(data.files[index]);
        });
    });
}
$("#uploadform").submit(function(event) {
    if (filesList.length > 0) {
        event.preventDefault();
        $('#fileupload').fileupload('send', {files: filesList})
            .complete(function (result, textStatus, jqXHR) { 
                // window.location='back to view-page after submit?'
            });
        } else {
            // plain default submit
        }
    });
});
[...]
<form id="uploadform" action="..." method="POST" enctype="multipart/form-data">
    <input type="text" name="dummy" placeholder="some other input field">
    <input id="fileupload" type="file" name="files" multiple="multiple">
</form>

I have described a fully working solution with a spring mvc controller in detail here

Unmoor