Blueimp Fileupload trigger submit button after a successful ajax request

Question

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'); 
            }
        }
    });
});

Answer 1

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();
        }
    }
});