UNPKG

rms-vue3uppy-cloudinary

Version:

A VueJs(Vue3) based uploader which upload files to cloudinary using uppy

2 lines (1 loc) 3.28 kB
(function(l,o){typeof exports=="object"&&typeof module<"u"?o(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"],o):(l=typeof globalThis<"u"?globalThis:l||self,o(l.Vue3UppyCloudinary={},l.Vue,l.Uppy,l.Dashboard,l.XHRUpload))})(this,(function(l,o,n,p,u){"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"},maxFileSizeImg:{type:Number,default:4194304},maxFileSizeVideo:{type:Number,default:52428800},maxNumberOfFiles:{type:Number,default:20},minNumberOfFiles:{type:Number,default:1},allowedFileTypes:{type:Array,default:()=>["image/png","image/jpeg","video/*"]},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(i,{emit:f}){const e=i,m=f;let a=null;return o.onMounted(()=>{a=new n({id:e.uppyInstanceId,autoProceed:e.autoProceed,debug:e.debug,meta:{upload_preset:e.preset,tags:e.tags},onBeforeFileAdded:(t,g)=>{const r=e.maxFileSizeImg,d=e.maxFileSizeVideo;return t.type.startsWith("image/")&&t.size>r?(a.info(`Image "${t.name}" is too large (max ${r/1048576}MB)`,"error",5e3),!1):t.type.startsWith("video/")&&t.size>d?(a.info(`Video "${t.name}" is too large (max ${d/1048576}MB)`,"error",5e3),!1):!0},restrictions:{maxFileSize:e.maxFileSizeVideo,maxNumberOfFiles:e.maxNumberOfFiles,minNumberOfFiles:e.minNumberOfFiles,allowedFileTypes:e.allowedFileTypes}}),a.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}),a.use(u,{endpoint:`https://api.cloudinary.com/v1_1/${e.cloudName}/auto/upload`,fieldName:"file",formData:!0,allowedMetaFields:["upload_preset","tags"]}),a.on("file-added",t=>{console.log("FILE ADDED ON DASHBOARD",t),a.setFileMeta(t.id,{file:t.data,upload_preset:e.preset,tags:e.tags})}),a.on("complete",t=>{console.log("Upload Complete: ",t.successful),m("uploaded",t)})}),o.onBeforeUnmount(()=>{a.value&&(console.log("Destroying Uppy Instance"),a.close(),a=null)}),(t,g)=>(o.openBlock(),o.createElementBlock("button",{class:o.normalizeClass(`${i.btnTriggerClass} ${i.buttonClass}`)},[o.renderSlot(t.$slots,"btn-icon"),o.createTextVNode(" "+o.toDisplayString(i.buttonText),1)],2))}},y={install(i){i.component("UppyCloudinaryUploader",s)}};l.UppyCloudinaryUploader=s,l.default=y,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));