rms-vue3uppy-cloudinary
Version:
A VueJs(Vue3) based uploader which upload files to cloudinary using uppy
2 lines (1 loc) • 2.9 kB
JavaScript
(function(l,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("@uppy/core"),require("@uppy/dashboard"),require("@uppy/xhr-upload")):typeof define=="function"&&define.amd?define(["exports","vue","@uppy/core","@uppy/dashboard","@uppy/xhr-upload"],t):(l=typeof globalThis<"u"?globalThis:l||self,t(l.Vue3UppyCloudinary={},l.Vue,l.Uppy,l.Dashboard,l.XHRUpload))})(this,function(l,t,i,p,n){"use strict";const s={__name:"UppyCloudinaryUploader",props:{uppyInstanceId:{type:String,default:"uppy"},cloudName:{type:String,required:!0},preset:{type:String,required:!0},tags:{type:Array,default:()=>[]},btnTriggerClass:{type:String,default:"uppy-trigger"},buttonText:{type:String,default:"Upload Files"},buttonClass:{type:String,default:"btn"},maxFileSize:{type:Number,default:4194304},maxNumberOfFiles:{type:Number,default:20},minNumberOfFiles:{type:Number,default:1},allowedFileTypes:{type:Array,default:()=>["image/png","image/jpeg"]},closeModalOnClickOutside:{type:Boolean,default:!0},closeAfterFinish:{type:Boolean,default:!0},note:{type:String,default:""},autoProceed:{type:Boolean,default:!1},theme:{type:String,default:"light"},debug:{type:Boolean,default:!1},inline:{type:Boolean,default:!1},showProgressDetails:{type:Boolean,default:!1},proudlyDisplayPoweredByUppy:{type:Boolean,default:!1},allowedMetaFieldsArr:{type:Array,default:()=>["file","name","upload_preset","tags"]}},emits:["uploaded"],setup(a,{emit:d}){const e=a,y=d;let r=null;return t.onMounted(()=>{r=new i({id:e.uppyInstanceId,autoProceed:e.autoProceed,debug:e.debug,meta:{upload_preset:e.preset,tags:e.tags},restrictions:{maxFileSize:e.maxFileSize,maxNumberOfFiles:e.maxNumberOfFiles,minNumberOfFiles:e.minNumberOfFiles,allowedFileTypes:e.allowedFileTypes}}),r.use(p,{inline:e.inline,trigger:`.${e.btnTriggerClass}`,showProgressDetails:e.showProgressDetails,proudlyDisplayPoweredByUppy:e.proudlyDisplayPoweredByUppy,closeModalOnClickOutside:e.closeModalOnClickOutside,closeAfterFinish:e.closeAfterFinish,note:e.note,theme:e.theme}),r.use(n,{endpoint:`https://api.cloudinary.com/v1_1/${e.cloudName}/image/upload`,fieldName:"file",formData:!0,allowedMetaFields:["upload_preset","tags"]}),r.on("file-added",o=>{console.log("FILE ADDED ON DASHBOARD",o),this.uppy.setFileMeta(o.id,{file:o.data,upload_preset:e.preset,tags:e.tags})}),r.on("complete",o=>{console.log("Upload Complete: ",o.successful),y("uploaded",o)})}),t.onBeforeUnmount(()=>{console.log("Before Unmount::Uppy Instance to be Destroyed")}),(o,f)=>(t.openBlock(),t.createElementBlock("button",{class:t.normalizeClass(`${a.btnTriggerClass} ${a.buttonClass}`)},[t.renderSlot(o.$slots,"btn-icon"),t.createTextVNode(" "+t.toDisplayString(a.buttonText),1)],2))}},u={install(a){a.component("UppyCloudinaryUploader",s)}};l.UppyCloudinaryUploader=s,l.default=u,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});