DWR

File upload: support for progress bar(s)

Details

  • Type: Improvement Improvement
  • Status: Open Open
  • Priority: Normal Normal
  • Resolution: Unresolved
  • Affects Version/s: None
  • Fix Version/s: 4.0
  • Component/s: File Upload/Download
  • Description:
    Hide
    Usage:

    either:
       function uploadFiles() {
            RemoteClass.uploadFiles(dwr.util.getValue("file1"), dwr.util.getValue("file2"), { fileProgress: true });
       }

    or:
       function uploadFiles() {
        dwr.engine.setFileProgress(true);
            RemoteClass.uploadFiles(dwr.util.getValue("file1"), dwr.util.getValue("file2"));
       }

    Changes Required:
    1. client: Display the progress bar using logic similar to useLoadingImage() described here http://getahead.org/dwr/browser/util/useloadingmessage
    2. server: Change org.directwebremoting.dwrp.ParseUtil to sends the status back to the browser using reverse ajax for each file being uploaded.
    3. client: Use the status to update the progress bar.

    Suggestied Solution:
    1. Three new functions required in engine.js:
       showFileProgressBars(): hides file inputs and displays progress bars in their place, gives each progress bar an id
       updateFileProgressBar(id, percentage): updates a status bar with the upload percentage
       hideFileProgressBars(): display the file inputs in place of the progress bars

    2. org.directwebremoting.dwrp.ParseUtil should set a progress listener on SERVLET_FILE_UPLOAD.
    Show
    Usage: either:    function uploadFiles() {         RemoteClass.uploadFiles(dwr.util.getValue("file1"), dwr.util.getValue("file2"), { fileProgress: true });    } or:    function uploadFiles() {     dwr.engine.setFileProgress(true);         RemoteClass.uploadFiles(dwr.util.getValue("file1"), dwr.util.getValue("file2"));    } Changes Required: 1. client: Display the progress bar using logic similar to useLoadingImage() described here http://getahead.org/dwr/browser/util/useloadingmessage 2. server: Change org.directwebremoting.dwrp.ParseUtil to sends the status back to the browser using reverse ajax for each file being uploaded. 3. client: Use the status to update the progress bar. Suggestied Solution: 1. Three new functions required in engine.js:    showFileProgressBars(): hides file inputs and displays progress bars in their place, gives each progress bar an id    updateFileProgressBar(id, percentage): updates a status bar with the upload percentage    hideFileProgressBars(): display the file inputs in place of the progress bars 2. org.directwebremoting.dwrp.ParseUtil should set a progress listener on SERVLET_FILE_UPLOAD.
  1. uploadProgress.html
    (1 kB)
    Lance Semmens
    10/Sep/07 5:27 PM

Activity

Hide
Lance Semmens added a comment - 10/Sep/07 5:27 PM

Attached a simple file upload widget.

Show
Lance Semmens added a comment - 10/Sep/07 5:27 PM Attached a simple file upload widget.
Hide
Lance Semmens added a comment - 11/Sep/07 10:18 AM

Comments from Mike Wilson:

I think maybe it is good if there is also an option to get the progress data without using reverse ajax. There has been some demand to run DWR 2 with reverse ajax taken out as not to have ScriptSessons consume memory.

Also, as polling currently is the "safest" alternative for reverse Ajax there may be unnecessary bandwidth wasted if progress data is written to the browser for each packet received, but the browser only polls every 5 seconds (as only the last progress info of potentially many is interesting). This could either be solved by having the progress data "sync" with poll intervals, or by having the browser explicitly ask for progress data with a function call.

The last suggestion is also in line with the need for a responsive progress bar. You probably want to update it every 0.5-1.0 seconds, but this rate may be unnecessary high outside file uploads if you have many simultaneous clients. So instead of having to change poll rate during an upload and also fix the sync stuff on the server you may prefer the "naive" solution; running your own window.setInterval() calling a function on the server returning progress data.

Also, If there are two files being uploaded in one call then I think it will be sufficient with only one progress bar indicating progress for the whole POST.

Show
Lance Semmens added a comment - 11/Sep/07 10:18 AM Comments from Mike Wilson: I think maybe it is good if there is also an option to get the progress data without using reverse ajax. There has been some demand to run DWR 2 with reverse ajax taken out as not to have ScriptSessons consume memory. Also, as polling currently is the "safest" alternative for reverse Ajax there may be unnecessary bandwidth wasted if progress data is written to the browser for each packet received, but the browser only polls every 5 seconds (as only the last progress info of potentially many is interesting). This could either be solved by having the progress data "sync" with poll intervals, or by having the browser explicitly ask for progress data with a function call. The last suggestion is also in line with the need for a responsive progress bar. You probably want to update it every 0.5-1.0 seconds, but this rate may be unnecessary high outside file uploads if you have many simultaneous clients. So instead of having to change poll rate during an upload and also fix the sync stuff on the server you may prefer the "naive" solution; running your own window.setInterval() calling a function on the server returning progress data. Also, If there are two files being uploaded in one call then I think it will be sufficient with only one progress bar indicating progress for the whole POST.
Hide
Aleksey Kudinov added a comment - 06/Mar/08 12:41 PM

can i suggest for dwr not to show the progress bar (with all due respect dwr has got nothing to do withpresentation) but to provide a callback hook and pass uploaded info there.

Show
Aleksey Kudinov added a comment - 06/Mar/08 12:41 PM can i suggest for dwr not to show the progress bar (with all due respect dwr has got nothing to do withpresentation) but to provide a callback hook and pass uploaded info there.
Hide
Lance Semmens added a comment - 31/May/09 11:24 PM

This issue is resolved by the patch attached to http://bugs.directwebremoting.org/bugs/browse/DWR-387

Show
Lance Semmens added a comment - 31/May/09 11:24 PM This issue is resolved by the patch attached to http://bugs.directwebremoting.org/bugs/browse/DWR-387

People

Dates

  • Created:
    03/Sep/07 1:38 PM
    Updated:
    23/Jun/09 5:28 AM