CODEWITHSUNDEEP
javascriptangularjs
Niranjan Godbole
Niranjan Godbole

Reputation: 2175

Angularjs formData.append is not working

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. this.pendingFiles contains file dataNetwork tab

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

Upvotes: 2

Views: 7063

Answers (2)

georgeawg
georgeawg

Reputation: 48968

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

Upvotes: 1

Vivz
Vivz

Reputation: 6620

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.

Upvotes: 1

Related Questions