About file upload process

Question

Hello,

I am using file upload in my mvc project. If I upload big file , it takes time to upload , but suppose if I click back button, it should say - File is uploading, Do u want to abort?

So how to catch if file is uploading ?

Thank you

Sachin Singh · Answer

For back button issue if (window.history && history.pushState) { addEventListener( 'load' , function() { history.pushState(null, null, null); // creates new history entry with same URL addEventListener( 'popstate' , function() { var stayOnPage = confirm( "Would you like to save this draft?" ); if (!stayOnPage) { history.back() } else { history.pushState(null, null, null); } }); }); } for cancel uploading $(document).on( 'click' , '.cancelUpload' , function(e){ ajax.abort(); console.log( "Upload Canceled" ); }); where ajax is your XMLHttpRequest (after analyzing your code, I gave the same name)

Sachin Singh · Answer

for providing resume functionality you will have to use socket programming. But, there is also a javascript library called resumableJs, which you can use. here is a repository for implementing resumablejs with MVC. Check the controller and the view https://github.com/singhjaskaran/MVC-chunk-file-uploader-using-resumable.JS

Ganesan C · Answer

You can use one boolean variable and assign as true before uploading file. Make it false after upload is completed. While clicking the back button check that boolean variable.

Guest User · Answer

Thank you Sachin for your reply Maybe with your code, I'll have to change all my code. Is there any changes I can do in my existing code , such as ajax.pause or ajax.stop , to pause or to stop upload respectively. I have already posted my Upload code earlier. Simple flow should be : 1. I will Upload file 2. Then it will show Pause, Resume and Cancel options 3. After I click on one of the option, it should perform it's action I know it's been a quite requirement., but please guide me to fix this. Thank you !

Guest User · Answer

Thank you Sachin for your reply. Please find an attachment, this is what I am looking for : If I click on Cancel, It should stop that background Progress event or it should cancel that event and on Continue button click it should resume the upload I have already uploaded my Upload code in previous thread Thank you

Guest User · Answer

Thank for your reply But I am using the following code to upload my file as t has Progress Bar in it var counter; function UploadFile() { var files = $("#fileuploadInput").get(0).files; counter = 0; $("#btnWait").show(); $("#progressBar").show(); $("#DivStatus").show(); $("#btnSubmit").hide(); // Loop through files for (var i = 0; i var file = files[i]; var formdata = new FormData(); formdata.append("fileuploadInput", file); var ajax = new XMLHttpRequest(); ajax.upload.addEventListener("progress", progressHandler, false); ajax.addEventListener("load", completeHandler, false); ajax.addEventListener("error", errorHandler, false); ajax.addEventListener("abort", abortHandler, false); ajax.open("POST", "/Handlers/Fileuploadhandler.ashx"); ajax.send(formdata); } } function progressHandler(event) { $("#loaded_n_total").html("Uploaded " + (event.loaded / 1024 / 1024).toFixed(2) + " MB of " + (event.total / 1024 / 1024).toFixed(2) + " MB"); var percent = (event.loaded / event.total) * 100; $("#progressBar").val(Math.round(percent)); $("#status").html(Math.round(percent) + "% Encrypting Your File... please wait"); } function completeHandler(event) { counter++ $("#status").html(counter + " " + event.target.responseText); $("#btnWait").hide(); $("#btnSubmit").show(); } function errorHandler(event) { $("#status").html("Upload Failed"); } function abortHandler(event) { $("#status").html("Upload Aborted"); } function pauseManualUpload() { var upload = $("#fileuploadInput"); upload.pauseUpload(); } I am using abortHandler function on Cancel button to cancel the uploading event, but it is still keeps on running progressHandler function and it continue uploading