Md-file-input doesn't append in formData in AngularJS

Question

In an Anggular web app I have a form. I want to update a file, so I used lf-ng-md-file-input. This is the easy html:

<lf-ng-md-file-input lf-files='files' multiple> </lf-ng-md-file-input>

In my Controller, I did this:

let formData = new FormData();
angular.forEach(this.$scope.files,function(obj){
   formData.append('files[]', obj.lfFile);
});

Debugging it, I see that obj.lfFile exists:

lastModified:1473694273813
lastModifiedDate:Mon Sep 12 2016 17:31:13 GMT+0200 (ora legale Europa occidentale)
name:"test.jpg"
size:39790
type:"image/jpeg"
webkitRelativePath:""

The problem is that it doesn't append the file in my formData. It is still empty after the loop. Why?

Can you modify this DEMO on PLNKR to provide a Minimal, Complete, and Verifiable Example of the problem? — georgeawg
– georgeawg, Commented Dec 3, 2016 at 13:01

Matheno · Accepted Answer · 2016-12-02 08:59:29Z

1

I wrote a directive for this once, maybe it'll help you out:

DIRECTIVE:

angular.module('content')
    .directive('parFiles', files);

/* @ngInject */
function files($parse, $timeout) {

    var directive = {
        link: link,
        restrict: 'A'
    };

    return directive;

    function link(scope, element, attr) {
        var fn = $parse(attr['pirFiles']);

        element.bind('change', function (evt) {
            var files = [], fileList, i;
            fileList = evt.target.files;
            if (fileList != null) {
                for (i = 0; i < fileList.length; i++) {
                    files.push(fileList.item(i));
                }
            }
            $timeout(function () {
                fn(scope, {
                    $files: files,
                    $event: evt
                });
            });
        });
    }
}

VIEW:

 <input type="file"
        class="input-list__item"
        ng-disabled="dr.isFileUploaded"
        par-files="dr.addFiles($files)"
        required />

CONTROLLER:

function addFiles(files) {
    vm.files = files;
}

answered Dec 2, 2016 at 8:59

Matheno

4,2026 gold badges40 silver badges54 bronze badges

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

5 Comments

panagulis72 Over a year ago

In the directive, after the if(fileList != null) {...} I've written: let formData = new FormData(); formData.append("files", files[0]); but it cannot append the file yet. Why?

Matheno Over a year ago

Are you sure that files actually has data??

panagulis72 Over a year ago

The debug of chrome console shows me that files[0] is this: lastModified : 1473694273813 lastModifiedDate : Mon Sep 12 2016 17:31:13 GMT+0200 (ora legale Europa occidentale) name : "test.jpg" size : 39790 type : "image/jpeg" webkitRelativePath : ""

Matheno Over a year ago

Then; shouldn't it just be formData.append('file', obj); ?

panagulis72 Over a year ago

No, after the append, this is the value of formData: proto : FormData

Collectives™ on Stack Overflow

Md-file-input doesn't append in formData in AngularJS

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related