JQuery form submission after file upload

Question

I understand that this version of the question has appeared many times, but I can not find the answers to this question in this context.

I use a third-party file hosting service that uses jQuery and gives a successful callback when the file download is complete.

What I want to achieve is a form with text fields along with a file loader that, when you click Submit, launches the download function (and the file starts to load with a progress bar) and waits for a successful callback before starting to submit the form.

I have to admit right away that I'm a complete idiot with jQuery, and that bothers me, so I'm very unsure how to achieve this.

My attempts so far only result in a form that tries to submit immediately when the file is being downloaded.

Function manualuploader.uploadStoredFiles(); created when you click the Download Now button.

The jQuery that launches the file loader looks like this:

 <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 that you are using jQuery. Why don't you use jQuery wrapper for Fine Uploader ?

I would listen for the onComplete callback, which starts after the download is completed (successful or not). When onComplete fired, we move on to submitForm() , which contains the logic to verify that all files were sent successfully.

The logic is relatively simple: if we do not have files in the process and there are no files with qq.status of FAILED , then we can start submitting the form.

In addition, I listen to the onCancel to make sure that the form will be submitted if the download failed and therefore was canceled.

There are many more callbacks. I would suggest reading Fine Uploader callbacks as well as APIs in the docs . Also, I would take a look at the Fine Uploader jQuery docs .

If understanding jQuery is your problem, I suggest saving it here .

 <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 other questions I can help with.