+
+---
+
+### The library provides support for Vue and React. Each has its own set of features and information. Explore the individual folders for more details.
+
+## Vue File Upload
+
+This folder includes files and resources related to the Vue file upload library. and also, it has [demo](./vue/examples/demo/) project. so, it's easy to understand and you can use it directly.
+
+Checkout the live demo on, codesandbox 
+
+### Square View
+
+vue- [view code](./vue/examples/SquareView.vue) 
+
+### Horizontal Long Square View
+
+vue - [view code](./vue/examples/LongSquareView.vue) 
+
+### Circular View
+
+vue - [view code](./vue/examples/RoundView.vue) 
+
+### Over-ride CSS
+
+For over-riding the design of default buttons, you can over-ride it's CSS by class name.
+ {filesPreview.map((item: any, index: any) => (
+
+ );
+}
diff --git a/react/src/app/components/singleFileUpload.tsx b/react/src/app/components/singleFileUpload.tsx
new file mode 100644
index 0000000..bc251d8
--- /dev/null
+++ b/react/src/app/components/singleFileUpload.tsx
@@ -0,0 +1,171 @@
+"use client";
+
+import React, { useState, useRef } from "react";
+import pdfPreviewImg from "../../../../assets/images/pdf-icon.png";
+import textPreviewImg from "../../../../assets/images/text-icon.png";
+import audioPreviewImg from "../../../../assets/images/music-icon.png";
+import apkPreviewImg from "../../../../assets/images/apk-icon.png";
+import zipPreviewImg from "../../../../assets/images/zip-icon.png";
+import sqlPreviewImg from "../../../../assets/images/sql-icon.png";
+import filePreviewImg from "../../../../assets/images/file-icon.png";
+import { StaticImageData } from "next/image";
+
+export default function SingleFileUpload({
+ accept,
+ uploadedFile,
+ callback,
+ uploadBtnText = "Upload",
+ progressBtnText = "Uploading...",
+ pdfPreview = pdfPreviewImg,
+ textPreview = textPreviewImg,
+ audioPreview = audioPreviewImg,
+ apkPreview = apkPreviewImg,
+ zipPreview = zipPreviewImg,
+ sqlPreview = sqlPreviewImg,
+ filePreview = filePreviewImg,
+ children,
+}: any) {
+ const [previewFileData, setPreviewFileData] = uploadedFile;
+ const [isUploading, setIsUploading] = useState(false);
+ const [fileObj, setFileObj] = useState(null);
+
+ const fileData = {} as {
+ previewType: string;
+ previewUrl: string | StaticImageData | ArrayBuffer | null;
+ previewName: string;
+ isDragging: boolean;
+ isLoading: boolean;
+ };
+
+ const inputRef = useRef(null);
+
+ const selectFile = () => {
+ if (isUploading) {
+ return;
+ }
+ if (inputRef.current) {
+ (inputRef.current as HTMLInputElement).click();
+ }
+ };
+
+ const handleFileChange = (event: any) => {
+ const file = event.target.files[0];
+ if (file) {
+ previewFile(file);
+ }
+ };
+
+ const previewFile = (file: any) => {
+ fileData.previewType = "image";
+ const reader = new FileReader();
+
+ reader.onload = () => {
+ if (file.type.startsWith("image/")) {
+ fileData.previewUrl = reader.result;
+ } else if (file.type === "text/plain") {
+ fileData.previewUrl = textPreview;
+ } else if (file.type === "application/pdf") {
+ fileData.previewUrl = pdfPreview;
+ } else if (file.type.startsWith("video/")) {
+ fileData.previewType = "video";
+ fileData.previewUrl = URL.createObjectURL(file);
+ } else if (file.type.startsWith("audio/")) {
+ fileData.previewUrl = audioPreview;
+ } else if (file.type === "application/vnd.android.package-archive") {
+ fileData.previewUrl = apkPreview;
+ } else if (file.type === "application/zip") {
+ fileData.previewUrl = zipPreview;
+ } else if (file.type === "application/sql") {
+ fileData.previewUrl = sqlPreview;
+ } else {
+ fileData.previewUrl = filePreview;
+ }
+ fileData.previewName = file.name;
+ setFileObj(file);
+ setPreviewFileData(fileData);
+ };
+ reader.onerror = (error) => {
+ console.error(`Error while reading file ${file.name}: ${error}`);
+ };
+ reader.readAsDataURL(file);
+ };
+
+ const uploadingFunction = async () => {
+ if (isUploading) {
+ return;
+ }
+ setIsUploading(true);
+
+ await callback(fileObj);
+ setFileObj(previewFileData);
+
+ setIsUploading(false);
+ };
+
+ const handleDragOver = (event: any) => {
+ if (isUploading) {
+ return;
+ }
+ event.preventDefault();
+ fileData.isDragging = true;
+ };
+
+ const handleDragLeave = (event: any) => {
+ event.preventDefault();
+ fileData.isDragging = false;
+ };
+
+ const handleDrop = (event: any) => {
+ if (isUploading) {
+ return;
+ }
+ event.preventDefault();
+ fileData.isDragging = false;
+
+ const file = event.dataTransfer.files[0];
+ if (file && (accept ? accept.split(", ").includes(file.type) : true)) {
+ previewFile(file);
+ }
+ };
+
+ return (
+
+
+ ))}
+ selectFile(index)}
+ onDragOver={(event) => handleDragOver(event, index, "reset")}
+ onDragLeave={(event) => handleDragLeave(event, index, "reset")}
+ onDrop={(event) => handleDrop(event, index, "reset")}
+ >
+ {children && children(item)}
+ {
+ inputRefs.current[index] = element
+ ? { current: element }
+ : null;
+ }}
+ className="hidden"
+ onChange={(event) => handleFileChange(event, index, "reset")}
+ />
+
+
+
+
+
+ handleDragOver(event, filesPreview.length, "add")
+ }
+ onDragLeave={(event) =>
+ handleDragLeave(event, filesPreview.length, "add")
+ }
+ onDrop={(event) => handleDrop(event, filesPreview.length, "add")}
+ >
+ {children({})}
+
+ handleFileChange(event, filesPreview.length, "add")
+ }
+ multiple
+ />
+
+
+
+
+
+
+ );
+}
diff --git a/react/src/app/favicon.ico b/react/src/app/favicon.ico
new file mode 100644
index 0000000..718d6fe
Binary files /dev/null and b/react/src/app/favicon.ico differ
diff --git a/react/src/app/globals.css b/react/src/app/globals.css
new file mode 100644
index 0000000..bd6213e
--- /dev/null
+++ b/react/src/app/globals.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
\ No newline at end of file
diff --git a/react/src/app/index.ts b/react/src/app/index.ts
new file mode 100644
index 0000000..93b39cb
--- /dev/null
+++ b/react/src/app/index.ts
@@ -0,0 +1,7 @@
+import "../../dist/css/output.css";
+import "../../dist/css/style.scss";
+
+import SingleFileUpload from "./components/singleFileUpload.tsx";
+import MultipleFileUpload from "./components/multipleFileUpload.tsx";
+
+export { SingleFileUpload, MultipleFileUpload };
diff --git a/react/src/app/layout.tsx b/react/src/app/layout.tsx
new file mode 100644
index 0000000..3fce01f
--- /dev/null
+++ b/react/src/app/layout.tsx
@@ -0,0 +1,24 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+import "../../dist/style.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+ title: "React file upload management",
+ description:
+ "A file management system, allows for single and multiple file uploading with a preview feature",
+};
+
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode;
+}) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/react/src/app/page.tsx b/react/src/app/page.tsx
new file mode 100644
index 0000000..8925b04
--- /dev/null
+++ b/react/src/app/page.tsx
@@ -0,0 +1,446 @@
+"use client";
+
+import Image, { StaticImageData } from "next/image";
+import React, { useState } from "react";
+import SingleFileUpload from "./components/singleFileUpload";
+import MultipleFileUpload from "./components/multipleFileUpload";
+import img from "../../../assets/images/example-img.jpg";
+import placeHolderImg from "../../../assets/images/placeholder.png";
+
+export default function App() {
+ const [previewFileData, setPreviewFileData] = useState(
+ {} as {
+ previewType: string;
+ previewUrl: string | StaticImageData | ArrayBuffer | null;
+ previewName: string;
+ isDragging: boolean;
+ }
+ );
+
+ const handleFileUploading = async (file: any) => {
+ await new Promise((resolve) => setTimeout(resolve, 2000));
+ setPreviewFileData({
+ previewType: "image",
+ previewUrl: img,
+ previewName: file.name,
+ isDragging: false,
+ });
+ };
+
+ const uploadedFiles = [] as Array<{
+ fileType: string;
+ fileUrl: string | StaticImageData;
+ fileName: string;
+ }>;
+
+ const handleFilesUploading = async (files: any) => {
+ const uploadedFiles = [];
+
+ for (var i = 0; i < files.length; i++) {
+ uploadedFiles.push({
+ fileType: "image",
+ fileUrl: img,
+ fileName: files[i].name,
+ });
+ }
+
+ await new Promise((resolve) => setTimeout(resolve, 5000));
+ return uploadedFiles;
+ };
+
+ return (
+
+ {children}
+
+
+
+
+
+ Single File Upload
+
+
+
+ {!previewFileData || !previewFileData.previewUrl ? (
+
+ ) : (
+
+
+ {previewFileData.previewType != "video" ? (
+
+ )}
+ + {previewFileData ? previewFileData.previewName : ""} +
++
+
Multiple File Upload
+
+
+ )}
+
+ {!file.previewUrl ? (
+
+ ) : (
+
+
+ {file.previewType != "video" ? (
+
+ )}
+ {file ? file.previewName : ""}
+Single File Upload
+
+
+
+
+
+ {previewFileData.previewType != "video" ? (
+
+ + {previewFileData.previewName + ? previewFileData.previewName + : "Click to upload or drag and drop files"} +
++
+
Multiple File Upload
+
+
+ )}
+
+
+
+ {file.previewType != "video" ? (
+
+ + {file.previewName + ? file.previewName + : "Click to upload or drag and drop files"} +
+Single File Upload
+
+
+
+
+
+ {previewFileData.previewType != "video" ? (
+
+ + {previewFileData.previewName} +
++
+
Multiple File Upload
+
+
+ )}
+
+
+
+ {file.previewType != "video" ? (
+
+ + {file.previewName} +
+Single File Upload
+
+
+
+
+
+ {previewFileData.previewType != "video" ? (
+
+ + {previewFileData.previewName} +
++
+
Multiple File Upload
+
+
+ )}
+
+
+
+ {file.previewType != "video" ? (
+
+ + {file.previewName} +
+
+
+
+
+
+
+
+```
+
+```js
+
+```
+
+### Multiple File Upload Management
+
+```html
+
+
+
+
+
+
+
+```
+
+```js
+
+```
diff --git a/vue/env.d.ts b/vue/env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/vue/env.d.ts
@@ -0,0 +1 @@
+/// Single File Upload
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ![]()
+
+
+ + {{ file.file ? file.file.previewName : '' }} +
++
+
Multiple File Upload
+
+
+
+
+
+
+
+
diff --git a/vue/examples/LongSquareView.vue b/vue/examples/LongSquareView.vue
new file mode 100644
index 0000000..9362076
--- /dev/null
+++ b/vue/examples/LongSquareView.vue
@@ -0,0 +1,147 @@
+
+
+
+
+
+
+
+
+
+
+ ![]()
+
+
+ + {{ file.file ? file.file.previewName : '' }} +
+Single File Upload
+
+
+
+
+
+
+
+
+
+
+
+ ![]()
+
+
+
+ 
+
+
+ + {{ + file.file.previewName + ? file.file.previewName + : 'Click to upload or drag and drop files' + }} +
++
+
Multiple File Upload
+
+
+
+
+
+
+
+
diff --git a/vue/examples/RoundView.vue b/vue/examples/RoundView.vue
new file mode 100644
index 0000000..f116e55
--- /dev/null
+++ b/vue/examples/RoundView.vue
@@ -0,0 +1,160 @@
+
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+ + {{ file.file ? file.file.previewName : 'Click to upload or drag and drop files' }} +
+Single File Upload
+
+
+
+
+
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+ + {{ file.file.previewName }} +
++
+
Multiple File Upload
+
+
+
+
+
+
+
+
diff --git a/vue/examples/SquareView.vue b/vue/examples/SquareView.vue
new file mode 100644
index 0000000..ff4b26e
--- /dev/null
+++ b/vue/examples/SquareView.vue
@@ -0,0 +1,160 @@
+
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+ + {{ file.file.previewName }} +
+Single File Upload
+
+
+
+
+
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+ + {{ file.file.previewName }} +
++
+
Multiple File Upload
+
+
+
+
+
+
+
+
diff --git a/vue/examples/demo/README.md b/vue/examples/demo/README.md
new file mode 100644
index 0000000..fafa289
--- /dev/null
+++ b/vue/examples/demo/README.md
@@ -0,0 +1,31 @@
+# test-vue-file-upload
+
+This ready-to-use example shows real-time usage of the `vue-file-upload` library with custom UI.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Type-Check, Compile and Minify for Production
+
+```sh
+npm run build
+```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+npm run lint
+```
diff --git a/vue/examples/demo/env.d.ts b/vue/examples/demo/env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/vue/examples/demo/env.d.ts
@@ -0,0 +1 @@
+///
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+ + {{ file.file.previewName }} +
+Single File Upload
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ![]()
+
+
+ + {{ file.file ? file.file.previewName : '' }} +
++
+
Multiple File Upload
+
+
+
+
+
+
+
+
+
diff --git a/vue/examples/demo/tsconfig.app.json b/vue/examples/demo/tsconfig.app.json
new file mode 100644
index 0000000..3e5b621
--- /dev/null
+++ b/vue/examples/demo/tsconfig.app.json
@@ -0,0 +1,12 @@
+{
+ "extends": "@vue/tsconfig/tsconfig.dom.json",
+ "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+ "exclude": ["src/**/__tests__/*"],
+ "compilerOptions": {
+ "composite": true,
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["./src/*"]
+ }
+ }
+}
diff --git a/vue/examples/demo/tsconfig.json b/vue/examples/demo/tsconfig.json
new file mode 100644
index 0000000..66b5e57
--- /dev/null
+++ b/vue/examples/demo/tsconfig.json
@@ -0,0 +1,11 @@
+{
+ "files": [],
+ "references": [
+ {
+ "path": "./tsconfig.node.json"
+ },
+ {
+ "path": "./tsconfig.app.json"
+ }
+ ]
+}
diff --git a/vue/examples/demo/tsconfig.node.json b/vue/examples/demo/tsconfig.node.json
new file mode 100644
index 0000000..dee96be
--- /dev/null
+++ b/vue/examples/demo/tsconfig.node.json
@@ -0,0 +1,16 @@
+{
+ "extends": "@tsconfig/node18/tsconfig.json",
+ "include": [
+ "vite.config.*",
+ "vitest.config.*",
+ "cypress.config.*",
+ "nightwatch.conf.*",
+ "playwright.config.*"
+ ],
+ "compilerOptions": {
+ "composite": true,
+ "module": "ESNext",
+ "moduleResolution": "Bundler",
+ "types": ["node"]
+ }
+}
diff --git a/vue/examples/demo/vite.config.ts b/vue/examples/demo/vite.config.ts
new file mode 100644
index 0000000..5c45e1d
--- /dev/null
+++ b/vue/examples/demo/vite.config.ts
@@ -0,0 +1,16 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [
+ vue(),
+ ],
+ resolve: {
+ alias: {
+ '@': fileURLToPath(new URL('./src', import.meta.url))
+ }
+ }
+})
diff --git a/vue/index.html b/vue/index.html
new file mode 100644
index 0000000..4e22209
--- /dev/null
+++ b/vue/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ![]()
+
+
+ + {{ file.file ? file.file.previewName : '' }} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/vue/src/components/SingleFile.vue b/vue/src/components/SingleFile.vue
new file mode 100644
index 0000000..d15b141
--- /dev/null
+++ b/vue/src/components/SingleFile.vue
@@ -0,0 +1,210 @@
+
+
+
+
+
+
diff --git a/vue/src/index.ts b/vue/src/index.ts
new file mode 100644
index 0000000..8c35a71
--- /dev/null
+++ b/vue/src/index.ts
@@ -0,0 +1,20 @@
+import '../dist/output.css'
+import '../dist/style.scss'
+
+import SingleFileUpload from './components/SingleFile.vue'
+import MultipleFileUpload from './components/MultipleFile.vue'
+
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+
+app.component('SingleFileUpload', SingleFileUpload)
+app.component('MultipleFileUpload', MultipleFileUpload)
+
+app.use(router)
+
+app.mount('#app')
+
+export { SingleFileUpload, MultipleFileUpload }
diff --git a/vue/src/input.css b/vue/src/input.css
new file mode 100644
index 0000000..b5c61c9
--- /dev/null
+++ b/vue/src/input.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/vue/src/router/index.ts b/vue/src/router/index.ts
new file mode 100644
index 0000000..48d514b
--- /dev/null
+++ b/vue/src/router/index.ts
@@ -0,0 +1,15 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import IndexView from '../views/IndexView.vue'
+
+const router = createRouter({
+ history: createWebHistory(import.meta.env.BASE_URL),
+ routes: [
+ {
+ path: '/',
+ name: 'IndexView',
+ component: IndexView
+ }
+ ]
+})
+
+export default router
diff --git a/vue/src/style.scss b/vue/src/style.scss
new file mode 100644
index 0000000..31f2652
--- /dev/null
+++ b/vue/src/style.scss
@@ -0,0 +1,63 @@
+@mixin gradient-striped($color: rgba(255, 255, 255, 0.15), $angle: 45deg) {
+ background-image: -webkit-linear-gradient(
+ $angle,
+ $color 25%,
+ transparent 25%,
+ transparent 50%,
+ $color 50%,
+ $color 75%,
+ transparent 75%,
+ transparent
+ );
+ background-image: -o-linear-gradient(
+ $angle,
+ $color 25%,
+ transparent 25%,
+ transparent 50%,
+ $color 50%,
+ $color 75%,
+ transparent 75%,
+ transparent
+ );
+ background-image: linear-gradient(
+ $angle,
+ $color 25%,
+ transparent 25%,
+ transparent 50%,
+ $color 50%,
+ $color 75%,
+ transparent 75%,
+ transparent
+ );
+}
+
+@-webkit-keyframes progress-bar-stripes {
+ from {
+ background-position: 40px 0;
+ }
+ to {
+ background-position: 0 0;
+ }
+}
+
+@keyframes progress-bar-stripes {
+ from {
+ background-position: 40px 0;
+ }
+ to {
+ background-position: 0 0;
+ }
+}
+
+@mixin animation($animation) {
+ -webkit-animation: $animation;
+ -o-animation: $animation;
+ animation: $animation;
+}
+.progress.active .progress-bar {
+ @include animation(progress-bar-stripes 2s linear infinite);
+}
+.progress-striped .progress-bar {
+ @include gradient-striped;
+ background-size: 40px 40px;
+}
diff --git a/vue/src/views/IndexView.vue b/vue/src/views/IndexView.vue
new file mode 100644
index 0000000..d34605f
--- /dev/null
+++ b/vue/src/views/IndexView.vue
@@ -0,0 +1,147 @@
+
+
+
+
+
+
+ Single File Upload
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ![]()
+
+
+ + {{ file.file ? file.file.previewName : '' }} +
++
+
Multiple File Upload
+
+
+
+
+
+
+
+
diff --git a/vue/tailwind.config.ts b/vue/tailwind.config.ts
new file mode 100644
index 0000000..1916fa5
--- /dev/null
+++ b/vue/tailwind.config.ts
@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+ theme: {
+ extend: {}
+ },
+ variants: {
+ extend: {}
+ },
+ plugins: []
+}
diff --git a/vue/tsconfig.app.json b/vue/tsconfig.app.json
new file mode 100644
index 0000000..3e5b621
--- /dev/null
+++ b/vue/tsconfig.app.json
@@ -0,0 +1,12 @@
+{
+ "extends": "@vue/tsconfig/tsconfig.dom.json",
+ "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+ "exclude": ["src/**/__tests__/*"],
+ "compilerOptions": {
+ "composite": true,
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["./src/*"]
+ }
+ }
+}
diff --git a/vue/tsconfig.json b/vue/tsconfig.json
new file mode 100644
index 0000000..66b5e57
--- /dev/null
+++ b/vue/tsconfig.json
@@ -0,0 +1,11 @@
+{
+ "files": [],
+ "references": [
+ {
+ "path": "./tsconfig.node.json"
+ },
+ {
+ "path": "./tsconfig.app.json"
+ }
+ ]
+}
diff --git a/vue/tsconfig.node.json b/vue/tsconfig.node.json
new file mode 100644
index 0000000..007b0ea
--- /dev/null
+++ b/vue/tsconfig.node.json
@@ -0,0 +1,16 @@
+{
+ "extends": "@tsconfig/node18/tsconfig.json",
+ "include": [
+ "vite.config.*",
+ "vitest.config.*",
+ "cypress.config.*",
+ "nightwatch.conf.*",
+ "playwright.config.*"
+ ],
+ "compilerOptions": {
+ "composite": true,
+ "module": "ESNext",
+ "strict": true,
+ "moduleResolution": "Bundler",
+ }
+}
\ No newline at end of file
diff --git a/vue/vite.config.ts b/vue/vite.config.ts
new file mode 100644
index 0000000..70ee6fa
--- /dev/null
+++ b/vue/vite.config.ts
@@ -0,0 +1,29 @@
+import { defineConfig } from "vite";
+import { resolve } from "path";
+import vue from "@vitejs/plugin-vue";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [vue()],
+ build: {
+ lib: {
+ // src/indext.ts is where we have exported the component(s)
+ entry: resolve(__dirname, "src/index.ts"),
+ name: "@canopassoftware/vue-file-upload",
+ // the name of the output files when the build is run
+ fileName: "index",
+ },
+ rollupOptions: {
+ // make sure to externalize deps that shouldn't be bundled
+ // into your library
+ external: ["vue"],
+ output: {
+ // Provide global variables to use in the UMD build
+ // for externalized deps
+ globals: {
+ vue: "Vue",
+ },
+ },
+ },
+ },
+});
\ No newline at end of file
+
+
+
+
+
+
+
+
+ ![]()
+
+
+ + {{ file.file ? file.file.previewName : '' }} +
+