Nervgh Angular File Upload - How to limit the number of images to upload?
Solution 1
using angular-file-upload v1.0.2
There are predefined filters https://github.com/nervgh/angular-file-upload/wiki/Module-API#predefined-filters
Predefined filters
- folder
- queueLimit
set the limit:
var uploader = new FileUploader({
queueLimit: 1
});
then in the view.
<element nv-file-drop filters="queueLimit"></element>
If you have set queueLimit to 1 but don't want it applied. Set the filters attribute to an empty string. When filters attribute is not set, all filters apply.
<element nv-file-drop filters=""></element>
I found that multiple filters must not be separated with a space like the doc suggest. Or else only the first filter apply.
<element nv-file-drop filters="filterName1,filterName2"></element>
Solution 2
I contacted the Module author on this and he was really kind in replying to my question. Here is his response on how we can limit the number of file uploads:
You could use "ng-disabled" directive and filters of uploader https://github.com/nervgh/angular-file-upload/issues/67#issuecomment-35322492
Solution 3
Following worked for me
uploader = new FileUploader({
queueLimit: 1
});
Neel
Previously know as @blackops_programmer. I know, it was a pretty lame Display name.
Updated on June 15, 2022Comments
-
Neel almost 2 years
I am just testing out this Angular module "Nervgh Angular File Upload" for file upload and so far I was able to get it to work as per the example given in the instruction which is great. This allows multiple uploads. Although I read through the properties and methods I can use, I still dont know how to limit the number of uploads to be allowed. For instance, in my form I dont want to allow users to upload more than 3 photos. How can I do that?
ATM, I am using the following code as per the example given in the link above:
<!DOCTYPE html> <html id="ng-app" ng-app="app"> <!-- id="ng-app" IE<8 --> <head> <title>Uploads only images (with canvas preview)</title> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" /> <!-- Fix for old browsers --> <script src="../bower_components/es5-shim/es5-shim.js"></script> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <!--<script src="../bower_components/angular/angular.js"></script>--> <script src="http://code.angularjs.org/1.1.5/angular.min.js"></script> <script src="../../angular-file-upload.js"></script> <script src="controllers.js"></script> <script src="directives.js"></script> <style> .my-drop-zone { border: dotted 3px lightgray; } .ng-file-over { border: dotted 3px red; } /* Default class applied to drop zones on over */ .another-file-over-class { border: dotted 3px green; } html, body { height: 100%; } canvas { background-color: #f3f3f3; -webkit-box-shadow: 3px 3px 3px 0 #e3e3e3; -moz-box-shadow: 3px 3px 3px 0 #e3e3e3; box-shadow: 3px 3px 3px 0 #e3e3e3; border: 1px solid #c3c3c3; height: 100px; margin: 6px 0 0 6px; } </style> </head> <!-- 1. ng-file-drop | ng-file-drop="options" --> <body ng-controller="TestController" ng-file-drop> <div class="container"> <div class="navbar navbar-default"> <div class="navbar-header"> <a class="navbar-brand" href="https://github.com/nervgh/angular-file-upload">Angular File Upload</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Demos <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="../simple">Simple example</a></li> <li class="active"><a href="#">Uploads only images (with canvas preview)</a></li> <li><a href="../without-bootstrap">Without bootstrap example</a></li> </ul> </li> <li><a href="https://github.com/nervgh/angular-file-upload">View on Github</a></li> <li><a href="https://raw.github.com/nervgh/angular-file-upload/master/angular-file-upload.min.js">Download</a></li> </ul> </div> </div> <div class="row"> <div class="col-md-3"> <h3>Select files</h3> <div ng-show="uploader.isHTML5"> <!-- 3. ng-file-over | ng-file-over="className" --> <div class="well my-drop-zone" ng-file-over> Base drop zone </div> <!-- Example: ng-file-drop | ng-file-drop="options" --> <div class="well my-drop-zone" ng-file-drop="{ url: '/foo' }" ng-file-over="another-file-over-class"> Another drop zone with its own settings </div> </div> <!-- 2. ng-file-select | ng-file-select="options" --> <input ng-file-select type="file" multiple /> </div> <div class="col-md-9" style="margin-bottom: 40px"> <h2>Uploads only images (with canvas preview)</h2> <h3>The queue</h3> <p>Queue length: {{ uploader.queue.length }}</p> <table class="table"> <thead> <tr> <th width="50%">Name</th> <th ng-show="uploader.isHTML5">Size</th> <th ng-show="uploader.isHTML5">Progress</th> <th>Status</th> <th>Actions</th> </tr> </thead> <tbody> <tr ng-repeat="item in uploader.queue"> <td> <strong>{{ item.file.name }}</strong> <!-- Image preview --> <!--auto height--> <!--<div ng-thumb="{ file: item.file, width: 100 }"></div>--> <!--auto width--> <div ng-show="uploader.isHTML5" ng-thumb="{ file: item.file, height: 100 }"></div> <!--fixed width and height --> <!--<div ng-thumb="{ file: item.file, width: 100, height: 100 }"></div>--> </td> <td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td> <td ng-show="uploader.isHTML5"> <div class="progress" style="margin-bottom: 0;"> <div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div> </div> </td> <td class="text-center"> <span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span> <span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span> <span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span> </td> <td nowrap> <button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess"> <span class="glyphicon glyphicon-upload"></span> Upload </button> <button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()" ng-disabled="!item.isUploading"> <span class="glyphicon glyphicon-ban-circle"></span> Cancel </button> <button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()"> <span class="glyphicon glyphicon-trash"></span> Remove </button> </td> </tr> </tbody> </table> <div> <p> Queue progress: <div class="progress" style=""> <div class="progress-bar" role="progressbar" ng-style="{ 'width': uploader.progress + '%' }"></div> </div> </p> <button type="button" class="btn btn-success btn-s" ng-click="uploader.uploadAll()" ng-disabled="!uploader.getNotUploadedItems().length"> <span class="glyphicon glyphicon-upload"></span> Upload all </button> <button type="button" class="btn btn-warning btn-s" ng-click="uploader.cancelAll()" ng-disabled="!uploader.isUploading"> <span class="glyphicon glyphicon-ban-circle"></span> Cancel all </button> <button type="button" class="btn btn-danger btn-s" ng-click="uploader.clearQueue()" ng-disabled="!uploader.queue.length"> <span class="glyphicon glyphicon-trash"></span> Remove all </button> </div> </div> </div> </div> </body> </html>Does anyone know how to put a limit on the maximum number of file uploads that can be allowed in this form?