CODEWITHSUNDEEP
angularjs
Deniss M.
Deniss M.

Reputation: 4050

AngularJS 1.x: Dynamically created multiple File Upload fields

You have to excuse me, I do not use Angular that often. I need to implement a solution in which I can upload files from dynamically generated input fields.

The catch is that I cannot use any directives (this is due to the framework I am using in which AngularJS is implemented).

My current code for creating fields:

$scope.addNewFile = function() {
    var newFileNo = $scope.files.length + 1;
    $scope.files.push({'id': 'file' + newFileNo});
};

$scope.removeFile = function() {
    var lastFile = $scope.files.length - 1;
    $scope.files.splice(lastFile);
};

And here is the code for uploading files (not correct, because of static id and name values:

$scope.uploadFile = function() {
    var file = document.getElementById('file').files[0],
        r = new FileReader;
    r.onloadend = function (e) {
        var data = e.target.result;
        console.log('data');
        console.log(data);
        // http.post
    };
    r.readAsArrayBuffer(file);
};

And here is my HTML:

<div data-ng-repeat="file in files">
    <div class="row top-buffer">
        <div class="col-lg-10">
            <input type="file"
                   ng-model="file.name"
                   name="file"
                   class="form-control"
                   id="file">
        </div>
        <div class="col-lg-2 text-right">
            <div class="btn btn-primary" ng-click="uploadFile()">Upload</div>
        </div>
    </div>
</div>
<div class="row top-buffer">
    <div class="col-lg-11"></div>
    <div class="col-lg-1 text-right">
        <div class="glyphicon glyphicon-plus" aria-hidden="true" ng-click="addNewFile()"></div>
        <div class="glyphicon glyphicon-minus" aria-hidden="true" ng-click="removeFile()"></div>
    </div>
</div>

I can't really understand how I can get the values of dynamically generated file fields... any help appreciated!

Upvotes: 0

Views: 1244

Answers (2)

Michael Godden
Michael Godden

Reputation: 36

Writing an uploader properly is a very difficult task. A major problem with an upload component/directive is getting it to work in Internet Explorer; because it can only be used once in IE. Another problem is that IE will not let you programmatically "press" the button, it must be a real mouse click.

There are upload libraries out there for AngularJs, just google. However if you are intent on doing it yourself then you can use my git repo as an example of how it should be done. Just use the jwtUploader and jwtUploaderButton directives.

https://github.com/smylydon/SEPE-7WCM0033-0206-FRONTEND/tree/master/client/app

Upvotes: 0

Virgilio Afonso Jr.
Virgilio Afonso Jr.

Reputation: 86

There is no ng-model for <input type=file, but you can achieve what you want setting the id dynamically with ng-attr:

<div ng-repeat="file in files">
  {{file.id}}:
  <input type="file"
         ng-attr-name="{{file.id}}"
         ng-attr-id="{{file.id}}">
</div>

On uploadFile() you can post them:

$scope.uploadFile = function() {
  $scope.files.forEach(function(file) {
    // $http.post: document.getElementById(file.id).files[0])
  });
};

Example on Fiddle: https://jsfiddle.net/virgilioafonsojr/92nw4j4f/1/

I hope it helps.

Upvotes: 1

Related Questions