How To Upload Multiple Files(each File Contains Max 1 File) On Clicking On Submit Button?
Hi i am developing file upload module using Angularjs and api. I am following https://jsfiddle.net/JeJenny/vtqavfhf/. I have one list which contains document names such as passport
Solution 1:
Here is a working example, hope it helps
var myApp = angular.module('myApp', []);
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];
});
}
};
}]);
myApp.factory('fileUpload', ['$http', function($http) {
var service = {
uploadUrl: "https://httpbin.org/post",
pendingFiles: [],
doUpload: doUpload
};
return service;
function doUpload() {
var files = new FormData();
angular.forEach(this.pendingFiles, function(value, key) {
files.append('file', value);
});
return $http.post(this.uploadUrl, files, {
transformRequest: angular.identity,
headers: {
'Content-Type': undefined
}
})
}
}]);
myApp.controller('myCtrl', ['$scope', 'fileUpload', function($scope, fileUpload) {
$scope.fileInputs = [1, 2, 3];
$scope.upload = function(filename) {
fileUpload.doUpload().success(function(success) {
$scope.result = success
});
};
}]);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<div ng-repeat="fileInput in fileInputs">
<input type="file" file-data="{{fileInput}}" file-model="{{fileInput}}" />
</div>
<br />
<button ng-click="upload()">upload all</button>
<br />
<pre>{{result | json}}</pre>
</div>
</body>Solution 2:
add multiple attribute to your input tag file
<input type="file" multiple>
this will allow multiple select of files
Post a Comment for "How To Upload Multiple Files(each File Contains Max 1 File) On Clicking On Submit Button?"