vue-uploader/dist/vue-uploader.umd.js

Simple Vue File Uploader

(function(e,r){typeof exports=="object"&&typeof module<"u"?module.exports=r(require("vue")):typeof define=="function"&&define.amd?define(["vue"],r):(e=typeof globalThis<"u"?globalThis:e||self,e["vue-uploader"]=r(e.vue))})(this,function(e){"use strict";const r=["multiple"],m={key:0,class:"file-details"},v={class:"file-name"},g=e.createElementVNode("i",{class:"fa fa-file",style:{"font-size":"30px"}},null,-1),D={class:"file-name-content"},k=["onClick"],y={__name:"vue-uploader",props:{label:{type:String,default:"UPLOAD OR DRAG AND DROP"},modelValue:{type:Array,default:[]},multiple:{type:Boolean,default:!0}},emits:["update:modelValue","onFileUpload","onRemoveFile"],setup(s,{emit:_}){const h=s,d=_,n=e.ref([]),t=e.ref(null),c=e.ref(null),V=l=>{c.value.click()},u=l=>{h.multiple?n.value=[...n.value,...l]:n.value=l,d("update:modelValue",n.value),d("onFileUpload",n.value)},E=l=>{const o=Array.from(l.target.files);u(o)},f=l=>{if(a(l),l.dataTransfer){const o=Array.from(l.dataTransfer.files);u(o)}t.value.classList.remove("drag-over")},F=l=>{n.value=n.value.filter(o=>o.name!==l),B(n.value),d("update:modelValue",n.value),d("onRemoveFile",l)},B=l=>{const o=new DataTransfer;for(const i of l)o.items.add(i);c.value.files=o.files},a=l=>{l.preventDefault(),l.stopPropagation()},L=l=>{a(l),t.value.classList.add("drag-over")},N=l=>{a(l),t.value.classList.remove("drag-over")},C=l=>{a(l),t.value.classList.remove("drag-over")},H=l=>{a(l),t.value.classList.add("drag-over")},p=l=>{a(l),t.value.classList.remove("drag-over")};return(l,o)=>(e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("div",{id:"drop-zone",onDrop:f,onDragover:L,onDragenter:N,onDragleave:C,onChange:f,onClick:V,onMousedown:H,onMouseup:p,onMouseleave:p,ref_key:"dropzone",ref:t},[e.createElementVNode("h3",null,e.toDisplayString(s.label),1),e.createElementVNode("input",{type:"file",onChange:E,id:"file-upload",multiple:s.multiple,ref_key:"fileInp",ref:c},null,40,r)],544),n.value.length>0?(e.openBlock(),e.createElementBlock("div",m,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.value,i=>(e.openBlock(),e.createElementBlock("div",{class:"file",key:i.name},[e.createElementVNode("div",v,[g,e.createElementVNode("div",D,[e.createElementVNode("p",null,e.toDisplayString(i.name),1)])]),e.createElementVNode("button",{class:"close-button",onClick:x=>F(i.name)},"X",8,k)]))),128))])):e.createCommentVNode("",!0)]))}};return{install(s){s.component("VueUploader",y)}}});