Blog de référence: https://blog.csdn.net/zcl_love_wx/article/details/51692819
Site Web associé: Site Web officiel: http://www.bootcdn.cn/angular-file-upload/readme/
API: https://github.com/nervgh/angular-file-upload/wiki/Module-API
https: / / segmentfault.com/a/1190000016113163?utm_source=tag-newest
plugin:
exemple: http://nervgh.github.io/pages/angular-file-upload/examples/simple/
Résumé personnel
Aujourd'hui, je vais partager avec vous un contrôle de téléchargement qui dépend de angular. angular-file-upload.min.js, combiné avec le projet de l'entreprise et mon cas de visualisation de documents pendant cette période, voici un résumé;
le contrôle de téléchargement de fichier utilisé dans le projet angular project doit probablement être implémenté comme suit, comme suit :
Etapes de configuration
1. Introduisez d'abord angular.js
2. Introduisez le contrôle angular-file-upload.min.js
3. Lors de la déclaration d'une instance angulaire, vous devez injecter une dépendance angularFileUpload
Par exemple: var app = angular.module ('app', ['angularFileUpload' ]);
4. Injectez le service FileUploader dépendant dans le contrôleur utilisé;
par exemple: app.controller ('appController', ['$ scope,' FileUploader ', function ... Ce qui
précède est le travail de préparation, et généralement le projet est encapsulé dans des instructions à faire, Et il y aura des cas à la fin.
Instruction ---- nv-file-drop
<!--简单的使用-->
<element nv-file-drop uploader="{FileUploader}"></element>
<!-- 有更多配置的情形 -->
<element nv-file-drop uploader="{FileUploader}" options="{Object}" filters="{String}"></element>
L'attribut uploader doit être une instance de FileUploader. L'
attribut options peut être une option FileItem ou un attribut personnalisé. L'
attribut filters peut être une chaîne de noms de filtres séparés par des virgules, par exemple: "filterName1, filterName2", dont les noms filtres Doit être définis à l'avance:
uploader.filters.push({name:'filterName1', fn:function() {/* your code here */}});
uploader.filters.push({name:'filterName2', fn:function() {/* your code here */}});
Commande ---- nv-file-select
<!-- 简单的使用 -->
<input type="file" nv-file-select uploader="{FileUploader}"/>
<!-- 有更多配置的情形 -->
<input type="file" nv-file-select uploader="{FileUploader}" options="{Object}" filters="{String}"/>
Commande ---- nv-file-over
<!-- 简单的使用 -->
<element nv-file-over uploader="{FileUploader}"></element>
<!-- 有更多配置的情形 -->
<element nv-file-over uploader="{FileUploader}" over-class="{String}"></element>
Service: Service de contrôle
FileUploader
Explication du contenu: les attributs, méthodes, callbacks, etc. impliqués
1: FileUploader
------------------------------------------------ Les attributs sont comme suit ----------------------------------------------- --- ----
------------------------------------------- --- ---------- Méthode ------------------------------------ --- -------------
---------------------------------- --- ------------- Rappel --------------------------------- --- ----------------------
Deux: FileItem
------------------------------------------------ Les attributs sont comme suit ----------------------------------------------- --- ----
------------------------------------------- --- ---------- Méthode ------------------------------------ --- -------------
---------------------------------- --- ------------- Rappel --------------------------------- --- ----------------------
Trois: Filtres -------- Deux façons d'injecter des filtres:
var uploader = new FileUploader({
filters: [{
name: 'yourName1',
// 自定义的过滤器
fn: function(item) {
return true;
}
}]
});
// 另一种方式加入自定义过滤器
uploader.filters.push({
name: 'yourName2',
fn: function(item) {
return true;
}
});
Quatre: file d'attente de
dossiers de filtres déjà définie
Exemple
page html
<!-- multiple属性支持一次性选择多个文件 -->
<input type="file" nv-file-select="" uploader="uploader" multiple="">
code js
'use strict';
angular
.module('app', ['angularFileUpload'])
.controller('AppController', ['$scope', 'FileUploader', function($scope, FileUploader) {
//选择文件并创建文件对象有
var uploader = $scope.uploader = new FileUploader({
url: 'upload.php'
});
// 过滤器
uploader.filters.push({
name: 'customFilter',
fn: function(item /*{File|FileLikeObject}*/, options) {
return this.queue.length < 10;
}
});
// 回调
uploader.onWhenAddingFileFailed = function(item /*{File|FileLikeObject}*/, filter, options) {
console.info('onWhenAddingFileFailed', item, filter, options);
};
uploader.onAfterAddingFile = function(fileItem) {
console.info('onAfterAddingFile', fileItem);
};
uploader.onAfterAddingAll = function(addedFileItems) {
console.info('onAfterAddingAll', addedFileItems);
};
uploader.onBeforeUploadItem = function(item) {
console.info('onBeforeUploadItem', item);
};
uploader.onProgressItem = function(fileItem, progress) {
console.info('onProgressItem', fileItem, progress);
};
uploader.onProgressAll = function(progress) {
console.info('onProgressAll', progress);
};
uploader.onSuccessItem = function(fileItem, response, status, headers) {
console.info('onSuccessItem', fileItem, response, status, headers);
};
uploader.onErrorItem = function(fileItem, response, status, headers) {
console.info('onErrorItem', fileItem, response, status, headers);
};
uploader.onCancelItem = function(fileItem, response, status, headers) {
console.info('onCancelItem', fileItem, response, status, headers);
};
uploader.onCompleteItem = function(fileItem, response, status, headers) {
console.info('onCompleteItem', fileItem, response, status, headers);
};
uploader.onCompleteAll = function() {
console.info('onCompleteAll');
};
console.info('uploader', uploader);
}]);
Télécharger uniquement les filtres d'image
uploader.filters.push({
name: 'imageFilter',
fn: function(item /*{File|FileLikeObject}*/, options) {
var type = '|' + item.type.slice(item.type.lastIndexOf('/') + 1) + '|';
return '|jpg|png|jpeg|bmp|gif|'.indexOf(type) !== -1;
}
});
Cas 1: Un petit dôme très simple, très peu de choses sont utilisées
Code HTML
<div ng-controller="firstController" class="container">
<!-- multiple属性支持一次性选择多个文件 -->
<input type="file" nv-file-select="" uploader="uploader" multiple="">
<span ng-repeat='item in uploader.queue'>{
{item.file.name}}</span>
</div>
code js
var app=angular.module('App',['angularFileUpload']);
app.controller('firstController',['$scope','FileUploader',function($scope,FileUploader){
//选择文件并创建文件对象有
var uploader = $scope.uploader = new FileUploader({
url: 'upload.php'
});
// 过滤器
uploader.filters.push({
name: 'customFilter',
fn: function(item /*{File|FileLikeObject}*/, options) {
return this.queue.length < 10;
}
});
// 回调
uploader.onWhenAddingFileFailed = function(item /*{File|FileLikeObject}*/, filter, options) {
console.info('onWhenAddingFileFailed', item, filter, options);
};
uploader.onAfterAddingFile = function(fileItem) {
console.info('onAfterAddingFile', fileItem);
};
uploader.onAfterAddingAll = function(addedFileItems) {
console.info('onAfterAddingAll', addedFileItems);
};
uploader.onBeforeUploadItem = function(item) {
console.info('onBeforeUploadItem', item);
};
uploader.onProgressItem = function(fileItem, progress) {
console.info('onProgressItem', fileItem, progress);
};
uploader.onProgressAll = function(progress) {
console.info('onProgressAll', progress);
};
uploader.onSuccessItem = function(fileItem, response, status, headers) {
console.info('onSuccessItem', fileItem, response, status, headers);
};
uploader.onErrorItem = function(fileItem, response, status, headers) {
console.info('onErrorItem', fileItem, response, status, headers);
};
uploader.onCancelItem = function(fileItem, response, status, headers) {
console.info('onCancelItem', fileItem, response, status, headers);
};
uploader.onCompleteItem = function(fileItem, response, status, headers) {
console.info('onCompleteItem', fileItem, response, status, headers);
};
uploader.onCompleteAll = function() {
console.info('onCompleteAll');
};
console.info('uploader', uploader);
}]);
Cas 2: Le fichier unique utilisé dans le projet est téléchargé avec plusieurs fichiers, et le format peut être restreint, et il est encapsulé dans des instructions, ce qui est plus compliqué
Page HTML avec instructions
<div ng-controller="firstController" class="container">
<!--封装的指令-->
<upload-files style="display:inline-block" special-param="taskNameObj.taskName" special-flag="1" file-type-exp="zip|xlsx|xls" ng-if="isShowBtnTab(btnTabLinkUrl.uploading)" not-delete-from-service="true" text="上传清单和交付物" url="api/services/app/Project_Deliverable/ImportDeliverablesFromExcel" success-call-back="getPlanIdAdd"></upload-files>
</div>
Le modèle de page html de l'instruction
<div>
<style>
.errorMsg {
text-align: left;
line-height: 30px;
border: 1px solid;
color: #ff0000;
width: 100%;
padding-left: 10px;
margin-top:20px;
}
/*.closeDetai {
font-size: 20px;
cursor: pointer;
}*/
</style>
<span class="btn btn-default" ng-click="openUpload()">{
{text}}</span>
<div class="modal fade uploadModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="main-tlt"><div class="cn"><i class="glyphicon glyphicon-record"></i>文件上传</div></div>
<div class="modal-body">
<div style="color:#98989a;font-size: 10px;margin-top: -20px;margin-bottom: 20px;">提示：1，文件大小不超过{
{fileSize}}M。 2，文件类型支持的后缀名有{
{fileType}}。</div>
<input type="file" multiple nv-file-select uploader="uploader" {
{uploader.isUploading?disabled:}} />
<table class="table" style="margin-top:20px">
<thead>
<tr>
<th width="40%">文件名</th>
<th ng-show="uploader.isHTML5">大小</th>
<th width="20%" ng-show="uploader.isHTML5">上传进度</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in uploader.queue">
<td><strong>{
{ item.file.name }}</strong></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 || specialFlag=='1'">
<span class="glyphicon glyphicon-upload"></span> 上传
</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> 取消
</button>
<button type="button" class="btn btn-danger btn-xs" ng-click="removeItem(item)">
<span class="glyphicon glyphicon-trash"></span> 删除
</button>
</td>
</tr>
<tr>
<td colspan="5" ng-show="uploader.queue.length==0">请选择文件...</td>
</tr>
</tbody>
</table>
<div>
<div>
上传进度 :
<div class="progress" style="">
<div class="progress-bar" role="progressbar" ng-style="{ 'width': uploader.progress + '%' }"></div>
</div>
</div>
<!-- uploader.uploadAll() -->
<button type="button" class="btn btn-success btn-s" ng-click="allTheUpload()" ng-disabled="!uploader.getNotUploadedItems().length">
<span class="glyphicon glyphicon-upload"></span> 全部上传
</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> 全部取消
</button>
<button type="button" class="btn btn-danger btn-s" ng-click="removeAll()" ng-disabled="!uploader.queue.length">
<span class="glyphicon glyphicon-trash"></span> 全部删除
</button>
</div>
<div class="errorMsg" ng-bind-html="errMsg" ng-show="errMsg!==''"></div>
<div class="loading-more" ng-show="uploader.isUploading"><div class="cn"><div class="tlt"><i></i>正在上传，请稍后...</div></div></div>
</div>
<div class="modal-footer">
<span class="btn btn-default" data-dismiss="modal">关闭</span>
</div>
</div>
</div>
</div>
</div>
code js, code directive et contrôleur
(function () {
var app = angular.module("app");
app.directive("uploadFiles", ['serverDomain', 'httpService', 'FileUploader', '$uibModal', '$cookies', function (serverDomain, httpService, FileUploader, $uibModal, $cookies) {
return {
restrict: "E",
scope: {
successCallBack: "&",
inmodal: "@?",//在modal中调用的时候设置为true
notDeleteFromService: "@?",
fileTypeExp: "@?",
specialFlag: '@?', // 特殊情况下的标识符
specialParam: '=?' // 特殊情况下的参数
},
//require: "ngModel",
controller: function ($scope, $element, $attrs) {
var uploadUrl = $attrs.url;
var type = $attrs.type;
var specialparam = $scope.specialParam;
if (!uploadUrl || uploadUrl === "") {
console.error("导入控件需要url属性，目前url缺失或不正确，不能进行导入操作");
}
$scope.openUpload = function () {
if ($scope.specialFlag == '1') {
if ($scope.specialParam == '') {
abp.message.error('请先选择任务名称!');
} else {
$element.find(".uploadModal").modal({
backdrop: 'static', keyboard: false
});
}
} else {
$element.find(".uploadModal").modal({
backdrop: 'static', keyboard: false
});
}
}
//重新打开模态框，提示信息清空
$element.find(".uploadModal").on("show.bs.modal", function () {
$scope.errMsg = "";
});
// 关闭modal框的时候
$element.find(".uploadModal").on('hidden.bs.modal', function () {
//如果inmodal为true就设置body的样式
if ($scope.inmodal) {
//当modal套modal的形式弹出的时候，子modal关闭会自动删掉body上的modal-open，导致父modal内容过多的时候不能上下滚动
if (!$("body").hasClass("modal-open")) {
$("body").addClass("modal-open");
}
}
});
var confirmMsg = $scope.notDeleteFromService === "true" ? "即将从上传队列中删除" : "如文件已上传，则会删除服务器上的源文件";
//删除单个文件
$scope.removeItem = function (item) {
abp.message.confirm(confirmMsg, "确定删除吗？", function (result) {
if (result) {
var msg = "";
if (!$scope.notDeleteFromService || $scope.notDeleteFromService !== "true") {
if (item.isUploaded) {
var url = serverDomain + "api/services/app/UploadFile/DeleteOneFile?fileId=" + item.fileId;
httpService.Delete(url, function (rst) {
if (!rst.success) {
msg = "文件：" + item.file.name + " 从服务器上删除失败";
}
});
}
var idx = -1;//要删除的索引
$scope.responseResult.forEach(function (val, index) {
if (val.id === item.id) {
idx = index;
return;
}
});
$scope.responseResult.splice(idx, 1);//回显列表中删除
}
item.remove();//上传列表中删除
if ($scope.successCallBack()) {
$scope.successCallBack()($scope.responseResult);
}
$scope.errMsg = msg != "" ? msg : "删除成功";
$scope.$apply();
}
});
};
$scope.removeAll = function () {
abp.message.confirm(confirmMsg, "确定删除吗？", function (result) {
if (result) {
var msg = "";
if (!$scope.notDeleteFromService || $scope.notDeleteFromService === "true") {
uploader.queue.forEach(function (item, index) {
if (item.isUploaded && item.id) {
var url = serverDomain + "api/services/app/UploadFile/DeleteOneFile?fileId=" + item.fileId;
httpService.Delete(url, function (rst) {
if (!rst.success) {
msg += "文件：" + item.file.name + " 从服务器上删除失败";
}
});
}
});
$scope.responseResult = [];//回显列表中删除
}
if ($scope.successCallBack()) {
$scope.successCallBack()($scope.responseResult);
}
$scope.uploader.clearQueue();
$scope.errMsg = msg != "" ? msg : "删除成功" + "<br/>";
$scope.$apply();
}
});
};
$scope.errMsg = "";
$scope.responseResult = [];
var uploader = $scope.uploader = new FileUploader({
url: serverDomain + uploadUrl,
removeAfterUpload: false,
alias: "file",//后台接口文件参数名称
formData: [{
type: type,
pid: sessionStorage.getItem("pId"),
taskName: specialparam
}],
headers: {
"Authorization": 'Bearer ' + $cookies.get("XSRF-TOKEN")
}
});
$scope.fileSize = 20;
var exp = "jpg|png|gif|bmp|jpeg|tif|pdf|zip|rar|docx|doc|xlsx|xls";//默认允许的文件格式
if ($scope.fileTypeExp) {
exp = $scope.fileTypeExp;
}
$scope.fileType = exp.split("|").join("、");
$element.find("input[type=file]").change(function (e) {
$scope.errMsg = "";
});
// a sync filter
uploader.filters.push({
name: 'syncfilter',
fn: function (file /*{file|filelikeobject}*/, options) {
var size = file.size / 1024 / 1024;
var name = file.name;
if (size > $scope.fileSize) {
$scope.errMsg += name + "文件大小已超过20M ；<br/>";
return false;
}
var reg = new RegExp("\.(" + exp + ")$", "gi");
if (!reg.test(name)) {
$scope.errMsg += name + " 文件类型不允许；<br/>";
return false
}
if ($scope.specialFlag == '1') {
var len = $scope.uploader.queue.length;
if (len == 2) {
$scope.errMsg = "选择错误，最多选择两个文件！";
return false;
} else if (len == 0) {
if (file.name.substr(-3, 3) != 'zip') {
$scope.errMsg = "选择错误，第一个文件请选择zip格式！";
return false;
}
}
}
$scope.errMsg = "";
return true;
}
});
// 项目文档管理 特殊情况下的校验(全部上传click)
$scope.allTheUpload = function () {
if ($scope.specialFlag == '1') {
var zipFlag = 0;
var xlsFlag = 0;
if ($scope.uploader.queue.length < 2) {
$scope.errMsg = "选择错误，请选择一项zip文件、xlsx或xls文件！";
} else {
angular.forEach($scope.uploader.queue, function (v, i) {
let str = v.file.name.substr(-3, 3);
if (i == 0) {
if (v.file.name.substr(-3, 3) != 'zip') {
$scope.errMsg = "选择错误，第一个文件请选择zip格式！";
return false;
}
}
if (str == 'zip') {
zipFlag += 1;
} else {
xlsFlag += 1;
}
})
if (zipFlag == 2) {
$scope.errMsg = "选择错误，请选择一项zip文件、xlsx或xls文件！";
} else if (xlsFlag == 2) {
$scope.errMsg = "选择错误，请选择一项zip文件、xlsx或xls文件！";
} else {
$scope.uploader.uploadAll();
}
}
} else {
$scope.uploader.uploadAll(); // 如果不是特殊情况，直接调接口
}
}
// CALLBACKS
uploader.onWhenAddingFileFailed = function (item /*{File|FileLikeObject}*/, filter, options) {
API.log("用户选择了一个错误文件：", item)
};
uploader.onAfterAddingFile = function (fileItem) {
console.log("onAfterAddingFile", fileItem)
};
uploader.onAfterAddingAll = function (addedFileItems) {
console.info('onAfterAddingAll', addedFileItems);
};
uploader.onBeforeUploadItem = function (item) {
API.log('onBeforeUploadItem', item);
};
//uploader.onProgressItem = function (fileItem, progress) {
// console.info('onProgressItem', fileItem, progress);
//};
//uploader.onProgressAll = function (progress) {
// console.info('onProgressAll', progress);
//};
uploader.onSuccessItem = function (fileItem, response, status, headers) {
if (response.success) {
$scope.errMsg += "文件：" + fileItem.file.name + " 上传成功" + "<br/>";
$scope.responseResult.push(response.result);
if (response.result) {
fileItem.id = response.result.id;//上传成功赋上id，以便删除时候使用
fileItem.fileId = response.result.fileId;//上传成功赋上fileId，以便删除时候使用
}
if ($scope.successCallBack()) {
$scope.successCallBack()($scope.responseResult);
}
}
else {
$scope.errMsg += "文件：" + fileItem.file.name + "上传出错"
if (response && response.error) {
$scope.errMsg += "：" + response.error.message;
}
}
console.info('onSuccessItem', fileItem, response, status, headers);
};
uploader.onErrorItem = function (fileItem, response, status, headers) {
$scope.errMsg += "文件：" + fileItem.file.name + "上传出错";
if (response && response.error) {
$scope.errMsg += "：" + response.error.message;
}
console.info('onErrorItem', fileItem, response, status, headers);
};
uploader.onCancelItem = function (fileItem, response, status, headers) {
$scope.errMsg += "文件：" + fileItem.file.name + "取消上传";
console.info('onCancelItem', fileItem, response, status, headers);
};
//uploader.onCompleteItem = function (fileItem, response, status, headers) {
// console.info('onCompleteItem', fileItem, response,status, headers);
//};
uploader.onCompleteAll = function () {
//$scope.errMsg = "上传成功";
console.info('onCompleteAll');
};
//console.info('uploader', uploader);
},
link: function (scope, element, attr, ngModelCtrl) {
scope.text = attr.text || "导入";
},
replace: true,
templateUrl: "../App/views/template/uploadFiles.html",
};
}]);
})()
Code du plug-in, si vous n'avez pas téléchargé le plug-in, vous pouvez copier le code dans
/*
angular-file-upload v2.1.3
https://github.com/nervgh/angular-file-upload
*/
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):"object"==typeof exports?exports["angular-file-upload"]=t():e["angular-file-upload"]=t()}(this,function(){return function(e){function t(r){if(n[r])return n[r].exports;var i=n[r]={exports:{},id:r,loaded:!1};return e[r].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";var r=function(e){return e&&e.__esModule?e["default"]:e},i=r(n(2)),o=r(n(3)),s=r(n(4)),a=r(n(5)),u=r(n(6)),l=r(n(7)),c=r(n(1)),f=r(n(8)),p=r(n(9)),d=r(n(10)),v=r(n(11)),h=r(n(12));angular.module(i.name,[]).value("fileUploaderOptions",o).factory("FileUploader",s).factory("FileLikeObject",a).factory("FileItem",u).factory("FileDirective",l).factory("FileSelect",c).factory("FileDrop",f).factory("FileOver",p).directive("nvFileSelect",d).directive("nvFileDrop",v).directive("nvFileOver",h).run(["FileUploader","FileLikeObject","FileItem","FileDirective","FileSelect","FileDrop","FileOver",function(e,t,n,r,i,o,s){e.FileLikeObject=t,e.FileItem=n,e.FileDirective=r,e.FileSelect=i,e.FileDrop=o,e.FileOver=s}])},function(e,t,n){"use strict";var r=function(e){return e&&e.__esModule?e["default"]:e},i=function(){function e(e,t){for(var n in t){var r=t[n];r.configurable=!0,r.value&&(r.writable=!0)}Object.defineProperties(e,t)}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),o=function l(e,t,n){var r=Object.getOwnPropertyDescriptor(e,t);if(void 0===r){var i=Object.getPrototypeOf(e);return null===i?void 0:l(i,t,n)}if("value"in r&&r.writable)return r.value;var o=r.get;return void 0===o?void 0:o.call(n)},s=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(e.__proto__=t)},a=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},u=(r(n(2)),angular.extend);e.exports=function(e){var t=function(e){function t(e){a(this,t);var n=u(e,{events:{$destroy:"destroy",change:"onChange"},prop:"select"});o(Object.getPrototypeOf(t.prototype),"constructor",this).call(this,n),this.uploader.isHTML5||this.element.removeAttr("multiple"),this.element.prop("value",null)}return s(t,e),i(t,{getOptions:{value:function(){}},getFilters:{value:function(){}},isEmptyAfterSelection:{value:function(){return!!this.element.attr("multiple")}},onChange:{value:function(){var e=this.uploader.isHTML5?this.element[0].files:this.element[0],t=this.getOptions(),n=this.getFilters();this.uploader.isHTML5||this.destroy(),this.uploader.addToQueue(e,t,n),this.isEmptyAfterSelection()&&this.element.prop("value",null)}}}),t}(e);return t},e.exports.$inject=["FileDirective"]},function(e,t){e.exports={name:"angularFileUpload"}},function(e,t){"use strict";e.exports={url:"/",alias:"file",headers:{},queue:[],progress:0,autoUpload:!1,removeAfterUpload:!1,method:"POST",filters:[],formData:[],queueLimit:Number.MAX_VALUE,withCredentials:!1}},function(e,t,n){"use strict";var r=function(e){return e&&e.__esModule?e["default"]:e},i=function(){function e(e,t){for(var n in t){var r=t[n];r.configurable=!0,r.value&&(r.writable=!0)}Object.defineProperties(e,t)}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),o=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},s=(r(n(2)),angular.copy),a=angular.extend,u=angular.forEach,l=angular.isObject,c=angular.isNumber,f=angular.isDefined,p=angular.isArray,d=angular.element;e.exports=function(e,t,n,r,v,h){var m=r.File,g=r.FormData,_=function(){function r(t){o(this,r);var n=s(e);a(this,n,t,{isUploading:!1,_nextIndex:0,_failFilterIndex:-1,_directives:{select:[],drop:[],over:[]}}),this.filters.unshift({name:"queueLimit",fn:this._queueLimitFilter}),this.filters.unshift({name:"folder",fn:this._folderFilter})}return i(r,{addToQueue:{value:function(e,t,n){var r=this,i=this.isArrayLikeObject(e)?e:[e],o=this._getFilters(n),s=this.queue.length,a=[];u(i,function(e){var n=new v(e);if(r._isValidFile(n,o,t)){var i=new h(r,e,t);a.push(i),r.queue.push(i),r._onAfterAddingFile(i)}else{var s=o[r._failFilterIndex];r._onWhenAddingFileFailed(n,s,t)}}),this.queue.length!==s&&(this._onAfterAddingAll(a),this.progress=this._getTotalProgress()),this._render(),this.autoUpload&&this.uploadAll()}},removeFromQueue:{value:function(e){var t=this.getIndexOfItem(e),n=this.queue[t];n.isUploading&&n.cancel(),this.queue.splice(t,1),n._destroy(),this.progress=this._getTotalProgress()}},clearQueue:{value:function(){for(;this.queue.length;)this.queue[0].remove();this.progress=0}},uploadItem:{value:function(e){var t=this.getIndexOfItem(e),n=this.queue[t],r=this.isHTML5?"_xhrTransport":"_iframeTransport";n._prepareToUploading(),this.isUploading||(this.isUploading=!0,this[r](n))}},cancelItem:{value:function(e){var t=this.getIndexOfItem(e),n=this.queue[t],r=this.isHTML5?"_xhr":"_form";n&&n.isUploading&&n[r].abort()}},uploadAll:{value:function(){var e=this.getNotUploadedItems().filter(function(e){return!e.isUploading});e.length&&(u(e,function(e){return e._prepareToUploading()}),e[0].upload())}},cancelAll:{value:function(){var e=this.getNotUploadedItems();u(e,function(e){return e.cancel()})}},isFile:{value:function(e){return this.constructor.isFile(e)}},isFileLikeObject:{value:function(e){return this.constructor.isFileLikeObject(e)}},isArrayLikeObject:{value:function(e){return this.constructor.isArrayLikeObject(e)}},getIndexOfItem:{value:function(e){return c(e)?e:this.queue.indexOf(e)}},getNotUploadedItems:{value:function(){return this.queue.filter(function(e){return!e.isUploaded})}},getReadyItems:{value:function(){return this.queue.filter(function(e){return e.isReady&&!e.isUploading}).sort(function(e,t){return e.index-t.index})}},destroy:{value:function(){var e=this;u(this._directives,function(t){u(e._directives[t],function(e){e.destroy()})})}},onAfterAddingAll:{value:function(e){}},onAfterAddingFile:{value:function(e){}},onWhenAddingFileFailed:{value:function(e,t,n){}},onBeforeUploadItem:{value:function(e){}},onProgressItem:{value:function(e,t){}},onProgressAll:{value:function(e){}},onSuccessItem:{value:function(e,t,n,r){}},onErrorItem:{value:function(e,t,n,r){}},onCancelItem:{value:function(e,t,n,r){}},onCompleteItem:{value:function(e,t,n,r){}},onCompleteAll:{value:function(){}},_getTotalProgress:{value:function(e){if(this.removeAfterUpload)return e||0;var t=this.getNotUploadedItems().length,n=t?this.queue.length-t:this.queue.length,r=100/this.queue.length,i=(e||0)*r/100;return Math.round(n*r+i)}},_getFilters:{value:function(e){if(!e)return this.filters;if(p(e))return e;var t=e.match(/[^\s,]+/g);return this.filters.filter(function(e){return-1!==t.indexOf(e.name)})}},_render:{value:function(){t.$$phase||t.$apply()}},_folderFilter:{value:function(e){return!(!e.size&&!e.type)}},_queueLimitFilter:{value:function(){return this.queue.length<this.queueLimit}},_isValidFile:{value:function(e,t,n){var r=this;return this._failFilterIndex=-1,t.length?t.every(function(t){return r._failFilterIndex++,t.fn.call(r,e,n)}):!0}},_isSuccessCode:{value:function(e){return e>=200&&300>e||304===e}},_transformResponse:{value:function(e,t){var r=this._headersGetter(t);return u(n.defaults.transformResponse,function(t){e=t(e,r)}),e}},_parseHeaders:{value:function(e){var t,n,r,i={};return e?(u(e.split("\n"),function(e){r=e.indexOf(":"),t=e.slice(0,r).trim().toLowerCase(),n=e.slice(r+1).trim(),t&&(i[t]=i[t]?i[t]+", "+n:n)}),i):i}},_headersGetter:{value:function(e){return function(t){return t?e[t.toLowerCase()]||null:e}}},_xhrTransport:{value:function(e){var t=this,n=e._xhr=new XMLHttpRequest,r=new g;if(this._onBeforeUploadItem(e),u(e.formData,function(e){u(e,function(e,t){r.append(t,e)})}),"number"!=typeof e._file.size)throw new TypeError("The file specified is no longer valid");r.append(e.alias,e._file,e.file.name),n.upload.onprogress=function(n){var r=Math.round(n.lengthComputable?100*n.loaded/n.total:0);t._onProgressItem(e,r)},n.onload=function(){var r=t._parseHeaders(n.getAllResponseHeaders()),i=t._transformResponse(n.response,r),o=t._isSuccessCode(n.status)?"Success":"Error",s="_on"+o+"Item";t[s](e,i,n.status,r),t._onCompleteItem(e,i,n.status,r)},n.onerror=function(){var r=t._parseHeaders(n.getAllResponseHeaders()),i=t._transformResponse(n.response,r);t._onErrorItem(e,i,n.status,r),t._onCompleteItem(e,i,n.status,r)},n.onabort=function(){var r=t._parseHeaders(n.getAllResponseHeaders()),i=t._transformResponse(n.response,r);t._onCancelItem(e,i,n.status,r),t._onCompleteItem(e,i,n.status,r)},n.open(e.method,e.url,!0),n.withCredentials=e.withCredentials,u(e.headers,function(e,t){n.setRequestHeader(t,e)}),n.send(r),this._render()}},_iframeTransport:{value:function(e){var t=this,n=d('<form style="display: none;" />'),r=d('<iframe name="iframeTransport'+Date.now()+'">'),i=e._input;e._form&&e._form.replaceWith(i),e._form=n,this._onBeforeUploadItem(e),i.prop("name",e.alias),u(e.formData,function(e){u(e,function(e,t){var r=d('<input type="hidden" name="'+t+'" />');r.val(e),n.append(r)})}),n.prop({action:e.url,method:"POST",target:r.prop("name"),enctype:"multipart/form-data",encoding:"multipart/form-data"}),r.bind("load",function(){var n="",i=200;try{n=r[0].contentDocument.body.innerHTML}catch(o){i=500}var s={response:n,status:i,dummy:!0},a={},u=t._transformResponse(s.response,a);t._onSuccessItem(e,u,s.status,a),t._onCompleteItem(e,u,s.status,a)}),n.abort=function(){var o,s={status:0,dummy:!0},a={};r.unbind("load").prop("src","javascript:false;"),n.replaceWith(i),t._onCancelItem(e,o,s.status,a),t._onCompleteItem(e,o,s.status,a)},i.after(n),n.append(i).append(r),n[0].submit(),this._render()}},_onWhenAddingFileFailed:{value:function(e,t,n){this.onWhenAddingFileFailed(e,t,n)}},_onAfterAddingFile:{value:function(e){this.onAfterAddingFile(e)}},_onAfterAddingAll:{value:function(e){this.onAfterAddingAll(e)}},_onBeforeUploadItem:{value:function(e){e._onBeforeUpload(),this.onBeforeUploadItem(e)}},_onProgressItem:{value:function(e,t){var n=this._getTotalProgress(t);this.progress=n,e._onProgress(t),this.onProgressItem(e,t),this.onProgressAll(n),this._render()}},_onSuccessItem:{value:function(e,t,n,r){e._onSuccess(t,n,r),this.onSuccessItem(e,t,n,r)}},_onErrorItem:{value:function(e,t,n,r){e._onError(t,n,r),this.onErrorItem(e,t,n,r)}},_onCancelItem:{value:function(e,t,n,r){e._onCancel(t,n,r),this.onCancelItem(e,t,n,r)}},_onCompleteItem:{value:function(e,t,n,r){e._onComplete(t,n,r),this.onCompleteItem(e,t,n,r);var i=this.getReadyItems()[0];return this.isUploading=!1,f(i)?void i.upload():(this.onCompleteAll(),this.progress=this._getTotalProgress(),void this._render())}}},{isFile:{value:function(e){return m&&e instanceof m}},isFileLikeObject:{value:function(e){return e instanceof v}},isArrayLikeObject:{value:function(e){return l(e)&&"length"in e}},inherit:{value:function(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.super_=t}}}),r}();return _.prototype.isHTML5=!(!m||!g),_.isHTML5=_.prototype.isHTML5,_},e.exports.$inject=["fileUploaderOptions","$rootScope","$http","$window","FileLikeObject","FileItem"]},function(e,t,n){"use strict";var r=function(e){return e&&e.__esModule?e["default"]:e},i=function(){function e(e,t){for(var n in t){var r=t[n];r.configurable=!0,r.value&&(r.writable=!0)}Object.defineProperties(e,t)}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),o=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},s=(r(n(2)),angular.copy),a=angular.isElement,u=angular.isString;e.exports=function(){var e=function(){function e(t){o(this,e);var n=a(t),r=n?t.value:t,i=u(r)?"FakePath":"Object",s="_createFrom"+i;this[s](r)}return i(e,{_createFromFakePath:{value:function(e){this.lastModifiedDate=null,this.size=null,this.type="like/"+e.slice(e.lastIndexOf(".")+1).toLowerCase(),this.name=e.slice(e.lastIndexOf("/")+e.lastIndexOf("\\")+2)}},_createFromObject:{value:function(e){this.lastModifiedDate=s(e.lastModifiedDate),this.size=e.size,this.type=e.type,this.name=e.name}}}),e}();return e},e.exports.$inject=[]},function(e,t,n){"use strict";var r=function(e){return e&&e.__esModule?e["default"]:e},i=function(){function e(e,t){for(var n in t){var r=t[n];r.configurable=!0,r.value&&(r.writable=!0)}Object.defineProperties(e,t)}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),o=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},s=(r(n(2)),angular.copy),a=angular.extend,u=angular.element,l=angular.isElement;e.exports=function(e,t){var n=function(){function n(e,r,i){o(this,n);var c=l(r),f=c?u(r):null,p=c?null:r;a(this,{url:e.url,alias:e.alias,headers:s(e.headers),formData:s(e.formData),removeAfterUpload:e.removeAfterUpload,withCredentials:e.withCredentials,method:e.method},i,{uploader:e,file:new t(r),isReady:!1,isUploading:!1,isUploaded:!1,isSuccess:!1,isCancel:!1,isError:!1,progress:0,index:null,_file:p,_input:f}),f&&this._replaceNode(f)}return i(n,{upload:{value:function(){try{this.uploader.uploadItem(this)}catch(e){this.uploader._onCompleteItem(this,"",0,[]),this.uploader._onErrorItem(this,"",0,[])}}},cancel:{value:function(){this.uploader.cancelItem(this)}},remove:{value:function(){this.uploader.removeFromQueue(this)}},onBeforeUpload:{value:function(){}},onProgress:{value:function(e){}},onSuccess:{value:function(e,t,n){}},onError:{value:function(e,t,n){}},onCancel:{value:function(e,t,n){}},onComplete:{value:function(e,t,n){}},_onBeforeUpload:{value:function(){this.isReady=!0,this.isUploading=!0,this.isUploaded=!1,this.isSuccess=!1,this.isCancel=!1,this.isError=!1,this.progress=0,this.onBeforeUpload()}},_onProgress:{value:function(e){this.progress=e,this.onProgress(e)}},_onSuccess:{value:function(e,t,n){this.isReady=!1,this.isUploading=!1,this.isUploaded=!0,this.isSuccess=!0,this.isCancel=!1,this.isError=!1,this.progress=100,this.index=null,this.onSuccess(e,t,n)}},_onError:{value:function(e,t,n){this.isReady=!1,this.isUploading=!1,this.isUploaded=!0,this.isSuccess=!1,this.isCancel=!1,this.isError=!0,this.progress=0,this.index=null,this.onError(e,t,n)}},_onCancel:{value:function(e,t,n){this.isReady=!1,this.isUploading=!1,this.isUploaded=!1,this.isSuccess=!1,this.isCancel=!0,this.isError=!1,this.progress=0,this.index=null,this.onCancel(e,t,n)}},_onComplete:{value:function(e,t,n){this.onComplete(e,t,n),this.removeAfterUpload&&this.remove()}},_destroy:{value:function(){this._input&&this._input.remove(),this._form&&this._form.remove(),delete this._form,delete this._input}},_prepareToUploading:{value:function(){this.index=this.index||++this.uploader._nextIndex,this.isReady=!0}},_replaceNode:{value:function(t){var n=e(t.clone())(t.scope());n.prop("value",null),t.css("display","none"),t.after(n)}}}),n}();return n},e.exports.$inject=["$compile","FileLikeObject"]},function(e,t,n){"use strict";var r=function(e){return e&&e.__esModule?e["default"]:e},i=function(){function e(e,t){for(var n in t){var r=t[n];r.configurable=!0,r.value&&(r.writable=!0)}Object.defineProperties(e,t)}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),o=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},s=(r(n(2)),angular.extend);e.exports=function(){var e=function(){function e(t){o(this,e),s(this,t),this.uploader._directives[this.prop].push(this),this._saveLinks(),this.bind()}return i(e,{bind:{value:function(){for(var e in this.events){var t=this.events[e];this.element.bind(e,this[t])}}},unbind:{value:function(){for(var e in this.events)this.element.unbind(e,this.events[e])}},destroy:{value:function(){var e=this.uploader._directives[this.prop].indexOf(this);this.uploader._directives[this.prop].splice(e,1),this.unbind()}},_saveLinks:{value:function(){for(var e in this.events){var t=this.events[e];this[t]=this[t].bind(this)}}}}),e}();return e.prototype.events={},e},e.exports.$inject=[]},function(e,t,n){"use strict";var r=function(e){return e&&e.__esModule?e["default"]:e},i=function(){function e(e,t){for(var n in t){var r=t[n];r.configurable=!0,r.value&&(r.writable=!0)}Object.defineProperties(e,t)}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),o=function c(e,t,n){var r=Object.getOwnPropertyDescriptor(e,t);if(void 0===r){var i=Object.getPrototypeOf(e);return null===i?void 0:c(i,t,n)}if("value"in r&&r.writable)return r.value;var o=r.get;return void 0===o?void 0:o.call(n)},s=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(e.__proto__=t)},a=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},u=(r(n(2)),angular.extend),l=angular.forEach;e.exports=function(e){var t=function(e){function t(e){a(this,t);var n=u(e,{events:{$destroy:"destroy",drop:"onDrop",dragover:"onDragOver",dragleave:"onDragLeave"},prop:"drop"});o(Object.getPrototypeOf(t.prototype),"constructor",this).call(this,n)}return s(t,e),i(t,{getOptions:{value:function(){}},getFilters:{value:function(){}},onDrop:{value:function(e){var t=this._getTransfer(e);if(t){var n=this.getOptions(),r=this.getFilters();this._preventAndStop(e),l(this.uploader._directives.over,this._removeOverClass,this),this.uploader.addToQueue(t.files,n,r)}}},onDragOver:{value:function(e){var t=this._getTransfer(e);this._haveFiles(t.types)&&(t.dropEffect="copy",this._preventAndStop(e),l(this.uploader._directives.over,this._addOverClass,this))}},onDragLeave:{value:function(e){e.currentTarget!==this.element[0]&&(this._preventAndStop(e),l(this.uploader._directives.over,this._removeOverClass,this))}},_getTransfer:{value:function(e){return e.dataTransfer?e.dataTransfer:e.originalEvent.dataTransfer}},_preventAndStop:{value:function(e){e.preventDefault(),e.stopPropagation()}},_haveFiles:{value:function(e){return e?e.indexOf?-1!==e.indexOf("Files"):e.contains?e.contains("Files"):!1:!1}},_addOverClass:{value:function(e){e.addOverClass()}},_removeOverClass:{value:function(e){e.removeOverClass()}}}),t}(e);return t},e.exports.$inject=["FileDirective"]},function(e,t,n){"use strict";var r=function(e){return e&&e.__esModule?e["default"]:e},i=function(){function e(e,t){for(var n in t){var r=t[n];r.configurable=!0,r.value&&(r.writable=!0)}Object.defineProperties(e,t)}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),o=function l(e,t,n){var r=Object.getOwnPropertyDescriptor(e,t);if(void 0===r){var i=Object.getPrototypeOf(e);return null===i?void 0:l(i,t,n)}if("value"in r&&r.writable)return r.value;var o=r.get;return void 0===o?void 0:o.call(n)},s=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(e.__proto__=t)},a=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},u=(r(n(2)),angular.extend);e.exports=function(e){var t=function(e){function t(e){a(this,t);var n=u(e,{events:{$destroy:"destroy"},prop:"over",overClass:"nv-file-over"});o(Object.getPrototypeOf(t.prototype),"constructor",this).call(this,n)}return s(t,e),i(t,{addOverClass:{value:function(){this.element.addClass(this.getOverClass())}},removeOverClass:{value:function(){this.element.removeClass(this.getOverClass())}},getOverClass:{value:function(){return this.overClass}}}),t}(e);return t},e.exports.$inject=["FileDirective"]},function(e,t,n){"use strict";var r=function(e){return e&&e.__esModule?e["default"]:e};r(n(2));e.exports=function(e,t,n){return{link:function(r,i,o){var s=r.$eval(o.uploader);if(!(s instanceof t))throw new TypeError('"Uploader" must be an instance of FileUploader');var a=new n({uploader:s,element:i});a.getOptions=e(o.options).bind(a,r),a.getFilters=function(){return o.filters}}}},e.exports.$inject=["$parse","FileUploader","FileSelect"]},function(e,t,n){"use strict";var r=function(e){return e&&e.__esModule?e["default"]:e};r(n(2));e.exports=function(e,t,n){return{link:function(r,i,o){var s=r.$eval(o.uploader);if(!(s instanceof t))throw new TypeError('"Uploader" must be an instance of FileUploader');if(s.isHTML5){var a=new n({uploader:s,element:i});a.getOptions=e(o.options).bind(a,r),a.getFilters=function(){return o.filters}}}}},e.exports.$inject=["$parse","FileUploader","FileDrop"]},function(e,t,n){"use strict";var r=function(e){return e&&e.__esModule?e["default"]:e};r(n(2));e.exports=function(e,t){return{link:function(n,r,i){var o=n.$eval(i.uploader);if(!(o instanceof e))throw new TypeError('"Uploader" must be an instance of FileUploader');var s=new t({uploader:o,element:r});s.getOverClass=function(){return i.overClass||s.overClass}}}},e.exports.$inject=["FileUploader","FileOver"]}])});
//# sourceMappingURL=angular-file-upload.min.js.map