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>

Albert

You have nothing obviously relevant in your form. Why do you need this form? Please provide some realistic context. – Nolie

This is an example to keep it simplistic. I want a user to fill in other information (before the upload begins) which is submitted after the upload completes. – Albert

This seems like a duplicate of #16940596. – Nolie

It is not, and the accepted answer there is not what I'm looking for. You describe a 'per file' method of spawning form elements prior to upload, whereas I want information not directly connected to the upload script. I merely want the form submitted once the upload(s) complete. I should remove the fine-uploader tag as this is more of a general jQuery question. – Albert

So, you are simply looking to determine when all files have been successfully uploaded before you submit some form? – Nolie

Yes, that's what I'm looking for. – Albert

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.

Chuckchuckfull

Thank you, do you have any idea why the browser (Firefox) would throw a beforeunload event ('The browser is trying to leave this page, are you sure?') when uploading more than one file like this? WIth one file the form submits fine without any warning. – Albert

Sorry, I was being stupid. Thank you, I've tested this for multiple file uploads, and it seems that the uploader won't submit if I have the getInProgress check. Even though the file has completed and it only calls submitForm once it has completed, I'm guessing the value of getInProgress isn't 0. – Albert

@monkeymatrix This beforeunload dialog will be displayed if you have any files in progress. If you are seeing this dialog, some files are still in the progress of uploading. – Nolie

@monkeymatrix Excellent! Can you please "accept" Mark's answer if it has helped you solve your issue? – Nolie