JAVA AND J2EE: File Uploading Using AngularJS and Spring MVC

Step 1: Add all below dependencies in pom.xml

<dependency>
    <groupid>com.fasterxml.jackson.core</groupId>
    <artifactid>jackson-databind</artifactId>
    <version>2.9.0.pr4</version>
</dependency>
<dependency>
    <groupid>com.fasterxml.jackson.core</groupId>
    <artifactid>jackson-core</artifactId>
    <version>2.9.0.pr4</version>
</dependency>
<dependency>
    <groupid>commons-io</groupId>
    <artifactid>commons-io</artifactId>
    <version>2.5</version>
</dependency>
<dependency>
    <groupid>javax.servlet</groupId>
    <artifactid>javax.servlet-api</artifactId>
    <version>4.0.0-b07</version>
    <scope>provided</scope>
</dependency>

<dependency>
    <groupid>commons-fileupload</groupId>
    <artifactid>commons-fileupload</artifactId>
    <version>1.3.3</version>
</dependency>
<dependency>
    <groupid>org.springframework</groupId>
    <artifactid>spring-context</artifactId>
    <version>4.3.9.RELEASE</version>
</dependency>
<dependency>
    <groupid>org.springframework</groupId>
    <artifactid>spring-webmvc</artifactId>
    <version>4.3.9.RELEASE</version>
</dependency>
<dependency>
    <groupid>org.springframework</groupId>
    <artifactid>spring-web</artifactId>
    <version>4.3.9.RELEASE</version>
</dependency>

Step 2: Add dispatcher servlet dependency in web.xml

Step 3: Add Resolvers and Bean Definition in dispatcher-servlet.xml file

Step 4: create an html page to upload file using angular js

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>File Upload</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.directive('fileModel', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var model = $parse(attrs.fileModel);
            var modelSetter = model.assign;

element.bind('change', function(){
                scope.$apply(function(){
                    modelSetter(scope, element[0].files[0]);
                });
            });
        }
    };
}]);
app.controller('FileCtrl', function($scope,$http,$location) {
  var self =this; 
 self.uploadFile=function(){
  console.log("uploading file");
  var file =  $scope.myfile;
  console.log(file);
  var fd = new FormData();
   fd.append('file',file);
   console.log(fd);
  $http.post('storefile/101',fd,{
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        }).then(
          
        alert('file uploaded'),null
        );
  $location.reload();
 }
 
 
});
</script>
</head>
<body ng-app="myApp">
<div ng-controller="FileCtrl as fctrl">
 <form ng-submit="fctrl.uploadFile()" enctype="multipart/form-data" >
 <input type="file" file-model="myfile" />
 <input type="submit" value="upload" />
 </form>
</div>
</body>
</html>

Step 5: create a controller to save the file

package com.education.controllers;

import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileOutputStream;

import javax.servlet.http.HttpServletRequest;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
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.multipart.MultipartFile;

@Controller
public class FileUploadController {
 @RequestMapping(value = "/storefile/{id}", method = RequestMethod.POST)
 public String storeFile(@PathVariable("id") String id, @RequestParam("file") MultipartFile[] files,
   HttpServletRequest request) {
  System.out.println(files[0]);
  // storing file on server
  System.out.println(request.getRealPath("/"));
  String path = request.getRealPath("/") + "resources\\Images\\" + files[0].getOriginalFilename();
  System.out.println(path);
  MultipartFile file = files[0];

if (!file.isEmpty()) {

try {
    byte[] bytes = file.getBytes();
    System.out.println(file.getOriginalFilename());

File serverFile = new File(path);
    serverFile.createNewFile();

BufferedOutputStream stream = new BufferedOutputStream(new FileOutputStream(serverFile));
    stream.write(bytes);
    stream.close();
   } catch (Exception ex) {
    System.out.println(ex);
   }

}
  System.out.println(id);
  return "upload";
 }

@RequestMapping("/")
 public String index() {
  return "upload";
 }

}

Step 6: Test your Program. 😃

File Uploading Using AngularJS and Spring MVC

No comments:

Popular Posts

Pages