file upload | without page refresh | struts2 | no

Question

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 for all of them. On click of the upload button all the file objects should be obtained in the Action class.

But the important thing is the page should not get refreshed after submitting. There will be other information displayed on the same screen which should not get changed during the file upload is in progress.

My Attempts: I used the simple struts2 file upload feature which works fine. But it is refreshing the page on submitting. I used AJAX (JQuery) to resolve this. The problem I am facing with AJAX is that it is not setting the File object into the file property of Action class. Hence I am not able to obtain the file object in the Action class and process further.

Can anyone please help me with this.

I am attaching the code of whatever I have tried so far.

JSP:

<s:form action="fileUpload" method="post" enctype="multipart/form-data" >
<s:file id="file" name="userImage" cssClass="fileUpload" cssStyle="fileUpload" />
<button id="px-submit">Upload</button>      
</s:form>

<script type="text/javascript">
jQuery(function($){
$('.fileUpload').fileUploader();
});
</script>

JQuery Plugin: This is the jquery plugin that I have used.

Action Class:

public class FileUploadAction extends ActionSupport{

private File userImage;

public File getUserImage() {
    return userImage;
}

public void setUserImage(File userImage) {
    this.userImage = userImage;
}

public String execute()
{
    try
    {
        System.out.println("file name: " + userImage.toString());

    }
    catch(Exception e)
    {
        e.printStackTrace();
    }

    return SUCCESS;
}

EDIT: Here is my struts config file.

Struts.xml

<action name="commonDataImportAction_*" class="xxx.Action">
<result name="SUCCESS" type="stream">
            <param name="contentType">text/html</param>
             <param name="inputName">inputStream</param>
        </result>

I get a nullpointer here as the file object is not getting set.

Please help.

thanks in advance. Gaurav

Answer 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)

public class UploadImageAction extends ActionSupport{
        private File image;
        private String imageContentType;
        private String imageFileName;
        //getter/setter for these
        public String execute() {
         String status="";         
        try{
              //save file code here    
         status="<div id='message'>successfully uploaded</div>"; //on success
         inputStream = new StringBufferInputStream(status);
        }catch(WhateverException e){
         status="<div id='status'>fail</div><div id='message'>Your fail message</div>"; //on error
         inputStream = new StringBufferInputStream(status);
         //other code
        }

        return SUCCESS;
    }
    private InputStream inputStream;

    public InputStream getInputStream() {
       return inputStream;
    }
}

struts.xml

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

Answer 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.