使用Angularjs中的rest api上传图片

Question

I have to upload image using rest api for successfull upload will get the response of file folder destination ex: D:/ddd/download ,I am not able to upload image, below is my code given suggest me any corrections. while uploading image i have to give parameter name as fileData. api ex: http://somelink and parameter for post is fileData

Html code

<input type = "file" file-model = "myFile"/>
<button ng-click = "uploadFile()">upload me</button>

my service and directive

 myApp.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]);
                 });
              });
           }
        };
     }]);

     myApp.service('fileUpload', ['$http', function ($http) {
        this.uploadFileToUrl = function(file, uploadUrl){
           var fd = new FormData();
           fd.append('file', file);

           $http.post(uploadUrl, fd, {
              transformRequest: angular.identity,
              headers: {'Content-Type': undefined}
           })

           .success(function(){
           })

           .error(function(){
           });
        }
     }]);

my controller file

 $scope.uploadFile = function(){
                var data={
            'fileData':$scope.myFile
    }
    var uploadUrl = "http://";
    fileUpload.uploadFileToUrl(data, uploadUrl).success(function(response) {
        $scope.fileName=response;
    })
   };

Answer 1

Please check on this... Controller:

   $scope.uploadFile = function () {
          var file = $scope.myFile;
          console.log(file);
          if(file.type==='image/jpeg' || file.type==='image/jpg' || file.type==='image/png'  ){
          var uploadUrl = "http://";
          fileUpload.uploadFileToUrl(file, uploadUrl);
          angular.element('input[type="file"]').val(null);

          }else{
             $scope.errorMessage='File Type Error';
          }
        };

Service:

myApp.service('fileUpload', ['$http', function ($http) {

    this.uploadFileToUrl = function (file, url) {

      var uploadUrl = url;
      var fd = new FormData();
      fd.append('file', file);
      $http.post(uploadUrl, fd, {
        transformRequest: angular.identity,
        headers: {'Content-Type': undefined}
      })
        .success(function () {
          console.log("Image Save");
        })
        .error(function () {
        });
    };

 }]);

Answer 2

You want to pass a the file itself to the formdata object

fileUpload.uploadFileToUrl($scope.myFile, uploadUrl).success(function(response) {
    $scope.fileName=response;
})

and set the first parameter of append as fileData

fd.append('fileData', file);

Answer 3

Hi friends now the image upload is working, i have removed service and done changes to my controller by adding below code.

var file = $scope.myFile;
    var uploadUrl = "http://";
    var fd = new FormData();
    fd.append('fileData', file);
    $http.post(uploadUrl, fd, {
        transformRequest: angular.identity,
        headers: {'Content-Type': undefined}
    })
    .success(function(response){
        $rootScope.fileValue = response;

    })