Struts 2 Jquery File Upload

Question

I am beginner in struts2. I am trying to upload file in struts 2 using Struts2 Jquery plugin. I don't want the page to refresh on the file upload. I believe Struts 2 jquery helps to create aa ajax request to action without refreshing the page, but despite this the page gets refreshed. If I am wrong please help to correct me or suggest any alternate method for uploading the file. Below is the my current program:

index.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    <%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>File Upload</title>
<script type="text/javascript" src="jquery-1.12.3.js"></script>
</head>
<body>
<form action="upload" method="post" enctype="multipart/form-data">
      <label for="myFile">Upload your file</label>
      <input type="file" name="myFile" />
      <sj:submit value="Submit Form" targets="myAjaxTarget"/>
   </form>
<div id="myAjaxTarget">
    </div>
</body>
</html>

Struts.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>
   <constant name="struts.devMode" value="true" />
   <constant name="struts.multipart.maxSize" value="1000000" />

   <package name="default" extends="struts-default">
   <action name="upload" class="com.upload.FileUpload">
      <result name="success">index.jsp</result>
       <!--  <result name="error">/error.jsp</result> -->
   </action>
   </package>
</struts>

FileUpload Action

package com.upload;

import java.io.File;
import java.io.IOException;

import org.apache.commons.io.FileUtils;

import com.opensymphony.xwork2.ActionSupport;

public class FileUpload extends ActionSupport {
    private File myFile;
    private String myFileContentType;
    private String myFileFileName;
    private String destPath;

    public String execute() {
        /* Copy file to a safe location */
        destPath = "C:/apache-tomcat-6.0.33/work/";

        try {
            System.out.println("Src File name: " + myFile);
            System.out.println("Dst File name: " + myFileFileName);

            File destFile = new File(destPath, myFileFileName);
            FileUtils.copyFile(myFile, destFile);

        } catch (IOException e) {
            e.printStackTrace();
            return ERROR;
        }

        return SUCCESS;
    }

    public File getMyFile() {
        return myFile;
    }

    public void setMyFile(File myFile) {
        this.myFile = myFile;
    }

    public String getMyFileContentType() {
        return myFileContentType;
    }

    public void setMyFileContentType(String myFileContentType) {
        this.myFileContentType = myFileContentType;
    }

    public String getMyFileFileName() {
        return myFileFileName;
    }

    public void setMyFileFileName(String myFileFileName) {
        this.myFileFileName = myFileFileName;
    }
}

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
    <display-name>Struts 2</display-name>
   <welcome-file-list>
      <welcome-file>index.jsp</welcome-file>
   </welcome-file-list>
   <filter>
      <filter-name>struts2</filter-name>
      <filter-class>
         org.apache.struts2.dispatcher.FilterDispatcher
      </filter-class>
   </filter>

   <filter-mapping>
      <filter-name>struts2</filter-name>
      <url-pattern>/*</url-pattern>
   </filter-mapping>
</web-app>

The error which I am getting in browsers console is :

Uncaught TypeError: Cannot read property 'bind' of undefined    upload:23

this is where this error lands:

Error

score 1 · Accepted Answer · answered Sep 12 '16 at 06:39

1

In your JSP-code you missed to add the <sj:head>-tag. And you don't need to add jQuery by yourself, <sj:head> will take care of that.

Here are more examples of the project for general usage: link

I believe Struts 2 jquery helps to create an ajax request to action without refreshing the page[...]

I don't think so. The file upload is a special case, which is currently not taken care of in that plugin. I've answered a similar question just a few week ago, maybe take a look at it for another example.

answered Sep 12 '16 at 06:39

beendr

654
7
21

I've not read the whole question, but the missing `` is most likely the culprit for everything is happening. +1 – Andrea Ligios Sep 12 '16 at 15:35
I added and could see it added all the js files itself. Can suggest any method through which I can implement ajax file upload in struts 2 because I don't want the page to refresh. – Pragya Sep 12 '16 at 17:53
1

Hey @Pragya, in the other [question](https://stackoverflow.com/questions/39207207/how-to-retrieve-uploaded-file-using-ajax-on-java-server-side/39221365#39221365) there is a whole example for a async file upload (even without the struts2-jquery plugin), just take a look. There is everything you need from action to js, – beendr Sep 13 '16 at 10:59

Struts 2 Jquery File Upload

1 Answers1