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

People

Dates

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