angularjs - Upload multiple files in angular -
i've situation i've form in i've row i've 2 text fields entries , i've upload file row , kind of rows can 'n' , there master files can entered whole form while these part of form , i've submit these files @ once on clicking save button.
i'm kind of stuck ng-upload needs api call, , can't have more 1 api call form. sample html code below :
<!doctype html> <html> <head> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <form editable-form name="xyzform" ng-submit="create(model)"> <label>tags: </label><input class="col-xs-12 col-md-12" ng-model="model.tags" type="text" name="tags"> <label>notes: </label> <input class="col-xs-12 col-md-11" ng-model="model.notes" type="text" name="notes"> <table class=" col-xs-3 col-md-11 table" border="1px solid red;"> <thead> <tr> <th>product</th> <th>manufacturer</th> <th>location</th> <th>specification</th> <th></th> </tr> </thead> <tbody> <tr ng-repeat="itemrow in item.singleitem"> <td><input type="text" class="xdtextbox" name="itemrow.name" ng-model="model.itemrow[$index].name" /></td> <td><input type="text" class="xdtextbox" name="itemrow.manufacturer" ng-model="model.itemrow[$index].manufacturer" /></td> <td><input type="text" class="xdtextbox" name="itemrow.location" ng-model="model.itemrow[$index].location" /></td> <td><i class="pull-left glyphicon glyphicon-upload"><input type="file" name="itemrow.doc" ng-model="model.itemrow[$index].doc" multiple=false></i></td> <td><i class="pull-left glyphicon glyphicon-remove"></i></td> </tr> </tbody> </span> </table> <label>product spec: </label><input type="file" ng-model="prefabdoc" multiple="true" ngf-maxsize="15000000" /> </form> </body> </html>
here file value binding directive example ..
http://plnkr.co/edit/b13t84j5ipzinmh1f862?p=preview
js code is:
var app = angular.module('myapp', []); app.controller('mainctrl', function($scope) { $scope.name = 'world'; $scope.files = []; $scope.upload=function(){ alert($scope.files.length+" files selected ... write upload code"); }; }); app.directive('ngfilemodel', ['$parse', function ($parse) { return { restrict: 'a', link: function (scope, element, attrs) { var model = $parse(attrs.ngfilemodel); var ismultiple = attrs.multiple; var modelsetter = model.assign; element.bind('change', function () { var values = []; angular.foreach(element[0].files, function (item) { var value = { // file name name: item.name, //file size size: item.size, //file url view url: url.createobjecturl(item), // file input value _file: item }; values.push(value); }); scope.$apply(function () { if (ismultiple) { modelsetter(scope, values); } else { modelsetter(scope, values[0]); } }); }); } }; }]); html code is:
<!doctype html> <html ng-app="myapp"> <head> <meta charset="utf-8" /> <title>angularjs plunker</title> <script>document.write('<base href="' + document.location + '" />');</script> <link href="style.css" rel="stylesheet" /> <script data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js" data-require="angular.js@1.4.x"></script> <script src="app.js"></script> </head> <body ng-controller="mainctrl"> <p>hello {{name}}!</p> <input type="file" ng-file-model="files" multiple /> <button type="button" ng-click="upload()">upload</button> <p ng-repeat="file in files"> {{file.name}} </p> </body> </html>
Comments
Post a Comment