File Upload | Without Page Refresh | Struts2 | No Flash |

Problem decription: I want to create a file upload screen using JSP. The screen will allow the user to select multiple files on the screen but there will be only one Upload button

Solution 1:

I am using the same plugin and it is working fine for me. The first problem I see in your code is that you have not set the type of your upload button to submit.

<button id="px-submit"type="submit">Upload</button>

Hopefully, this should solve the null pointer excepton. Also, as mentioned in this plugin's docs, you need to return a json string

<div id='message'>success message</div>

on successfull upload. So you need to change your struts.xml mapping. Try this and then get back to me if you face any further problems. EDIT: Ok here is my code as you requested

JSP

<form action="uploadImage" method="post" enctype="multipart/form-data">
   <input type="file" name="image" class="fileUpload" multiple/>
   <button id="px-submit"type="submit">Save all images</button>
   <button id="px-clear"type="reset">Clear all</button>
</form>

$('.fileUpload').fileUploader({
          autoUpload: false,
          buttonUpload: '#px-submit',
          buttonClear: '#px-clear',
});

Action class

You need to return stream result. I am using a plugin (struts2 jquery plugin) which takes care of it vary nicely, but you dont have to use it only because of this one requirement, instead I am giving you a code to return stream result without using any plugin.(Taken from here)

publicclassUploadImageActionextendsActionSupport{
        privateFile image;
        privateString imageContentType;
        privateString imageFileName;
        //getter/setter for thesepublicStringexecute() {
         String status="";         
        try{
              //save file code here    
         status="<div id='message'>successfully uploaded</div>"; //on success
         inputStream = newStringBufferInputStream(status);
        }catch(WhateverException e){
         status="<div id='status'>fail</div><div id='message'>Your fail message</div>"; //on error
         inputStream = newStringBufferInputStream(status);
         //other code
        }

        returnSUCCESS;
    }
    privateInputStream inputStream;

    publicInputStreamgetInputStream() {
       return inputStream;
    }
}

struts.xml

<actionname="fileUpload"class="com.xxx.action.UploadImageAction"><resulttype="stream"><paramname="contentType">text/html</param><paramname="inputName">inputStream</param></result></action>

Solution 2:

add a target attribute to your form and have an iframe with the same name. Submit the multipart form directly to the action without using any plugin and the response will load in the iframe. That will solve your page refresh issue. If you need to use a plugin then i'll suggest use http://valums.com/ajax-upload/ this will use XHR/Ajax for modern browsers and degrade gracefully to iframe upload in older browsers.