Join the Stack Overflow Community
Stack Overflow is a community of 6.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 3 down vote favorite

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;
    })
   };
share|improve this question
up vote 0 down vote

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 () {
        });
    };

 }]);
share|improve this answer
up vote 0 down vote

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);
share|improve this answer
    
I am getting TypeError: Cannot read property 'success' of undefined – Sudhir Oct 7 '16 at 7:10
up vote 0 down vote

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;

    })
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.