current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 0 down vote favorite

Please see the following code and let me know how can i upload the file in a folder of my project.. where can i write the url? I select the file and it does not get save simply by clicking on the update button.

Thanks in Advance Ria

var DocTrack = angular.module('DocTrack', []);

DocTrack.controller('DocumentController', DocumentController);

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

DocTrack.service('fileUpload', ['$http', function ($http) {
    debugger;
    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 () {
            alert('File Uploaded Successfully...');
        })
        .error(function () {
            alert('File has not been uploaded');
        });
    }
}]);

DocTrack.controller('DocumentController', ['$scope', 'fileUpload', function ($scope, fileUpload) {

    $scope.uploadFile = function () {
         debugger;
        var file = $scope.myFile;
        console.log('file is ' + JSON.stringify(file));
    
        var uploadUrl = "http://localhost:40966/fileUpload";
        fileUpload.uploadFileToUrl(file, uploadUrl);
    };
}]);
      <div ng-controller = "DocumentController">
           <input type="file" file-model="myFile" />          
           <button ng-click="uploadFile()" data-url="">upload me</button>            
        </div>

share|improve this question
up vote 0 down vote 
 var uploadUrl = "http://localhost:40966/fileUpload";

Can you check your backend url it must be same as you specify and during saving your image you must specify your path to store image in backend.

share|improve this answer
    
Thanks for your answer. Please tell me the back end code. Thanks – Ria Apr 1 '15 at 6:13
up vote 0 down vote

In html form

<div class="form-group col-xs-12 ">
  <label class="form-group">Select file</label>
  <div class="controls">
     <input type="file" file-model="fileUrl"/>
  </div>
</div>

in Controller.js you put following code

   var file = $scope.fileUrl;
   var uploadUrl = "/Uploadfile";
   var data = fileUpload.uploadFileToUrl(file, uploadUrl,formdata);
};

In your service

.service('fileUpload', ['$http', function ($http) {
    this.uploadFileToUrl = function(file, uploadUrl,formdata){
        var fd = new FormData();
        fd.append('file', file);
        fd.append('formdata',angular.toJson(formdata));
        $http.post(uploadUrl, fd, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        })
        .success(function(data){
          console.log(data);
          return data;
      })
        .error(function(){
        });
    }
}]);

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

"/Uploadfile" is your backend url

share|improve this answer
    
Thanks @Gajanan The back end url which you are specifying is my controller's name/action method. Its uploading file now. – Ria Apr 3 '15 at 10:48

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.