Tuesday 25 October 2016

Spring with Angularjs File Upload & download

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%">&nbsp;</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



at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Spring Boot SSL configuration -Tomcat Server

Hi Friends hope you all are doing well. Today I am going to demonstrate about how to configure SSL in Spring boot web Application. Need o...