DWR

File upload: Marshalling javascript file objects

Details

  • Type: New Feature New Feature
  • Status: Resolved Resolved
  • Priority: Minor Minor
  • Resolution: Fixed
  • Affects Version/s: None
  • Fix Version/s: 3.0.M1
  • Component/s: Converters, Engine
  • Description:
    Hide
    Support for marshalling javascript "file" objects to a serverside object (java.io.InputStream, javax.activation.DataSource, org.apache.commons.fileupload.FileItem?, others??).

    Files can be uploaded asynchronously by moving the javascript file object to a hidden multipart form, submitting the hidden form to a hidden frame then moving the file back to it's original location. Also look into dojo and gmail file upload.

    Dwr does not currently transmit multipart data, will have to look into this. DWR should send only one multipart post if transmitting 2 files and a string
    eg RemoteClass.someMethod("foo", ${"file1"}, ${"file2"}, callback);

    The following example asynchronously uploads a file:

    <html>
    <head>
       <script>
           function asyncUpload() {
               var theFile = document.getElementById("theFile");
               var fileParent = theFile.parentNode;
                         // create a div with a hidden iframe and form
               var theDiv = document.createElement('div');
               theDiv.style.display = 'none';
               theDiv.innerHTML =
                   '<iframe id="hidden_frame" name="hidden_frame" src=""></iframe>' +
                   '<form id="hidden_form" target="hidden_frame" action="/sandbox2/async/fileUpload.do" enctype="multipart/form-data" method="post"></form>';

               document.body.appendChild(theDiv);
               var hiddenForm = document.getElementById("hidden_form");
               fileParent.removeChild(theFile);
                         // attach the file to the hidden form
               hiddenForm.appendChild(theFile);
               hiddenForm.submit();
               hiddenForm.removeChild(theFile);
                         // put th file back where it came from
               fileParent.appendChild(theFile);
               // can't remove div yet, frame may not have loaded
               //document.body.removeChild(theDiv);
           }
       </script>
    </head>
    <body>
       <div><input name="theFile" id="theFile" type="file"></div>
       <a href="javascript:asyncUpload()">Async Upload</a>
    </body>
    </html>

    Show
    Support for marshalling javascript "file" objects to a serverside object (java.io.InputStream, javax.activation.DataSource, org.apache.commons.fileupload.FileItem?, others??). Files can be uploaded asynchronously by moving the javascript file object to a hidden multipart form, submitting the hidden form to a hidden frame then moving the file back to it's original location. Also look into dojo and gmail file upload. Dwr does not currently transmit multipart data, will have to look into this. DWR should send only one multipart post if transmitting 2 files and a string eg RemoteClass.someMethod("foo", ${"file1"}, ${"file2"}, callback); The following example asynchronously uploads a file: <html> <head>    <script>        function asyncUpload() {            var theFile = document.getElementById("theFile");            var fileParent = theFile.parentNode;                      // create a div with a hidden iframe and form            var theDiv = document.createElement('div');            theDiv.style.display = 'none';            theDiv.innerHTML =                '<iframe id="hidden_frame" name="hidden_frame" src=""></iframe>' +                '<form id="hidden_form" target="hidden_frame" action="/sandbox2/async/fileUpload.do" enctype="multipart/form-data" method="post"></form>';            document.body.appendChild(theDiv);            var hiddenForm = document.getElementById("hidden_form");            fileParent.removeChild(theFile);                      // attach the file to the hidden form            hiddenForm.appendChild(theFile);            hiddenForm.submit();            hiddenForm.removeChild(theFile);                      // put th file back where it came from            fileParent.appendChild(theFile);            // can't remove div yet, frame may not have loaded            //document.body.removeChild(theDiv);        }    </script> </head> <body>    <div><input name="theFile" id="theFile" type="file"></div>    <a href="javascript:asyncUpload()">Async Upload</a> </body> </html>
  1. dwr-bug-25-20070611_c1.zip
    (149 kB)
    Lance Semmens
    21/Jun/07 9:11 AM
  2. dwr-bug-25-20070611_v2.0.1_c1.zip
    (122 kB)
    Lance Semmens
    21/Jun/07 9:25 AM

Activity

Hide
Lance Semmens added a comment - 21/Jun/07 9:11 AM

Patch submitted 21/6/2007

Show
Lance Semmens added a comment - 21/Jun/07 9:11 AM Patch submitted 21/6/2007
Hide
Lance Semmens added a comment - 21/Jun/07 9:25 AM

Patch for DWR 2.0.1 (other patch is for HEAD)

Things to note.
engine.js uses a multipart post if one or more files are being marshalled
dwr.util.getValue() works for files (returns the javascript file object).
InboundVariable contains a FieldValue which may be a file or a string.
FileConverter can convert to org.directwebremoting.export.FileUpload or java.io.InputStream and is defined in the default dwr.xml file.
I have included an example in the webapp (at /fileupload/)
Support for beans with nested FileUpload properties.
I have tested in IE and firefox.

Show
Lance Semmens added a comment - 21/Jun/07 9:25 AM Patch for DWR 2.0.1 (other patch is for HEAD) Things to note. engine.js uses a multipart post if one or more files are being marshalled dwr.util.getValue() works for files (returns the javascript file object). InboundVariable contains a FieldValue which may be a file or a string. FileConverter can convert to org.directwebremoting.export.FileUpload or java.io.InputStream and is defined in the default dwr.xml file. I have included an example in the webapp (at /fileupload/) Support for beans with nested FileUpload properties. I have tested in IE and firefox.
Hide
Geeth Mohan T K added a comment - 29/Oct/07 9:39 AM

Hi,
Can you please let me know how I can use it on DWR 2.0.1 because here there is no export/FileUpload.java.I searched through the net but couldnt get any example on DWR 2.0.1 on file upload

Thanks & Regards,

-Geeth

Show
Geeth Mohan T K added a comment - 29/Oct/07 9:39 AM Hi, Can you please let me know how I can use it on DWR 2.0.1 because here there is no export/FileUpload.java.I searched through the net but couldnt get any example on DWR 2.0.1 on file upload Thanks & Regards, -Geeth
Hide
Geeth Mohan T K added a comment - 29/Oct/07 10:50 AM

Can you please let me know how to apply the patches on DWR 2.0.1

Show
Geeth Mohan T K added a comment - 29/Oct/07 10:50 AM Can you please let me know how to apply the patches on DWR 2.0.1
Hide
Thaiyal added a comment - 11/Mar/08 10:32 PM

I do not see org.directwebremoting.export.FileUpload in DWR 2.0.1 or the latest DWR 2.0.3. The fix versions says it is 3.0.M1. Could you please let me know if it could be added to the latest 2.0.x version?

Show
Thaiyal added a comment - 11/Mar/08 10:32 PM I do not see org.directwebremoting.export.FileUpload in DWR 2.0.1 or the latest DWR 2.0.3. The fix versions says it is 3.0.M1. Could you please let me know if it could be added to the latest 2.0.x version?
Hide
Joe Walker added a comment - 12/Mar/08 9:45 AM

It's unlikely that we will back-port to v2, sorry

Show
Joe Walker added a comment - 12/Mar/08 9:45 AM It's unlikely that we will back-port to v2, sorry

People

Dates

  • Created:
    28/Mar/07 12:14 PM
    Updated:
    12/Mar/08 9:45 AM
    Resolved:
    09/Jul/07 3:26 PM