@websanova/vue-upload
Version:
A simple, light weight and intuitive upload control for Vue.js.
7 lines (6 loc) • 10.9 kB
JavaScript
/*!
* @websanova/vue-upload v2.4.1
* https://websanova.com/docs/vue-upload
* Released under the MIT License.
*/
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.VueUpload=t()}(this,function(){var i=null,n={url:null,preFetchUrl:!1,name:"file",accept:null,body:{},httpOptions:{},dropzoneId:null,onDismiss:null,onSelect:null,onStart:null,onQueue:null,onProgress:null,onPrefetchUrl:null,onUpload:null,onError:null,onSuccess:null,onComplete:null,onEnd:null,onValidate:null,startOnSelect:!0,extensions:["jpeg","jpg","png","gif"],multiple:!1,sendAsMultipart:!0,maxFilesSelect:4,maxFilesInProgress:2,maxSizePerFile:2097152,maxFilesSelectMsg:"Max of {max} files can be selected at a time.",maxFileSizeMsg:"Max of {max} mb per file.",invalidExtensionMsg:"File must be one of {extensions}.",parseErrors:function(e){if(e&&e.data){if(e.data.errors)return e.data.errors[0]||{};if(e.data.msg)return{code:e.data.code,msg:e.data.msg}}return{}},http:function(e){if(i.drivers.http)return i.drivers.http.call.call(i,e);console.error("VueUpload: http driver has not been set.")}};function s(e){e.preventDefault(),e.stopPropagation()}function o(){return Math.random().toString(32).substring(2)}function l(e){i.state.instances[e]||(i.Vue.set(i.$vm.state.instances,e,{files:{all:[],queue:[],progress:[],upload:[],success:[],error:[]},errors:[],meta:{state:"ready",percentComplete:0},dropzone:{active:!1}}),i.state.instances[e]={key:e,$vm:i.$vm.state.instances[e]})}function r(e,t){e=i.state.instances[e];e.options=Object.assign({},i.$options,t),e.input=function(){var e,t=this;return(e=document.createElement("input")).type="file",e.multiple=!0===this.options.multiple,e.accept=this.options.accept||"*/*",e.style.display="none",e.onchange=function(){h.call(t,e.files)},document.body.appendChild(e),{$el:e}}.call(e),e.dropzone=p.call(e),a.call(e)}function a(){this.onDismiss=this.options.onDismiss||function(){},this.onSelect=this.options.onSelect||function(){},this.onStart=this.options.onStart||function(){},this.onQueue=this.options.onQueue||function(){},this.onProgress=this.options.onProgress||function(){},this.onPrefetchUrl=this.options.onPrefetchUrl||function(){},this.onUpload=this.options.onUpload||function(){},this.onError=this.options.onError||function(){},this.onSuccess=this.options.onSuccess||function(){},this.onComplete=this.options.onComplete||function(){},this.onEnd=this.options.onEnd||function(){},this.onValidate=this.options.onValidate||function(){}}function c(e,t){this.options[e]=t,"dropzone"===e&&(u.call(this),this.dropzone=p.call(this))}function p(){var t=this,e={$el:document.getElementById(this.options.dropzoneId),counter:0,dragenter:null,drageover:null,dragleave:null,drop:null};return e.$el&&(e.dragenter=function(e){s(e),t.dropzone.counter++,t.$vm.dropzone.active=!0},e.dragover=function(e){s(e),e.dataTransfer.dropEffect="copy",t.$vm.dropzone.active=!0},e.dragleave=function(e){s(e),t.dropzone.counter--,t.dropzone.counter<=0&&(t.dropzone.counter=0,t.$vm.dropzone.active=!1)},e.drop=function(e){s(e),t.dropzone.counter=0,t.$vm.dropzone.active=!1,h.call(t,e.dataTransfer.files)},e.$el.addEventListener("dragenter",e.dragenter,!1),e.$el.addEventListener("dragover",e.dragover,!1),e.$el.addEventListener("dragleave",e.dragleave,!1),e.$el.addEventListener("drop",e.drop,!1)),e}function u(){this.dropzone.$el&&(this.dropzone.$el.removeEventListener("dragenter",this.dropzone.dragenter,!1),this.dropzone.$el.removeEventListener("dragover",this.dropzone.dragover,!1),this.dropzone.$el.removeEventListener("dragleave",this.dropzone.dragleave,!1),this.dropzone.$el.removeEventListener("drop",this.dropzone.drop,!1),this.dropzone.dragenter=null,this.dropzone.dragover=null,this.dropzone.dragleave=null,this.dropzone.drop=null,this.dropzone.$el=null)}function d(e){(e={file:(e=e||{}).file||null,code:e.code||null,msg:e.msg||null}).$id=o(),e.file=e.file||null,e.clear=function(e){var t,n;if(e)for(t=0,n=this.$vm.errors.length;t<n;t++)if(this.$vm.errors[t].$id===e.$id){this.$vm.errors.splice(t,1);break}}.bind(this,e),e.file&&(e.file.errors.push(e),e.file.error=e),this.$vm.errors.push(e)}function f(e){var t,n,s;if(e){for(e.$request&&e.$request.abort(),t=0,n=this.$vm.errors.length;t<n;t++)if(this.$vm.errors[t].file&&this.$vm.errors[t].file.$id===e.$id){this.$vm.errors.splice(t,1);break}s=v.call(this,e),this.$vm.files[e.state].splice(s,1),s=v.call(this,e,"all"),this.$vm.files.all.splice(s,1)}}function h(e){var t,n,s,i=this;if(e.length>this.options.maxFilesSelect)this.onSelect(e,{code:"file-max-select",msg:this.options.maxFilesSelectMsg.replace("{max}",this.options.maxFilesSelect)});else{for(t=0,n=e.length;t<n;t++)s=t,m.call(i,e[s]);this.onSelect(e),this.options.startOnSelect&&z.call(this)}}function m(i){var e=this,t=(i.name||"").split("."),n=(i.type||"").split("/"),t=1<t.length?t[t.length-1]:null;t=((t=t||n[1]||null)||"").toLowerCase(),n=n[0]||null,i={$id:o(),$file:i,$request:null,$raw:null,$instance:this,name:i.name,size:i.size,type:n,extension:t,state:"queue",active:!0,sending:!1,errors:[],error:{},percentComplete:0,preview:function(e){var t,n,s;t=i,n=e,(s=new FileReader).addEventListener("load",function(){t.$raw=s.result,n&&n(t)},!1),t.$file&&s.readAsDataURL(t.$file)},clear:function(){f.call(e,i),"uploading"===e.$vm.meta.state&&z.call(e)}},this.$vm.files.all.push(i),this.$vm.files.queue.push(i),g.call(this,i),this.onQueue(i)}function v(e,t){for(var n=this.$vm.files[t||e.state],s=0,i=n.length;s<i;s++)if(e.$id===n[s].$id)return s;return-1}function $(e,t){var n=v.call(this,e);this.$vm.files[e.state].splice(n,1),this.$vm.files[t].push(e),e.state=t}function g(e){var t,n;return this.options.extensions&&this.options.extensions.indexOf(e.extension)<0?t={file:e,code:"file-extension",msg:this.options.invalidExtensionMsg.replace("{extensions}",this.options.extensions.join(", "))}:0<this.options.maxSizePerFile&&e.size>this.options.maxSizePerFile?t={file:e,code:"file-max-size",msg:this.options.maxFileSizeMsg.replace("{max}",Math.floor(this.options.maxSizePerFile/1024/1024))}:this.options.onValidate&&(n=this.options.onValidate(e))&&(t={file:e,code:"file-validate",msg:n}),!t||(d.call(this,t),!1)}function z(){var e,t,n;if(!(this.$vm.files.progress.length>=this.options.maxFilesInProgress))if(this.$vm.files.queue.length)!this.$vm.files.queue.length||"ready"!==this.$vm.meta.state&&"complete"!==this.$vm.meta.state||this.onStart(),n=this.$vm.files.queue[0],g.call(this,n)?(this.$vm.meta.state="uploading",function(s){var n,i,o=this;s.sending=!0,$.call(this,s,"progress"),new Promise(function(n,e){s.$instance.options.preFetchUrl?(i=o.options.http(Object.assign({method:"get",url:s.$instance.options.url,error:e,body:{name:s.name,type:s.type,extension:s.extension},success:function(e){var t={};s.$instance.options.onPrefetchUrl&&(t=s.$instance.options.onPrefetchUrl(e)||{}),n(t)}},s.$instance.options.httpOptions)),s.$request=i):n({})}).then(function(e){var t;if(!0===o.options.sendAsMultipart)for(n in(t=new FormData).append(o.options.name,s.$file),s.$instance.options.body)t.append(n,s.$instance.options.body[n]);else t=s.$file;i=o.options.http(Object.assign({url:s.$instance.options.url,body:t,progress:function(e){s.percentComplete=e.loaded&&e.total?Math.ceil(e.loaded/e.total*100):0,o.onProgress(s,e),100<=s.percentComplete&&($.call(o,s,"upload"),o.onUpload(s,e)),function(){var e,t,n,s;for(e=s=0,t=this.$vm.files.all.length;e<t;e++)this.$vm.files.all[e].active&&s++;for(n=100*(s-this.$vm.files.queue.length-this.$vm.files.progress.length),e=0,t=this.$vm.files.progress.length;e<t;e++)n+=this.$vm.files.progress[e].percentComplete;this.$vm.meta.percentComplete=Math.ceil(n/(100*s)*100)}.call(o)},success:function(e){s.sending=!1,$.call(o,s,"success"),o.onSuccess(s,e),o.onComplete(s,e),z.call(o)},error:function(e){var t;s.sending=!1,(t=o.options.parseErrors(e)).file=s,d.call(o,t),$.call(o,s,"error"),o.onError(s,e),o.onComplete(s,e),z.call(o)}},s.$instance.options.httpOptions,e)),s.$request=i})}.call(this,n)):($.call(this,n,"error"),this.onError(n)),z.call(this);else if(!this.$vm.files.upload.length&&!this.$vm.files.progress.length&&"uploading"===this.$vm.meta.state){for(this.$vm.meta.state="complete",e=0,t=this.$vm.files.all.length;e<t;e++)this.$vm.files.all[e].active=!1;this.onEnd()}}function y(e,t){(i=this).plugins=(t=t||{}).plugins,this.drivers=t.drivers,this.$options=Object.assign({},n,t),delete t.plugins,delete t.drivers,delete t.options,this.$vm=new e({data:function(){return{state:{instances:{}}}}}),this.state.instances={}}function e(e,t){e.upload=new y(e,t),(e.upload.Vue=e).upload.ctx=e,Object.defineProperties(e.prototype,{$upload:{get:function(){return e.upload}}})}return y.prototype.on=function(e,t){l(e),r(e,t)},y.prototype.off=function(e){var t;e=e,t=i.state.instances[e],function(){this.input&&this.input.$el&&(this.input.$el.parentNode.removeChild(this.input.$el),this.input.$el=null)}.call(t),u.call(t),delete t.$vm,delete i.state.instances[e]},y.prototype.reset=function(e){l(e),function(){for(var e,t=this,n=0,s=this.$vm.files.all.length;n<s;n++)e=n,f.call(t,t.$vm.files.all[e]);this.$vm.files={all:[],queue:[],progress:[],upload:[],success:[],error:[]},this.$vm.errors=[],this.$vm.meta.state="ready",this.$vm.meta.percentComplete=0,this.$vm.dropzone.active=!1}.call(i.state.instances[e])},y.prototype.select=function(e){!function(){var e=this;function t(){setTimeout(function(){e.onDismiss&&!e.input.$el.files.length&&e.onDismiss(),e.input.$el.files.length&&(e.input.$el.value=null)},500),e.input.$el.removeEventListener("cancel",t),window.removeEventListener("focus",t)}e.input.$el.addEventListener("cancel",t),window.addEventListener("focus",t)}.call(i.state.instances[e]),i.state.instances[e].input.$el.click()},y.prototype.start=function(e){l(e),z.call(i.state.instances[e])},y.prototype.files=function(e){return l(e),i.state.instances[e].$vm.files},y.prototype.file=function(e){return l(e),(e=i.state.instances[e].$vm).files.all[e.files.all.length-1]||{error:{}}},y.prototype.exists=function(e){return!!i.state.instances[e]},y.prototype.meta=function(e){return l(e),i.state.instances[e].$vm.meta},y.prototype.percent=function(e){return l(e),i.state.instances[e].$vm.meta.percentComplete},y.prototype.state=function(e){return l(e),i.state.instances[e].$vm.meta.state},y.prototype.dropzone=function(e){return l(e),i.state.instances[e].$vm.dropzone},y.prototype.dropzoneDestroy=function(e){return l(e),u.call(i.state.instances[e])},y.prototype.option=function(e,t,n){return l(e),void 0!==n&&c.call(i.state.instances[e],t,n),a.call(i.state.instances[e]),i.state.instances[e].options[t]},y.prototype.options=function(e,t){l(e);for(var[n,s]of Object.entries(t))c.call(i.state.instances[e],n,s);a.call(i.state.instances[e])},y.prototype.errors=function(e){return l(e),i.state.instances[e].$vm.errors},"undefined"!=typeof window&&window.Vue&&window.Vue.use(e),e});