Spring MVC Upload File from AngularJs

Question

i did the part AngularsJs of the file upload and when i tried to send the uploaded file to my controller i got an error that the url not valid:

My controller is:

@RestController
@RequestMapping("/files")
public class UploadController {
@RequestMapping(value = "/fileUpload", method = RequestMethod.POST)
    @Produces(MediaType.APPLICATION_JSON) 
    public Data continueFileUpload(HttpServletRequest request, HttpServletResponse response){
            MultipartHttpServletRequest mRequest;

....

}

the Service AngularJs that link the controller is:

controller JS function:

$scope.uploadFile = function() {
        var file = $scope.myFile;
        console.log('file is ');
        console.dir(file);

        var uploadUrl = "/fileUpload";  /*i need here to know which url i must set*/
        FileUploadService.uploadFileToUrl(file, uploadUrl).then(
                function(result) {
                    $scope.errors = FileUploadService.getResponse();
                    console.log($scope.errors);
                    $scope.errVisibility = true;
                }, function(error) {
                    alert('error');
                })

    }

The FileUploadService js:

myapp.service('FileUploadService', [ '$q', '$http', function($q, $http) {
    var deffered = $q.defer();
    var responseData;
    this.uploadFileToUrl = function(file, uploadUrl) {
        var fd = new FormData();
        fd.append('file', file);
        return $http.post(uploadUrl, fd, {
            transformRequest : angular.identity,
            headers : {
                'Content-Type' : undefined
            }
        }).success(function(response) {

            /* $scope.errors = response.data.value; */
            console.log(response);
            responseData = response;
            deffered.resolve(response);
            return deffered.promise;
        }).error(function(error) {
            deffered.reject(error);
            return deffered.promise;
        });

    }

    this.getResponse = function() {
        return responseData;
    }

} ]);

I wonder which URl i must pass in order to call the continueFileUpload?

Updated:

the itr is loaded empty

the directive i used is :

the html :

Answer 1

试试：var uploadUrl =“ / files / fileUpload”;

Answer 2

try to use like below

maven web project

var uploadUrl = "./fileUpload";

normal webproject

var uploadUrl = "../fileUpload";

or you directly call with below format

http://yourip:portnumber/projectName/controllerName;

i hope it will working fine

Answer 3

This is the full working solution:

controller.java:

@RestController
@RequestMapping("/api")
public class FileController {
    @RequestMapping(value = "/getFile", method = RequestMethod.POST)
        public ResponseEntity<byte[]> getFileForm(@RequestParam(value = "file") MultipartFile multipartFile)
                throws IOException {

            // code ............
            return null;

        }}

Angular.Js:

$scope.downloadFile = function(){

              var a = document.createElement("a");
              document.body.appendChild(a);
              var fileExt = $scope.file.name.substring($scope.file.name.lastIndexOf('.')+1, $scope.file.namee.length) || $scope.file.name;

             var fileType = FileService.GenerateFileType(fileExt);

              FileService.getFile($scope.file).success(function(data){

                    var file = new Blob([data], {type:fileType});
                    var fileURL = window.URL.createObjectURL(file);
                    a.href = fileURL;
                    a.download = $scope.file.name;
                    a.click();


                });
}

FileService.js:

var GenerateFileType = function (fileExtension) {  
    var FileType = null;    
    switch (fileExtension.toLowerCase()) {  
            case "doc":  
            case "docx":  
                FileType = "application/msword";  
                break;  
            case "xls":  
            case "xlsx":  
                FileType = "application/vnd.ms-excel";  
                break;  
            case "pps":  
            case "ppt":
            case "pptx":
                FileType = "application/vnd.ms-powerpoint";  
                break;  
            case "txt":  
            case "properties":
                FileType = "text/plain";  
                break;  
            case "rtf":  
                FileType = "application/rtf";  
                break;  
            case "pdf":  
                FileType = "application/pdf";  
                break;  
            case "msg":  
            case "eml":  
                FileType = "application/vnd.ms-outlook";  
                break;  
            case "gif":  
            case "bmp":  
            case "png":  
            case "jpg":  
                FileType = "image/JPEG";  
                break;  
            case "dwg":  
                FileType = "application/acad";  
                break;  
            case "zip":  
                FileType = "application/x-zip-compressed";  
                break;  
            case "rar":  
                FileType = "application/x-rar-compressed";  
                break;  
        }  
    return FileType;
    }  

and

 var getFile = function(fileObj){

              return    $http({
                  method: 'POST',
                  url: "api/getFile",

                  headers: { 'Content-Type': undefined },

                  transformRequest: function (data) {
                      var fd = new FormData();
                      fd.append("file", data.file);

                    return fd;
                  },

                  data: {file: fileObj }
                });
             }