Angularjs formData.append is not working

Question

Hi I am developing angularjs application. I have file upload module. I am appending file data to FormData as below.

 var filesformdata = new FormData();
    angular.forEach(this.pendingFiles, function (value, key) {
                filesformdata.append(key, value);
            });
            for (var pair of filesformdata.entries()) {
                console.log(pair[0] + ', ' + pair[1]);
            }

This is My angular code.

angular.module('RoslpApp').factory('fileUpload', ['$http', function ($http) {
    debugger;
    var fileuploadurl = "http://localhost:19144/" + 'api/Customer/UploadLeaseFiles/' + 2;
    var service = {
        uploadUrl: fileuploadurl,
        pendingFiles: [],
        doUpload: doUpload
    };
    return service;


    function doUpload() {
        debugger;
        var filesformdata = new FormData();
        angular.forEach(this.pendingFiles, function (value, key) {
            filesformdata.append(key, value);
        });
        for (var pair of filesformdata.entries()) {
            console.log(pair[0] + ', ' + pair[1]);
        }

        return $http.post(this.uploadUrl, filesformdata, {
            transformRequest: angular.identity,
            headers: {
                'Content-Type': undefined
            }
        })
    }
}]);

This is directive code.

myapp.directive('fileModel', ['fileUpload', function (fileUpload) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.bind("change", function (evt) {
                fileUpload.pendingFiles[attrs.fileModel] = evt.target.files[0];
            });
        }
    };
}]);

This is upload function

  $scope.upload = function (filename) {
                debugger;
                fileUpload.doUpload().success(function (success) {
                   console.log(success);
                });
            };

This is html code.

<div class="upload-button" ng-repeat="file in files">
                <div class="upload-button-icon">
                    <img src="images/folder-small.png">
                    <div class="upload-text">{{file}}</div>
                    <input type="file" id="file1" name="file1" file-data="{{file}}" file-model="{{file}}"/>
                </div>
            </div>
   <input type="submit" value="{{ 'NEXT' | translate }}" class="blue-button" ng-click="upload()">

Eventough i have files in this.pendingFiles when i display using console.log or in api using below code i dont get files.

  System.Web.HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files;
                // CHECK THE FILE COUNT.
                UploadedLeaseFiles totalDocumentInserted = null;
                for (int iCnt = 0; iCnt <= hfc.Count - 1; iCnt++)

I have files inside this.pendingFiles. Please see the screen shot.

My filesformdata FormData is empty always. May i get some help here to fix this? Thanks.

While posting it what is shown under the headers section of your Networks tab.If it is there, then the problem is not with formdata appending but elsewhere — Vivz
– Vivz, Commented Jun 6, 2017 at 11:42
$scope.files= ["Passport","Visa"]; This is giving problem. $scope.files= [1, 2, 3]; this works fine — Niranjan Godbole
– Niranjan Godbole, Commented Jun 6, 2017 at 13:06
Are you getting any error for the former case cause I can't seem to find any error in your code? — Vivz
– Vivz, Commented Jun 6, 2017 at 18:04

Vivz · Accepted Answer · 2017-06-06 11:38:59Z

1

The data in a FormData object filesformdata is not revealed by inspecting it with console.log(). It is there, you just can't see it. But however you can view it in networks tab under request payload.

answered Jun 6, 2017 at 11:38

Vivz

6,6282 gold badges19 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Niranjan Godbole Over a year ago

Thank you. I have added screen shot which i captured from network tab. I dont see anything there.

Vivz Over a year ago

Is it going inside the success or error part of your http request to the server?

Niranjan Godbole Over a year ago

System.Web.HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files; UploadedLeaseFiles totalDocumentInserted = null; for (int iCnt = 0; iCnt <= hfc.Count - 1; iCnt++) Here count is 0. That means i am not recieving any files.

Vivz Over a year ago

So basically you are not going inside the success of your http request.Then your problem is elsewhere.

Niranjan Godbole Over a year ago

Yeah i am getting exception in iCnt <= hfc.Count - 1.

georgeawg · Accepted Answer · 2017-06-06 21:36:29Z

Here is a filesInput directive that integrates with the ngModelController API:

app.directive("filesInput", function() {
  return {
    require: "ngModel",
    link: postLink
  };
  function postLink(scope, elem, attrs, ngModel) {
    elem.on("change", function() {
      ngModel.$setViewValue(elem[0].files);
    })
  }
});

Usage:

<input type=file ng-model="files" files-input multiple />

Test it with:

  vm.compute = function () {
        var filesformdata = new FormData();
        angular.forEach(vm.files, function (value, key) {
            filesformdata.append(key, value);
        });
        for (var pair of filesformdata.entries()) {
            console.log(pair[0] + ', ' + pair[1]);
            console.log(pair[1]);
        }

  }

You will find that formData.append works.

The DEMO on PLNKR

Collectives™ on Stack Overflow

Angularjs formData.append is not working

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related