Hi Friends.hope you all are fine .today I am going to demonstrate how to upload multiple file using AngularJS framework. Dependancy of Angularjs can be downloaded from
https://angularjs.org/.
I suggest you to use
https://jsfiddle.net to get practical examples of each & every concept of Angularjs .some of the concepts like ng-app,ng-controller,ng-model,ng-binding,routing,client side interceptor etc.
Technology Stack being used:
1) JDK 1.7
2) Spring 3.x
3) Hibernate 3.x
4) Angularjs
5) BootStrap CDN
(6) Tomcat 7.0
Project Structure is as given below :
Let's Move to code :
Hibernate Model entity class is given below :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
| package org.fileupload.model;
import java.util.List;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;
import javax.persistence.Transient;
import org.springframework.web.multipart.MultipartFile;
@Entity
@Table(name="trnimage")
public class FileUpload {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
@Column(name = "ID", unique = true, nullable = false)
private int ID;
@Column(name = "DATA", unique = false, nullable = false, length = 100000)
private byte[] data;
@Column(name = "IMAGE_NAME", unique = false, nullable = false, length = 100)
private String IMAGE_NAME;
@Transient
public int getID() {
return ID;
}
public void setID(int iD) {
ID = iD;
}
public byte[] getData() {
return data;
}
public void setData(byte[] data) {
this.data = data;
}
public String getIMAGE_NAME() {
return IMAGE_NAME;
}
public void setIMAGE_NAME(String iMAGE_NAME) {
IMAGE_NAME = iMAGE_NAME;
}
@Transient
private List<MultipartFile> file;
public List<MultipartFile> getFile() {
return file;
}
public void setFile(List<MultipartFile> file) {
this.file = file;
}
}
|
Controller is as given below :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
| package org.fileupload.controller;
import java.io.File;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import java.util.ResourceBundle;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.log4j.Logger;
import org.fileupload.dao.fileUploadDaoImpl;
import org.fileupload.model.FileUpload;
import org.fileupload.model.FileuploadVO;
import org.fileupload.service.fileUploadServiceImpl;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.util.FileCopyUtils;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.context.WebApplicationContext;
import org.springframework.web.context.support.WebApplicationContextUtils;
import org.springframework.web.multipart.MultipartFile;
@Controller
public class FileUploadController {
private Logger logger = Logger.getLogger(FileUploadController.class);
//
public FileUploadController()
{
logger.info("File Upload Controller Called : -");
}
//angular js call
@RequestMapping(value = "/Testupload.htm", method = RequestMethod.POST)
public String SaveTestImage(
@ModelAttribute("uploadForm") FileUpload uploadForm,
Model map,HttpServletRequest request ) throws IllegalStateException, IOException {
logger.info(" Upload method Called : -");
System.out.println(request.getParameter("filename"));
WebApplicationContext context =WebApplicationContextUtils.getWebApplicationContext(request.getSession().getServletContext());
fileUploadServiceImpl service=(fileUploadServiceImpl) context.getBean("fileuploadService");
fileUploadDaoImpl dao=(fileUploadDaoImpl) context.getBean("fileuploadDAO");
//ResourceBundle rs =ResourceBundle.getBundle("test.properties");
ResourceBundle rb = ResourceBundle.getBundle("resources/filePath");
String saveDirectory = rb.getString("file.fileUploadPath");
List<MultipartFile> listFiles = uploadForm.getFile();
List<String> fileNames = new ArrayList<String>();
int id =0;
if (null != listFiles && listFiles.size() > 0) {
for (MultipartFile multipartFile : listFiles) {
String fileName = multipartFile.getOriginalFilename();
if (!"".equalsIgnoreCase(fileName)) {
// Handle file content - multipartFile.getInputStream()
multipartFile
.transferTo(new File(saveDirectory + fileName));
fileNames.add(fileName);
uploadForm.setData(fileName.getBytes());
uploadForm.setIMAGE_NAME(fileName);
id= service.SaveTestImage(uploadForm);
}
}
}
map.addAttribute("files", fileNames);
map.addAttribute("ids", id+"");
return "uploadfilesuccess";
}
@RequestMapping(value = "/download.htm", method = RequestMethod.GET)
public String download( @RequestParam("id") String id,
Model map,HttpServletRequest request,HttpServletResponse response) throws IllegalStateException, IOException {
System.out.println("id is : "+id);
WebApplicationContext context =WebApplicationContextUtils.getWebApplicationContext(request.getSession().getServletContext());
fileUploadServiceImpl service=(fileUploadServiceImpl) context.getBean("fileuploadService");
FileuploadVO f = service.downloadImg(id);
response.setContentLength(f.getData().length);
response.setHeader("Content-Disposition","attachment; filename=\"" + f.getIMAGE_NAME() +"\"");
FileCopyUtils.copy(f.getData(), response.getOutputStream());
return null;
}
/*@RequestMapping(value = "/test.htm")
public String test() throws IOException {
//just throw exception to test the exceptionhandler mapping
if(true) {
throw new IOException("this is io exception");
}
// render index.jsp page
return "index";
}*/
}
|
DAO(Data Access Layer) : for database Interaction
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
| package org.fileupload.dao;
import org.fileupload.model.FileuploadVO;
public interface fileUploadDao {
public int saveImage(FileuploadVO fileupload);
public FileuploadVO downloadImg(String id);
int saveImage1(FileuploadVO fileupload);
}
Service is as
DAO Implementation is as given below :
package org.fileupload.dao;
import org.fileupload.model.FileUpload;
import org.fileupload.model.FileuploadVO;
import org.springframework.orm.hibernate3.HibernateTemplate;
public class fileUploadDaoImpl implements fileUploadDao{
private HibernateTemplate template;
//@Autowired
//private JdbcTemplate jdbcTemplate;
public fileUploadDaoImpl(HibernateTemplate template ) {
this.template = template;
//template.getSessionFactory().openSession().load("", "");
}
@Override
public int saveImage1(FileuploadVO fileupload) {
template.save(fileupload);
return fileupload.getID();
}
public FileuploadVO downloadImg(String id)
{
// String query = "select * from trnimage where ID = ?";
FileuploadVO file = (FileuploadVO) template.getSessionFactory().openSession().load(FileuploadVO.class, new Integer(id));
return file;
}
@Override
public int saveImage(FileuploadVO fileupload) {
// TODO Auto-generated method stub
return 0;
}
public int SaveTestImage(FileUpload fileupload) {
template.save(fileupload);
return fileupload.getID();
}
}
|
Service Implementation is as given below :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| public class fileUploadServiceImpl implements fiileUploadService{
@Autowired
private fileUploadDaoImpl fileuploadDAO;
@Override
public int saveImage(FileuploadVO fileupload) {
// TODO Auto-generated method stub
return fileuploadDAO.saveImage(fileupload);
}
@Override
public FileuploadVO downloadImg(String id) {
// TODO Auto-generated method stub
return fileuploadDAO.downloadImg(id);
}
@Override
public int SaveTestImage(FileUpload fileupload) {
// TODO Auto-generated method stub
return fileuploadDAO.SaveTestImage(fileupload);
}
}
|
Property files are as given below:
1
2
3
4
5
6
7
8
9
| dbConfig.properties
jdbc.driverClassName = com.mysql.jdbc.Driver
jdbc.url = jdbc:mysql://localhost:3306/studentdb
jdbc.username = root
jdbc.password = admin!@#
filePath.properties
file.fileUploadPath = D:/NisargPics/
file.filedownloadPath = D:/NisargPics/download
|
applicationcontext-servlet.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
| <?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"
xmlns:p="http://www.springframework.org/schema/p" xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc.xsd">
<context:annotation-config></context:annotation-config>
<mvc:annotation-driven></mvc:annotation-driven>
<context:component-scan base-package="org.fileupload.controller"></context:component-scan>
<bean class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer">
<property name="location"><value>classpath:resources/dbConfig.properties</value> </property>
</bean>
<!-- Hibernate Configuration -->
<bean id="myDataSource" class="org.apache.commons.dbcp.BasicDataSource"
destroy-method="close">
<property name="driverClassName" value="${jdbc.driverClassName}" />
<property name="url" value="${jdbc.url}" />
<property name="username" value="${jdbc.username}" />
<property name="password" value="${jdbc.password}" />
</bean>
<bean id="jdbcTemplate" class="org.springframework.jdbc.core.JdbcTemplate">
<property name="dataSource" ref="myDataSource"></property>
</bean>
<bean id="mySessionFactory"
class="org.springframework.orm.hibernate3.annotation.AnnotationSessionFactoryBean">
<property name="dataSource" ref="myDataSource" />
<property name="annotatedClasses">
<list>
<value>org.fileupload.model.FileuploadVO</value>
<value>org.fileupload.model.FileUpload</value>
</list>
</property>
<property name="hibernateProperties">
<props>
<prop key="hibernate.dialect"> org.hibernate.dialect.MySQLDialect</prop>
<prop key="hibernate.show_sql">true</prop>
<prop key="hibernate.dbcp.initialSize">8</prop>
<prop key="hibernate.dbcp.maxActive">20</prop>
<prop key="hibernate.dbcp.maxIdle">20</prop>
<prop key="hibernate.dbcp.minIdle">0</prop>
<prop key="hibernate.hbm2ddl.auto">none</prop>
</props>
</property>
</bean>
<bean id="hibernateTemplate" class="org.springframework.orm.hibernate3.HibernateTemplate">
<constructor-arg ref="mySessionFactory" />
</bean>
<!-- list of bean definations -->
<bean id="fileuploadDAO" class="org.fileupload.dao.fileUploadDaoImpl">
<constructor-arg ref="hibernateTemplate" />
<!-- <constructor-arg index ="1" ref="jdbcTemplate" ></constructor-arg> -->
</bean>
<bean id="fileuploadService" class="org.fileupload.service.fileUploadServiceImpl">
</bean>
<bean
class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
<property name="cacheSeconds" value="0" />
</bean>
<bean id="viewResolver"
class="org.springframework.web.servlet.view.InternalResourceViewResolver"
p:prefix="/WEB-INF/jsp/"
p:suffix=".jsp" />
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="5242880" />
</bean>
</beans>
|
Deployment Descriptor - web.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| <?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
id="WebApp_ID" version="2.5">
<display-name></display-name>
<welcome-file-list>
<welcome-file>FileUpload.jsp</welcome-file>
</welcome-file-list>
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>/WEB-INF/applicationcontext-servlet.xml</param-value>
</context-param>
<listener>
<listener-class>org.springframework.web.context.request.RequestContextListener</listener-class>
</listener>
<servlet>
<servlet-name>applicationcontext</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>applicationcontext</servlet-name>
<url-pattern>*.htm</url-pattern>
</servlet-mapping>
</web-app>
|
JSP for uploading file is as given below :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
| <!DOCTYPE html>
<html>
<head>
<title>File Upload Example using AngularJS</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<script type="text/javascript">
var myApp = angular.module('uploadApp', []);
myApp.controller('uploadController', function ($scope) {
// GET THE FILE INFORMATION.
$scope.getFileDetails = function (e) {
$scope.files = [];
$scope.$apply(function () {
// STORE THE FILE OBJECT IN AN ARRAY.
for (var i = 0; i < e.files.length; i++) {
$scope.files.push(e.files[i]);
}
});
};
// NOW UPLOAD THE FILES.
$scope.uploadFiles = function () {
//FILL FormData WITH FILE DETAILS.
var data = new FormData();
for (var i in $scope.files) {
data.append("file", $scope.files[i]);
console.log($scope.files[i]);
}
// ADD LISTENERS.
var objXhr = new XMLHttpRequest();
objXhr.addEventListener("progress", updateProgress, false);
objXhr.addEventListener("load", transferComplete, false);
// SEND FILE DETAILS TO tHE API.
objXhr.open("POST", "/SpringFileUpload_Download/Testupload.htm");
objXhr.send(data);
}
// UPDATE PROGRESS BAR.
function updateProgress(e) {
if (e.lengthComputable) {
document.getElementById('pro').setAttribute('value', e.loaded);
document.getElementById('pro').setAttribute('max', e.total);
}
}
// CONFIRMATION.
function transferComplete(e) {
alert("Files uploaded successfully.");
}
});
</script>
<body ng-app="uploadApp">
<div ng-controller="uploadController" >
<p><progress id="pro" value="0"></progress></p>
<div class="form-group form-horizontal">
<input type="file" id="file" name="file" multiple
onchange="angular.element(this).scope().getFileDetails(this)" class="input-file"/>
</div>
<div class="col-md-4">
<input type="button" ng-click="uploadFiles()" value="Upload" class="btn btn-primary"/>
</div>
</div>
</body>
|
success file for upload is as given below:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!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>Insert title here</title>
</head>
<body>
<p>Awesome.. Following file is uploaded successfully.</p>
<table width="80%" border="1" cellspacing="0" cellpadding="5">
<tr>
<th width="4%">No</th>
<th width="30%">Filename</th>
<th width="20%"> </th>
</tr>
<c:choose>
<c:when test="${files != null}">
<c:forEach var="file" items="${files}" varStatus="counter">
<tr>
<td>${counter.index + 1}</td>
<td>${file}</td>
<td><div align="center"><a href="download.htm?id=${ids}">Download</a> </div></td>
</tr>
</c:forEach>
</c:when>
</c:choose>
</table>
</body>
</html>
|
screen will look like given below:
Thanks for reading this article
for any query ping me on npjava90@gmail.com
