Jquery Form Submission After File Upload

I realise this variation of question has appeared many times, but none that I can find which answer this question in this kind of context. I am using a third party fileuploader, w

Solution 1:

I noticed you're using jQuery. Why don't you use the jQuery wrapper for Fine Uploader?

I would listen to the onComplete callback which is fired once an upload finishes (sucessful or not). When onComplete is fired we make it to submitForm() which contains the logic for checking that all the files have been submitted successfully.

The logic is relatively simple: if we have no files in progress and there are no files that have a qq.status of FAILED then we can proceed to submit the form.

Also, I listen to the onCancel callback to make sure that the form will submit if uploads did not succeed and thus were cancelled.

There are many more callbacks. I'd suggest reading up on the Fine Uploader docs on callbacks as well as API methods. Furthermore, I would look at the Fine Uploader jQuery docs.

If understanding jQuery is your problem then I'd suggest keeping this nearby.

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="fineuploader-3.6.3.js"></script>

<form action="index.php" method="post" id="uploader">
<input type="text" name="textbox" value="Test data">
    <div id="manual-fine-uploader"></div>
    <div id="triggerUpload" class="btn btn-primary" style="margin-top: 10px;">
    </div>
</form>



$(document).ready(function() {

    $("#triggerUpload").click(function () {
        $("#manual-fine-uploader").fineUploader('uploadStoredFiles'); 
    });

    function submitForm () { 
        if ($(this).fineUploader('getInProgress') == 0) {
            var failedUploads = $(this).fineUploader('getUploads', 
                { status: qq.status.UPLOAD_FAILED });
            if (failedUploads.length == 0) {    
                // do any other form processing here
                $("#uploader").submit();
            }
        }
    };

    // Instantiate a Fine Uploader instance:
    $("#manual-fine-uploader").fineUploader({
        autoUpload: false,
        request: {
            endpoint: "/uploads_bucket"
        }
    }).on("complete", function (event, id, name, response) {
        submitForm.call(this);
    }).on('statusChange', function (event, id, oldStatus, newStatus) {
        if (newStatus === qq.status.CANCELED) {
            submitForm.call(this);
        } 
    });
});

Let me know if you have any more questions that I can assist with.