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.

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

score 1 · Answer 1 · answered Apr 27 '15 at 05:52

1

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/

answered Apr 27 '15 at 05:52

Jason Byrne

1,579
9
19

score 0 · Answer 2 · answered Apr 27 '15 at 19:27

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? — Tania, Apr 28 '15 at 04:55
The progress bar bounces to maximum value when the ajax starts — Tania, Apr 28 '15 at 05:01
@Tania Yes, see https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest , http://stackoverflow.com/questions/15965651/progress-bar-while-uploading-large-files-with-xmlhttprequest. What was file size ? — guest271314, Apr 28 '15 at 07:31

File Upload progress without losing page state

2 Answers2