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

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

import { onMounted as d, onBeforeUnmount as p, openBlock as u, createElementBlock as m, normalizeClass as y, renderSlot as f, createTextVNode as g, toDisplayString as c } from "vue";
import b from "@uppy/core";
import F from "@uppy/dashboard";
import S 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
    maxFileSizeImg: { type: Number, default: 4 * 1024 * 1024 },
    // Max File Size (4MB default)
    maxFileSizeVideo: { type: Number, default: 50 * 1024 * 1024 },
    // Max File Size (50MB 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", "video/*"] },
    // 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(o, { emit: i }) {
    const e = o, r = i;
    let l = null;
    return d(() => {
      l = new b({
        id: e.uppyInstanceId,
        autoProceed: e.autoProceed,
        debug: e.debug,
        meta: {
          upload_preset: e.preset,
          tags: e.tags
        },
        onBeforeFileAdded: (t, n) => {
          const a = e.maxFileSizeImg, s = e.maxFileSizeVideo;
          return t.type.startsWith("image/") && t.size > a ? (l.info(`Image "${t.name}" is too large (max ${a / (1024 * 1024)}MB)`, "error", 5e3), !1) : t.type.startsWith("video/") && t.size > s ? (l.info(`Video "${t.name}" is too large (max ${s / (1024 * 1024)}MB)`, "error", 5e3), !1) : !0;
        },
        restrictions: {
          maxFileSize: e.maxFileSizeVideo,
          // Set to max video size for overall(global) file size restriction
          maxNumberOfFiles: e.maxNumberOfFiles,
          minNumberOfFiles: e.minNumberOfFiles,
          allowedFileTypes: e.allowedFileTypes
        }
      }), l.use(F, {
        inline: e.inline,
        trigger: `.${e.btnTriggerClass}`,
        showProgressDetails: e.showProgressDetails,
        proudlyDisplayPoweredByUppy: e.proudlyDisplayPoweredByUppy,
        closeModalOnClickOutside: e.closeModalOnClickOutside,
        closeAfterFinish: e.closeAfterFinish,
        note: e.note,
        theme: e.theme
      }), l.use(S, {
        endpoint: `https://api.cloudinary.com/v1_1/${e.cloudName}/auto/upload`,
        fieldName: "file",
        formData: !0,
        allowedMetaFields: ["upload_preset", "tags"]
      }), l.on("file-added", (t) => {
        console.log("FILE ADDED ON DASHBOARD", t), l.setFileMeta(t.id, {
          file: t.data,
          upload_preset: e.preset,
          tags: e.tags
        });
      }), l.on("complete", (t) => {
        console.log("Upload Complete: ", t.successful), r("uploaded", t);
      });
    }), p(() => {
      l.value && (console.log("Destroying Uppy Instance"), l.close(), l = null);
    }), (t, n) => (u(), m("button", {
      class: y(`${o.btnTriggerClass} ${o.buttonClass}`)
    }, [
      f(t.$slots, "btn-icon"),
      g(" " + c(o.buttonText), 1)
    ], 2));
  }
}, N = {
  install(o) {
    o.component("UppyCloudinaryUploader", B);
  }
};
export {
  B as UppyCloudinaryUploader,
  N as default
};