File Upload progress without losing page state

Question

I am an absolute beginner trying to implement a file upload module with a Python-based server-side component. I used simple JQuery AJAX to POST the file's contents to my server and displayed a progress bar till the AJAX returned.

$.ajax({ type: "POST", url: "/upload", data: { filecontents: contents, }, cache: false, success: function(result) { alert("success"); }, error: function(jqXHR,textStatus,errorThrown){alert("Upload failed.");} });

Now, I have other links in my application. Once I click the upload button my AJAX starts and when I refresh the page or go back to another link, the upload continues in the backend but the page loses all its state.

I looked up all the possible solutions for carrying on this file upload without losing progress but all solutions go for either .swf based "Uploadify" or Nginx based file upload module. Nginx looks interesting NGinx doc but I am clueless about where to get this into my picture.

The document surely gives out clean code snippets but I am not sure where to fit the nginx module in or how it can be used. Any other easy ways of tracking my upload progress without losing the page's state? ELaborations on how to use Nginx is appreciated too. Thanks a lot in advance.

developer.mozilla.org/en-US/docs/Web/API/Window/localStorage ? — guest271314
– guest271314, Commented Apr 27, 2015 at 5:53
See post. localStorage.setItem("progress", evt.loaded) , localStorage.getItem("progress") should return evt.loaded value of xhr.upload.onprogress event. — guest271314
– guest271314, Commented Apr 27, 2015 at 19:37

Jason Byrne · Accepted Answer · 2015-04-27 05:52:59Z

I have had some good success with two different upload libraries, both of which have HTML 5 option rather than Flash.

Plupload: http://www.plupload.com/

Fine Uploader: http://fineuploader.com/

guest271314 · Accepted Answer · 2015-04-27 19:27:57Z

Once I click the upload button my AJAX starts and when I refresh

Note, Not certain page if page is "refresh"ed if original html document is loaded , having progress element with value set to 0 ? If yes, could replace progress element with new progress element then set the replaced progress element value to localStorage.getItem("progress") value.

html

<progress min="0" max="0" value="0" />

js

$.ajax({ type: "POST", url: "/upload", data: { "filecontents": contents }, cache: false, success: function(result) { alert("success"); }, error: function(jqXHR, textStatus, errorThrown) { alert("Upload failed.") }, xhr: function() { var progress = $("progress"); var xhrUpload = $.ajaxSettings.xhr(); console.log(xhrUpload); localStorage.setItem("progress", 0); if (xhrUpload.upload) { xhrUpload.upload.onprogress = function(evt) { localStorage.setItem("progress", evt.loaded); progress.attr({ "max": evt.total, "value": localStorage.getItem("progress") }) }; } return xhrUpload; } });

Can you please explain what this line does? xhrUpload.upload? Does XHR have a built in upload setter?
The progress bar bounces to maximum value when the ajax starts
@Tania Yes, see developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest , stackoverflow.com/questions/15965651/…. What was file size ?

Collectives™ on Stack Overflow

File Upload progress without losing page state

2 Answers 2

Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Linked

Related