1

using blueimp's fileupload how do I trigger a fileupload submit after a successful ajax request? I tried to trigger the fileuploadsubmit but it says that data is undefined. Below is the initial code:

HTML:

<form id="add-project-form" method="post" action="http://localhost/project/add/">
    <p>
        <label for="project">Project Name:</label>  
        <input id="project" class="input-text" type="text" name="name" />
    </p>
    <p>
        <label for="overview">Project Overview:</label> 
        <input id="overview" class="input-text" type="text" name="overview" />
    </p>
    <p><input type="submit" value="Add Project" />
</form>

<form id="logo-upload" method="post" action="http://localhost/project/upload/" enctype="multipart/form-data">
    <p>
        <input type="file" name="logo" id="logo" />
    </p>
</form>

jQuery:

$('#logo-upload').fileupload({
    dataType: 'json',
    maxNumberOfFiles: 1,
    autoUpload: false
}).on('fileuploadsubmit', function(e, data) {
    console.log(data);
});


$(document).on("submit", "#add-project-form", function(e) {
    e.preventDefault();

    var data    = $(this).serialize();
    var url     = $(this).attr("action");

    $.ajax({
        url: url,
        data: data,
        type: "post",
        dataType: "json",
        success: function(response) {
            if( response && response.location != undefined ) {

                // I would want the upload to begin here 

            $('#logo-upload').fileupload().trigger('fileuploadsubmit'); 
            }
        }
    });
});
gwinh
  • 343
  • 6
  • 12
  • What's contained in `e.data`? Where did you get `.on('fileuploadsubmit', function(e, data) {` from? is it supposed to contain a second parameter? – Kevin B Jan 20 '14 at 18:46
  • No, it works for me. http://jsfiddle.net/eLLWN/29/ – Hüseyin BABAL Jan 20 '14 at 18:47
  • @KevinB Here's a snapshot of the `e` object: http://screencast.com/t/rINDI0uO Regarding the `.on('fileuploadsubmit', function(e, data) {` I followed it from this: http://stackoverflow.com/questions/19807361/uploading-multiple-files-asynchronously-by-blueimp-jquery-fileupload – gwinh Jan 20 '14 at 19:25
  • @HüseyinBABAL: it didn't worked for me :( I spent more than a day solving this problem but I can't get it to work so I ran here for help – gwinh Jan 20 '14 at 19:27

1 Answers1

4

Bind the submit function on a button and force a click after your ajax request:

$('#logo-upload').fileupload({
    dataType: 'json',
    maxNumberOfFiles: 1,
    autoUpload: false,
    add : function(e,data){
             $("#uploadButton").on("click",function(){
                data.submit();
             })
          }
}).on('fileuploadsubmit', function(e, data) {
    console.log(data);
});

 $.ajax({
    url: url,
    data: data,
    type: "post",
    dataType: "json",
    success: function(response) {
        if( response && response.location != undefined ) {
            $("#uploadButton").click();
        }
    }
});
Tom
  • 5,068
  • 5
  • 29
  • 41
Dirty-flow
  • 2,306
  • 11
  • 30
  • 49