I'm using nervgh/angular-file-upload to upload multiple files on my app. The requirement is that there are multiple Questions
added by the user, each with its own FileUploader
on the interface.
When I write multiple input
s as a proof of concept, it works - but this is not a good solution since the user can add as many question
s as it wants.
I'm trying to use the same input
object and change it's attributes dynamically so the file is sent to the proper question
:
HTML
<div ng-app="app">
<div ng-controller="AppController">
<h2>{{question.title}}</h2>
<input type="file" nv-file-select uploader="question.uploader"/><br/>
<ul>
<li ng-repeat="item in question.uploader.queue">
<span ng-bind="item.file.name"></span><br/>
</li>
</ul>
<button ng-click="next()">next question</button>
</div>
</div>
JS
var app = angular.module('app', ['angularFileUpload']);
app.controller('AppController', function($scope, FileUploader) {
$scope.questions = [{title: 'q1'}, {title: 'q2'}];
$scope.questions.forEach(function(item){
item.uploader = new FileUploader();
});
$scope.question = $scope.questions[0];
$scope.next = function(){
var curIndex = $scope.questions.indexOf($scope.question);
var next = curIndex + 1 >= $scope.questions.length
? 0
: curIndex + 1;
$scope.question = $scope.questions[next];
};
});
When doing this, every time a file is added to q2
on the UI it shows up on queue q1
. It seems that the uploader
attribute of the input is not being updated, or (if it is) is being ignored.
Is there a way to upload a file to the proper queue with only one input element?