About the Project

the features of this package include the following:

• Drag and drop upload files
• Highly customizable
• Lightweight, powerful and easy to use <g-emoji class="g-emoji" alias="smile"
• Provides with file preview, server-side uploads, multiple state like error success and disable, etc...

Installation

• Install Yarn package

1yarn add @jaxtheprime/vue3-dropzone

• Install NPM package

1npm install @jaxtheprime/vue3-dropzone

Usage

Local registration:

1<template>
2    <Vue3Dropzone v-model="files"/>
3</template>
4
5<script>
6    import Vue3Dropzone from "@jaxtheprime/vue3-dropzone";
7    import '@jaxtheprime/vue3-dropzone/dist/style.css'
8
9    const files = ref([])
10    };
11</script>

Props

Server-Side File Upload

To enable the server-side file upload functionality, you can use the following props:

1<template>
2  <Vue3Dropzone
3    v-model="files"
4    :server-side="true"
5    upload-endpoint="http://your-upload-endpoint"
6    delete-endpoint="http://your-delete-endpoint"
7    :headers="headers"
8  />
9</template>
10
11<script setup>
12import { ref, computed } from "vue";
13
14const files = ref([]);
15const headers = computed(() => {
16  return {
17    Authorization: "Bearer " + localStorage.getItem("token"),
18  };
19});
20</script>

Slots

Customizing Slots

You can easily customize the component by overriding the available slots. Below is an example of how to use the different slots (button, placeholder-img, title, description) to personalize the behavior and appearance of the component.

1<Vue3Dropzone v-model="files">
2  <template #placeholder-img>
3    <img src="your-custom-image" />
4  </template>
5  <template #title>Your Custom Title</template>
6  <template #button="{ fileInput }">
7    <button @click="fileInput?.click()" class="custom-button">Your Custom Select Button</button>
8  </template>
9  <template #description>Your Custom Description</template>
10</Vue3Dropzone>

Using the Preview Slot

The preview slot allows for more complex customization of how uploaded files are displayed. This slot provides three props: data, formatSize, and removeFile.

Props

1<Vue3Dropzone v-model="files">
2  <template #preview="{ data, formatSize, removeFile }">
3    <div class="your-custom-preview">
4      <h2>{{ data.file.name }}</h2>
5      <span>{{ formatSize(data.file.size) }}</span>
6      <button @click="removeFile(data)">Remove File</button>
7    </div>
8  </template>
9</Vue3Dropzone>

Events

Error Event

1<template>
2  <Vue3Dropzone v-model="files" @error="handleError" />
3</template>
4
5<script setup>
6function handleError(error) {
7  const { type, files } = error;
8
9  if (type === "file-too-large") {
10    console.error(
11      `The following files are too large: ${files
12        .map((file) => file.name)
13        .join(", ")}`
14    );
15  } else if (type === "invalid-file-format") {
16    console.error(
17      `The following files are not accepted formats: ${files
18        .map((file) => file.name)
19        .join(", ")}`
20    );
21  }
22}
23</script>

File Uploaded Event

1<template>
2  <Vue3Dropzone v-model="files" @fileUploaded="handleFileUploaded" />
3</template>
4
5<script setup>
6function handleFileUploaded(file) {
7  // Do something with the uploaded file
8  console.log("File uploaded:", file);
9}
10</script>

File Removed Event

1<template>
2  <Vue3Dropzone v-model="files" @fileRemoved="handleFileRemoved" />
3</template>
4
5<script setup>
6function handleFileRemoved(file) {
7  // Do something with the removed file
8  console.log("File removed:", file);
9}
10</script>

Css variables

Contact

Emad Moghimi jaxtheprime@gmail.com

Project Link: https://github.com/JaxThePrime/vue3-dropzone