locked
File upload in Angular Js RRS feed

  • Question

  • User-73514677 posted

    Hi,

    How to use file upload option in Angular Js? I have tried the below code, but I am getting error as undefined.

    // index.html
    
    <form name="mainForm" id="createForm" ng-submit="mainForm.$valid && add()" novalidate>
     <div>
    <input type="file" class="form-control" id="imageUploadfile" name="imageUploadfile" accept="image/*" />
    <input type="button" name="imageUploadButton" ng-click="uploadFiles()" value="Upload" />
     </div>
    
    //controller.js
    $scope.uploadFiles = function () {
        var f = document.getElementById('imageUploadfile').files[0],
         r = new FileReader();
        r.onloaded = function (e) {
            var data = e.target.result;
    
        }
        r.readAsArrayBuffer(f);
        myAPIService.postUploadImage(r).success(function (response) {
            var imageurl = _testBaseUrl + 'Images/' + response.filePath.split(/(\\|\/)/g).pop();
            $scope.testTypeImage_url = imageurl;
        }).error(function (response) {
            alert(response.responseText);
        });
    
        };
    
    
    //service.js
    myAPIService.postUploadImage = function (formdata) {
            var request = {
                url: urlBase + 'UploadImage',
                method: 'POST',
                data: formdata,
                headers: {
                    'Content-Type': undefined
                }
    
            }
            return $http(request);
        };

    How to fix this?

    Thanks

    Tuesday, January 3, 2017 8:26 AM

All replies

  • User-707554951 posted

    Hi venkatzeus,

    From your description, you want  to use file upload in Angular.

    For you problem, I suggest you could refer to the following code:

      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <body ng-app = "myApp">
    	
          <div ng-controller = "myCtrl">
             <input type = "file" file-model = "myFile"/>
             <button ng-click = "uploadFile()">upload me</button>
          </div>
          
          <script>
             var myApp = angular.module('myApp', []);
             
             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', ['$https:', function ($https:) {
                this.uploadFileToUrl = function(file, uploadUrl){
                   var fd = new FormData();
                   fd.append('file', file);
                
                   $https:.post(uploadUrl, fd, {
                      transformRequest: angular.identity,
                      headers: {'Content-Type': undefined}
                   })
                
                   .success(function(){
                   })
                
                   .error(function(){
                   });
                }
             }]);
          
             myApp.controller('myCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){
                $scope.uploadFile = function(){
                   var file = $scope.myFile;
                   
                   console.log('file is ' );
                   console.dir(file);
                   
                   var uploadUrl = "/fileUpload";
                   fileUpload.uploadFileToUrl(file, uploadUrl);
                };
             }]);
    			
          </script>
          
       </body>
    

    You could also see the sample; below:

    https://jsfiddle.net/JeJenny/ZG9re/

    Best Regards

    Cathy

    Wednesday, January 4, 2017 3:32 AM