i want to upload multiple files using angular js, but it is like limited number of files and each with specific validation, hence cant use "multiple". Using multiple controls one for each file..
below is the sample code
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.filelist = ['file1','file2']
});
app.directive("fileBind", function() {
return function( scope, elm, attrs ) {
elm.bind("change", function( evt ) {
scope.$apply(function() {
scope[ attrs.fileBind ] = evt.target.files;
});
});
};
});
the corrposponding html is:
<div ng-controller="MainCtrl">
<div ng-repeat="myfile in filelist">
<input type="file" file-bind="files" />
</div>
<div ng-repeat="file in files">
<pre>{{ file | json }}</pre>
</div>
</div>
I have also made a plunker for it:
but this is not working... if i use $index or anything to store all the files uploaded, the directive stops working...
any help is appriciated
i want to upload multiple files using angular js, but it is like limited number of files and each with specific validation, hence cant use "multiple". Using multiple controls one for each file..
below is the sample code
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.filelist = ['file1','file2']
});
app.directive("fileBind", function() {
return function( scope, elm, attrs ) {
elm.bind("change", function( evt ) {
scope.$apply(function() {
scope[ attrs.fileBind ] = evt.target.files;
});
});
};
});
the corrposponding html is:
<div ng-controller="MainCtrl">
<div ng-repeat="myfile in filelist">
<input type="file" file-bind="files" />
</div>
<div ng-repeat="file in files">
<pre>{{ file | json }}</pre>
</div>
</div>
I have also made a plunker for it: http://plnkr.co/edit/DF2WYU
but this is not working... if i use $index or anything to store all the files uploaded, the directive stops working...
any help is appriciated
Share Improve this question edited Jun 11, 2013 at 7:01 Mahen asked Jun 11, 2013 at 6:43 MahenMahen 531 gold badge2 silver badges10 bronze badges 2- 2 And your question is? – hakre Commented Jun 11, 2013 at 6:47
- sorry wasnt too explicit about the question – Mahen Commented Jun 11, 2013 at 7:07
2 Answers
Reset to default 8Not sure where the problem is but I have put together a simple/light angular directive with polyfill for browsers not supporting HTML5 FormData here:
https://github./danialfarid/angular-file-upload
It is very similar to what you do here using a directive listening to change event. Then you can call added prototype to $http "uploadFile" to upload that file to the server via ajax. For IE it would load up a flash file to simulate the same thing.
Here is the working demo: http://angular-file-upload.appspot./
<script src="angular.min.js"></script>
<script src="angular-file-upload.js"></script>
<div ng-controller="MyCtrl">
<input type="text" ng-model="myModelObj">
<input type="file" ng-file-select="onFileSelect($files)" >
</div>
controller:
$http.uploadFile({
url: 'my/upload/url',
data: {myObj: $scope.myModelObj},
file: $file
}).then(function(data, status, headers, config) {
// file is uploaded successfully
console.log(data);
});
I'm not sure about your intention looking the code (sorry not much time...) anyway a single html tag input-file can contain a list of files,see https://developer.mozilla/en-US/docs/Web/API/FileList
Given that you can try with this answer appending more files to the FormData