Unable to loop through string array and append to FormData

Question

I am developing a file upload module in AngularJS. I will be having multiple file controls and each control can upload one file at a time (not multiple). Finally on click of submit I am saving all the files. I am dynamically generating file controls using ng-repeat as below.

 <div class="upload-button" ng-repeat="fileInput in fileInputs">
                <div class="upload-button-icon">
                    <img src="images/folder-small.png">
                    <div class="upload-text">{{fileInput}}</div>
                    <input type="file" file-data="{{fileInput}}" file-model="{{fileInput}}" />
                </div>
            </div>

JS code to assign values to file controls

$scope.fileInputs = ["Passport","Visa"];

Below is my code to upload files.

myapp.factory('fileUpload', ['$http', function ($http) {
    var fileuploadurl = "http://localhost:19144/" + 'api/Customer/UploadLeaseFiles/' + 2;
    var service = {
        uploadUrl: fileuploadurl,
        pendingFiles: [],
        doUpload: doUpload
    };
    return service;
    function doUpload() {
        debugger;
        var files = new FormData();
        angular.forEach(this.pendingFiles, function (value, index) {
            files.append('file', value);
            files.append('IndexValue', index);

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

This is my 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];
            });
        }
    };
}]);

Above code will work only if I assign integers to fileInputs as:

$scope.fileInputs = [1,2,3];

I am struggling to understand why it is working if I assign integer to fileinputs. How can I assign strings and make the above code work?

You are trying to access pendingFiles. Where are you defining it ? — Saurabh Tiwari
– Saurabh Tiwari, Commented Jun 7, 2017 at 6:49
Thankyou. Yeah. Please see directive fileModel. It takes files. — Niranjan Godbole
– Niranjan Godbole, Commented Jun 7, 2017 at 6:50
Not sure if I got you yet. What is the fileUpload injected in to the directive — Saurabh Tiwari
– Saurabh Tiwari, Commented Jun 7, 2017 at 6:55
Hey, you are trying to put files in an array. So with number it will work fine because numbers can be indexex. You can't just make string an index — Saurabh Tiwari
– Saurabh Tiwari, Commented Jun 7, 2017 at 6:59
Oh thank you. Is there any alternatives solution to fix this? I will get $scope.fileInputs = ["Passport","Visa"]; — Niranjan Godbole
– Niranjan Godbole, Commented Jun 7, 2017 at 7:01

Saurabh Tiwari · Accepted Answer · 2017-06-07 07:10:51Z

1

You are pushing files in an array. Basically you are doing something like:

pendingFiles[1] = file

and again

pendingFiles["passport"] = file

The first case works fine with array, but the second won't.

So the solution is change pending files to an object like:

var service = {
        uploadUrl: fileuploadurl,
        pendingFiles: {},
        doUpload: doUpload
    };

With object you can make properties on it like:

{
passport : file,
Visa : file2
}

and then use this object while you upload.

Update

for sending extra data use data property of formData obj. Like:

 var files = new FormData();
        angular.forEach(this.pendingFiles, function (value, index) {
            files.append('file', value);
            files.append('IndexValue', index);
            files.append ('data', angular.toJson(anyJSObject));

        });

Hope it works.

edited Jun 7, 2017 at 7:10

answered Jun 7, 2017 at 7:01

Saurabh Tiwari

5,28911 gold badges52 silver badges91 bronze badges

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

6 Comments

Niranjan Godbole Over a year ago

Thanks a lot. It works. Is there any way that i can send one extra parameter to api call files.append('file', value); files.append('IndexValue', index);

Saurabh Tiwari Over a year ago

That should be possible. Since you are using FormData you can send any data you want

Niranjan Godbole Over a year ago

Thanks and it is working. How can i retrieve this files.append ('data', angular.toJson(anyJSObject)); in web api?

Saurabh Tiwari Over a year ago

In your api controller method, you should be getting it like : var data = HttpContext.Current.Request.Form["data"];

Niranjan Godbole Over a year ago

you helped a lot. Thanks

|

Collectives™ on Stack Overflow

Unable to loop through string array and append to FormData

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related