javascript - Jquery Form Submission after file upload

Question

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, which utilises jQuery and gives a success callback when the file upload completes.

What I want to achieve is a form with text fields, along with the fileuploader, which when you click 'Submit', fires off the upload function (and the file begins to upload with it's progress bar), and waits for the success callback before proceeding to submit the form.

I have to admit immediately that I am a complete idiot with jQuery and it confuses me utterly, so I am very unsure how to achieve this.

My attempts thus far only result in the form attempting to submit immediately while the file upload is in progress.

The function manualuploader.uploadStoredFiles(); is instantiated when clicking the 'Upload now' button.

The jQuery which instantiates the file uploader is as follows:

<form action="index.php" method="post" enctype="multipart/form-data" id="uploader">
<div id="manual-fine-uploader"></div>
<div id="triggerUpload" class="btn btn-primary" style="margin-top: 10px;">
<input type="text" name="textbox" value="Test data">
<input name="test" type="button" value="Upload now">
</div>
</form>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="fineuploader-3.6.3.js"></script>
<script>
$(document).ready(function() {
var manualuploader = new qq.FineUploader({
        element: $('#manual-fine-uploader')[0],
        request: {
                endpoint: 'uploader.php'
        },
        autoUpload: false,
        text: {
                uploadButton: '<i class="icon-plus icon-white"></i> Select Files'
        }
        });
        $('#triggerUpload').click(function() {      
        manualuploader.uploadStoredFiles();
        });
});

</script>

Answer 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.