使用angularjs和spring boot上传文件

Question

I have an angularjs application deployed in a server, and a spring boot application deployed in another server.

in my angularjs application I have a form that uploads a file and send it via a rest controller, this controller then saves this file inside a folder in the server where the spring boot application is deployed.

this is my rest controller :

@CrossOrigin(origins="*")
@RestController
public class Upload {

    @RequestMapping(value="/imageUpload", method = RequestMethod.POST)
    public void UploadFile(MultipartHttpServletRequest request) throws IOException {

        Iterator<String> itr=request.getFileNames();
        MultipartFile file=request.getFile(itr.next());
        String fileName=file.getOriginalFilename();
        File dir = new File("C:\\file");
        if (dir.isDirectory())
        {
            File serverFile = new File(dir,fileName);
            BufferedOutputStream stream = new BufferedOutputStream(
                    new FileOutputStream(serverFile));
            stream.write(file.getBytes());
            stream.close();
        }else {
            System.out.println("not");
        }

    }
}

and this my angularjs controller which sends the file :

$scope.validerOffre= function(){
    var file = $scope.fileUpload;
    var uploadUrl = "/imageUpload";
    fileUploadService.uploadFileToUrl(file, uploadUrl);
    };

this controller then call the fileUploadService :

capValueRecruitApp.service('fileUploadService', function ($http) {
  this.uploadFileToUrl = function(file, uploadUrl){
    var fd = new FormData();
    fd.append('file', file);
    $http.post('http://localhost:8080' + uploadUrl, fd, {
        transformRequest: angular.identity,
        headers: {'Content-Type': undefined}
      })
      .success(function(){
      })
      .error(function(){
      });
  }
});

and in my angularjs application I want to display the files that I uploaded but I cant do that since the files were uploaded in the spring boot application server, which is another server .

so my question is how can I save the files that I uploaded in a folder in the angularjs application server instead of the server where the spring boot application is deployed.

Answer 1

You basically have two solutions :

1: you create a new @RequestMapping that takes the filename ( or even better an id returned by your fileUpload controller) and that returns the file. something like this :

@RequestMapping(value="/imageDownload", method = RequestMethod.POST)
public void downloadFile(@RequestParam(value = "fileName", required = true) String fileName,HttpServletResponse response) throws IOException {

    File dir = new File("C:\\file");
    File fileToDownload = new File(dir,fileName);
    if (dir.isDirectory() && fileToDownload.exists()){
        //read fileToDownload and send stream to to response.getOutputStream();

    }else {
        System.out.println("no such file "+ fileToDownload.toString());
        response.sendError(404);
        return;
    }

}

Then you call http://localhost:8080/imageDownload?filename=yourUploadedFile.jpg

2: When you save the file in your upload, save it somewhere where your webserver has direct access.

If our angularjs files are served by your spring application, you could add a new folder in spring.resources.staticLocations in the application.properties file. (see this : http://docs.spring.io/spring-boot/docs/current/reference/html/boot-features-developing-web-applications.html#boot-features-spring-mvc-static-content )