vue-file-selector/dist/index.js

File selector component that supports drag-n-drop for VueJs 3

/**
 * vue-file-selector v2.0.1 by Duong Dieu Phap
 * Homepage: https://github.com/d2phap/vue-file-selector
 */

Object.defineProperty(exports,'__esModule',{value:!0});var e=require('vue'),t=e.defineComponent({name:'FileSelector',props:{multiple:{type:Boolean,default:!1},isLoading:{type:Boolean,default:!1},acceptExtensions:{type:String,default:''},maxFileSize:{type:Number,default:NaN},height:{type:Number,default:NaN},validateFn:{type:Function,default:()=>!0}},setup:()=>({isDragEnter:e.ref(!1)}),methods:{handleFilesChange(e){const t=e.target;t.files&&0!==t.files?.length&&this.preprocessFiles(Array.from(t.files))},handleDrop(e){this.isDragEnter=!1,this.preprocessFiles(Array.from(e.dataTransfer?.files||[]))},preprocessFiles(e){const t=this.validate(e);this.$emit('validated',t,e),!0===t&&this.$emit('changed',e);const i=this.$refs.fileRef;i&&(i.value='')},validate(e){return!this.multiple&&e.length>1?'MULTIFILES_ERROR':this.checkFileExtensions(e)?this.checkFileSize(e)?this.validateFn(e):'FILE_SIZE_ERROR':'EXTENSION_ERROR'},checkFileExtensions(e){const t=[...new Set(this.acceptExtensions.toLowerCase().split(',').filter(Boolean))];return-1===e.findIndex((e=>{const i=`.${e.name.toLowerCase().split('.').pop()}`;return!t.includes(i)}))},checkFileSize(e){if(Number.isNaN(this.maxFileSize))return!0;return-1===e.findIndex((e=>e.size>this.maxFileSize))}}});const i={class:'fs-loader'},l=e.createTextVNode(' Loading... '),s=['multiple','accept'],r=e.createTextVNode('Select');t.render=function(t,n,o,a,c,d){return e.openBlock(),e.createElementBlock('div',{class:e.normalizeClass(['fs-file-selector',{'fs-drag-enter':t.isDragEnter}])},[e.withDirectives(e.createElementVNode('div',i,[e.renderSlot(t.$slots,'loader',{},(()=>[l]))],512),[[e.vShow,t.isLoading]]),e.createElementVNode('div',{class:'fs-droppable',ref:'fsDroppable',style:e.normalizeStyle({height:t.height+'px'}),onDragenter:n[2]||(n[2]=e.withModifiers((e=>t.isDragEnter=!0),['stop','prevent'])),onDragover:n[3]||(n[3]=e.withModifiers((()=>{}),['stop','prevent'])),onDragleave:n[4]||(n[4]=e.withModifiers((e=>t.isDragEnter=!1),['stop','prevent'])),onDrop:n[5]||(n[5]=e.withModifiers(((...e)=>t.handleDrop&&t.handleDrop(...e)),['stop','prevent']))},[e.createElementVNode('input',{ref:'fileRef',type:'file',tabindex:'-1',multiple:t.multiple,accept:t.acceptExtensions,onChange:n[0]||(n[0]=(...e)=>t.handleFilesChange&&t.handleFilesChange(...e))},null,40,s),e.renderSlot(t.$slots,'top'),e.createElementVNode('div',{href:'#',class:'fs-btn-select',onClick:n[1]||(n[1]=e=>t.$refs.fileRef.click())},[e.renderSlot(t.$slots,'default',{},(()=>[r]))]),e.renderSlot(t.$slots,'bottom')],36)],2)},t.__file='src/FileSelector.vue';const n={install(e){e.component('FileSelector',t)}};exports.default=n;
//# sourceMappingURL=index.js.map