Angularjs file upload

Question

html

    <form method='POST' enctype='multipart/form-data' name="formName">
        <div class="row">
            <div class="col-md-6">
                <input type="file" style="text-align: left" ng-model="value" class="btn"/>   
            </div>
            <div class="col-md-2">
                <input type="submit" value="upload" class="btn btn-info" ng-click="submitFile()"/>
            </div>
        </div>
    </form>

AngularJs

$scope.submitFile = function(){
    document.formName.action = 'http://xxx.xxx.xxx.xxx:8000/ww/up?s=' + $rootScope.reply.Sid; //$rootScope.reply.Sid is secession id
    document.formName.submit();
};

I am trying to do a fileupload with AngularJs. Will this logic work?. My selected path is also coming as given below.

C:\fakepath\license.txt

Is this an error?

Note: Our UI team was able to the fileupload with the below code. I was trying to attain the same thing in AngularJs

<body>
    <form method='POST' enctype='multipart/form-data' action="http://xxx.xxx.xx.xxx:xxxx/yyy/yyyyyyyyy?s=3e3646ea-48cc-4342-a388-e0c0d7bbf4e4"/'>
    File to upload: <input type=file id='up_file' name=upfile><br>
</body>

instead of document, i was using $scope, but it was always throwing error, so I changed it to document. — Jithin Shaji
– Jithin Shaji, Commented Mar 5, 2014 at 12:54
I think you'd better use a ready solution. For example, this: github.com/nervgh/angular-file-upload — Goodnickoff
– Goodnickoff, Commented Mar 5, 2014 at 13:00
is this an error? no. it's a feature so that other js libraries wont read the location file. — Royi Namir
– Royi Namir, Commented Mar 5, 2014 at 15:20
@Oledje, Your approach is the most widely followed way of file upload, I think. I have added some more steps to the question, as a reason why I am trying this way. by the way, I am new to AngularJs, I really struggled with those code :( — Jithin Shaji
– Jithin Shaji, Commented Mar 5, 2014 at 15:20

Mr.MAD · Accepted Answer · 2014-04-17 04:53:05Z

You did it right .. you only have to change few things to make it work

Change

<form method='POST' enctype='multipart/form-data' name="formName">

To

<form action="{{action}}" method='POST' enctype='multipart/form-data' name="formName">

In controller inject $timeout along with $scope

app.controller('Test', function($scope, $rootScope, $timeout){

 $scope.submitFile = function(){
  $scope.action = 'http://xxx.xxx.xxx.xxx:8000/ww/up?s=' + $rootScope.reply.Sid;

  $timeout(function(){
   document.formName.submit();
  }, 100);

 }

});

Action assigning $scope.action with new data .. angularjs needs to update the dom .. that is the reason we are using $timeout and submitting the form

Jignesh Mesvaniya · Accepted Answer · 2017-11-17 09:48:09Z

I am providing an example of Upload File. To develop this app, we have used HTML, CSS and AngularJS. Following example shows about how to upload the file using AngularJS.

<html>

   <head>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   </head>

   <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', ['$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(){
               });
            }
         }]);

         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>
</html>

This is a working example with no other dependencies than AngularJS

Collectives™ on Stack Overflow

Angularjs file upload

Is this an error?

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

Is this an error?

2 Answers 2

Comments

Comments

Related