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

You can use fileupload to submit both fileupload and additional form data: github.com/blueimp/jQuery-File-Upload/wiki/… — mccannf
– mccannf, Commented Apr 28, 2013 at 21:15
:) 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 — static
– static, Commented Apr 28, 2013 at 21:20
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. — mccannf
– mccannf, Commented Apr 28, 2013 at 21:57
Instead of data.submit(); you can do $(this).fileupload('send', data); — mccannf
– mccannf, Commented Apr 28, 2013 at 22:05
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! — static
– static, Commented Apr 28, 2013 at 22:20

static · Accepted Answer · 2013-04-28 22:28:00Z

5

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.

answered Apr 28, 2013 at 22:28

static

8,42615 gold badges66 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

musicvicious Over a year ago

or you can just add type="button"

jo v · Accepted Answer · 2015-06-04 11:37:59Z

@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) {}

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related