Handling DOJO FileUpload, JavaServlet and Cross Browser Issues

My use cases is as follows

1.    Design a form with various text input fields and also have a file upload as one of the parameters
2.    Submit an AJAX Request to the Server and wait to receive an XML as response from server
3.    Pick the request and handle it in Java Servlet
4.    Send Response to the client
5.    Handle the response and display the result in a text area
6.    Handle IE

Lets start of with Step 1

1. Design a form similar to this

        <form dojoType="dijit.form.Form" id="myForm" method="post" enctype="multipart/form-data">
            <div>
                <table width="100%">
                    <tr>
                        <td colspan="2">
                            <label class="firstLabel" for="name">Parameter 1</label>
                            <br>
                            <input type="text" id="url" name="url" style="width: 800px; padding-left: 0px"  class="medium"
                                   dojoType="dijit.form.ValidationTextBox"
                                   required="true"
                                   ucfirst="true" invalidMessage=""/>
                        </td>
                    </tr>
                    <tr>
                        <td id="uploadKeyStore" style="display:none;" >
                            <div id="uploadContainer" style="margin-top: 15px;">
                                <input type="hidden" name="MAX_FILE_SIZE" value="500000">
                                <!-- wrapping these in spans to be able to modify
                                  parts of this form depending on what the
                                  dojo.io.iframe.submit() does -->
                                 <input type="file" class="medium" id="fileInput" name="uploadTestFile" style="width: 400px;">
                            </div>
                            <br/>
                        </td>
                    </tr>
                </table>
            </div>

           <div class="formAnswer">
                <textarea style="width: 400px;height:500px" id="request" name="request" >
                </textarea>
                <textarea   style="width: 400px;  height:500px" id="response" name="response"></textarea>
            </div>
             <div dojoType="dijit.form.Button" id="start">
                    Submit
             </div>
        </form>
       
2.    In your javascript make sure u add the following       

    dojo.addOnLoad(function(){
        dojo.query("#start").onclick(function(){
            dojo.byId("response").value = "Waiting for the response.."
            dojo.io.iframe.send({
                url: this.url,
                form : 'myForm',
                method: "post",
                handleAs: "xml",
                "accept-charset" : "UTF-8",
                enctype:"multipart/form-data",
                handle: handleInitialResponse)
            });           
        });
    }
    function handleInitialResponse(response){
        //Code to be added
    }

3.    Code the Java Servlet. I have used apache FileUpload library to do this as it offer facility to handle multiple types of request parameters

    Code example can be found in the apache site.
   
    Important points to note when coding the servlet.
   
        Your response type is very crucial.
        If you choose to send response as plain text or html,
            MAKE SURE YOU WRAP YOUR RESPONSE WITH A TEXT AREA BEFORE SENDING THE RESPONSE.
            <textarea>[Your Response]</textarea>
            response.setContentType("text/html");
            This has serious limitation with IE7. Hence I would suggest not to go with this.
        If you choose to send response as plain xml,
            response.setContentType("text/xml");
            NO NEED TO WRAP YOUR RESPONSE WITHIN A TEXT AREA
           
4.    Handling the Servlet Response at the client keeping IE7 in mind

        Here comes the most trickest part.       
        If your response type is HTML, you are up for a party with IE7. I couldn't crack it and hence i worked around with xml.

        Make sure your handleAs element is "xml"
       
        Define the response handler as below
       
        function handleInitialResponse(response){
            try {
                // Gecko-based browsers, Safari, Opera.
                dojo.byId("response").value  = new XMLSerializer().serializeToString(response);
            }
            catch (e) {
                try {
                    dojo.byId("response").value  = response.xml ;
                }
                catch (e)
                {//Strange Browser ??
                    alert('Xmlserializer not supported');
                }
            }
        }

 

The code above is not compler friendly. Pls make sure you hit right basics to make the things work.    

Posted via email from My Hello World!