How can I upload a file + form data with blueimp's JQuery File Upload using Ajax, not just POST?

Question

I have a form:

  <div class="row-fluid">

    <div class="span5 row-fluid" id="description" style="margin-left:0px;">
      <div>
          <label>Title</label>
          <input class="span12" type="text" placeholder="Title" id="description_title" name="description_title"/>
          <label>Author</label>
          <input class="span12" type="text" placeholder="Author" id="description_author" name="description_author"/>
          <label>Tags</label>
          <input class="span12" type="text" placeholder="Tags" id="description_tags" name="description_tags"/>
          <label>Description</label>
          <textarea class="span12" id="description_textarea" name="description_textarea" rows="5" style="resize:none"></textarea>

          <div id="buttons" class="row-fluid" style="margin-top: 5px">
              <div class="span12">
                <span class="span5 btn btn-primary btn-file" id="chose_files_btn" onclick="filechose_button.click()">chose files
                  <input id="filechose_button" type="file" name="fileData" data-url="http://localhost:3001/upload/1234567890"/></span>
                <button id="upload_button" type="submit" name="upload" class="span5 offset2 btn btn-success" disabled="true" onclick="$('#upload_form').trigger('upload_fired');">upload</button>
              </div> <!-- span12 -->
          </div> <!-- buttons -->
      </div> <!-- well -->
    </div> <!-- video_description -->
  </div> <!-- row-fluid -->

How can I integrate a JQuery Upload Plugin in such a way, that after choosing a file with filechose_button I can enable the upload_button and send all input fields and file(s) using AJAX, not like it works now just reloading the page after a POST request.

the js for upload is:

$(function () {
    $('#filechose_button').fileupload({
        dataType: 'json',
        add: function (e, data) {
            data.context = $('#upload_button');
                $('#upload_button').click(function () {
                    data.submit();
                });
        },
        done: function (e, data) {
            data.context.text('Upload finished.');
        }
    });
});

but still it sends the data not using AJAX

Pagoda

You can use fileupload to submit both fileupload and additional form data: github.com/blueimp/jQuery-File-Upload/wiki/… – Talya

:) I came from that page. I wrote this code after reading that manual, but I have a problem, that the form will be sent synchronously, not as AJAX. The data.submit(); executes not via AJAX – Pagoda

Instead of creating fileupload against an input field, you should wrap your inputs in a form and create fileupload against the id of that form. – Talya

already tried, the same effect... – Pagoda

is there any parameter to say the jquery-file-upload plugin to send the form asynchronously? Because there are examples for sending input fields via AJAX, but not the complete form with many input fields. At least it was not explicitly mentioned, that it is all about AJAX form upload – Pagoda

Instead of data.submit(); you can do $(this).fileupload('send', data); – Talya

sounds good, but still no effect – Pagoda

Solved! The default value for the type attribute of button elements is "submit". It is a bit weird for me: I explicitly removed this tag thinking, than the button does nothing, but triggering my own function and not submiting the form by default. Thank you for this discussion, that was really needed to find what the problem really is! – Pagoda

Sorry but could you elaborate a bit more on your "answer"? Could you post the actual working source code? I don't understand if you finally solved it or if you concluded that you cannot submit your form through ajax due to the button being a "submit" one. I'm trying to do something similar but I see several problems in your code and my actual approach is quite different... – Manhour

Answer 1

The problem was the default behavior of the <button> element of the form. The removing the attribute type="submit" does not change anything. So instead of triggering my own function, the button send the form via normally POST request.

Pagoda

or you can just add type="button" – Thornburg

Answer 2

@Pere: Make sure that you don't use buttons in your form. I solved it by using div's with the bootstrap btn class. This is my javascript code:

//this should not be a <button></button>, but a div
var submitbtn = $("#submitbtn");


//upload an image && form submission
        $('#avatar').fileupload({
            singleFileUploads: true,
            multipart        : true,
            dataType         : 'json',
            autoUpload       : false,
            url              : 'yourEndpoint',
            type             : 'POST',
            add              : function (e, data) {
                submitbtn.on("click", function () {

                    data.formData = $("#form-activate-user").serializeArray();
                    data.submit();


                });
            },
            done             : function (result) {}
            },
            fail             : function (e) {}

Penetration