rms-vue3uppy-cloudinary/dist/rms-vue3uppy-cloudinary.es.js

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

import { onMounted as r, onBeforeUnmount as i, createElementBlock as p, openBlock as n, normalizeClass as d, renderSlot as u, createTextVNode as y, toDisplayString as m } from "vue";
import f from "@uppy/core";
import g from "@uppy/dashboard";
import c from "@uppy/xhr-upload";
const b = {
  __name: "UppyCloudinaryUploader",
  props: {
    uppyInstanceId: { type: String, default: "uppy" },
    // Uppy Instance ID
    cloudName: { type: String, required: !0 },
    // Cloudinary Cloud Name
    preset: { type: String, required: !0 },
    // Upload Preset
    tags: { type: Array, default: () => [] },
    // File Tags
    btnTriggerClass: { type: String, default: "uppy-trigger" },
    // Button Trigger Class
    buttonText: { type: String, default: "Upload Files" },
    // Button Text
    buttonClass: { type: String, default: "btn" },
    // Custom Button Class
    maxFileSize: { type: Number, default: 4 * 1024 * 1024 },
    // Max File Size (4MB default)
    maxNumberOfFiles: { type: Number, default: 20 },
    // Max number of files
    minNumberOfFiles: { type: Number, default: 1 },
    // Min number of files
    allowedFileTypes: { type: Array, default: () => ["image/png", "image/jpeg"] },
    // Allowed File Types
    closeModalOnClickOutside: { type: Boolean, default: !0 },
    // Close Modal on Click Outside
    closeAfterFinish: { type: Boolean, default: !0 },
    // Close Modal After Upload
    note: { type: String, default: "" },
    // Note to Users
    autoProceed: { type: Boolean, default: !1 },
    // Auto Upload or Not
    theme: { type: String, default: "light" },
    // Dashboard Theme
    debug: { type: Boolean, default: !1 },
    // Debug Mode
    inline: { type: Boolean, default: !1 },
    // Inline Mode
    showProgressDetails: { type: Boolean, default: !1 },
    // Show Progress Details
    proudlyDisplayPoweredByUppy: { type: Boolean, default: !1 },
    // Show Powered By Uppy
    allowedMetaFieldsArr: { type: Array, default: () => ["file", "name", "upload_preset", "tags"] }
    // Allowed File Types
  },
  emits: ["uploaded"],
  setup(l, { emit: a }) {
    const e = l, s = a;
    let o = null;
    return r(() => {
      o = new f({
        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
        }
      }), o.use(g, {
        inline: e.inline,
        trigger: `.${e.btnTriggerClass}`,
        showProgressDetails: e.showProgressDetails,
        proudlyDisplayPoweredByUppy: e.proudlyDisplayPoweredByUppy,
        closeModalOnClickOutside: e.closeModalOnClickOutside,
        closeAfterFinish: e.closeAfterFinish,
        note: e.note,
        theme: e.theme
      }), o.use(c, {
        endpoint: `https://api.cloudinary.com/v1_1/${e.cloudName}/image/upload`,
        fieldName: "file",
        formData: !0,
        allowedMetaFields: ["upload_preset", "tags"]
      }), o.on("file-added", (t) => {
        console.log("FILE ADDED ON DASHBOARD", t), this.uppy.setFileMeta(t.id, {
          file: t.data,
          upload_preset: e.preset,
          tags: e.tags
        });
      }), o.on("complete", (t) => {
        console.log("Upload Complete: ", t.successful), s("uploaded", t);
      });
    }), i(() => {
      console.log("Before Unmount::Uppy Instance to be Destroyed");
    }), (t, F) => (n(), p("button", {
      class: d(`${l.btnTriggerClass} ${l.buttonClass}`)
    }, [
      u(t.$slots, "btn-icon"),
      y(" " + m(l.buttonText), 1)
    ], 2));
  }
}, N = {
  install(l) {
    l.component("UppyCloudinaryUploader", b);
  }
};
export {
  b as UppyCloudinaryUploader,
  N as default
};