Dropzone-File Uploads

OverviewOfficial Website

Dropzone.js is one of the most popular drag and drop JavaScript libraries. It is free, fully open source, and makes it easy for you to handle dropped files on your website.

Import Package

<!-- File upload package -->
import DropZone from "@/components/widgets/dropZone";

Add Package

yarn add dropzone --save

Remove Package

yarn remove dropzone or you can remove package by removing specific package from package.json

Examples

Title Example

Dropzone

Title	Example
Dropzone	`setup() { let files = ref([]); let dropzoneFile = ref(""); const drop = (e) => { dropzoneFile.value = e.dataTransfer.files[0]; files.value.push(dropzoneFile.value); }; const selectedFile = () => { dropzoneFile.value = document.querySelector(".dropzoneFile").files[0]; files.value.push(dropzoneFile.value); }; watch( () => [...files.value], (currentValue) => { return currentValue; } ); return { dropzoneFile, files, drop, selectedFile, v$: useVuelidate() };`

 
setup() {
    let files = ref([]);
    let dropzoneFile = ref("");
    const drop = (e) => {
        dropzoneFile.value = e.dataTransfer.files[0];
        files.value.push(dropzoneFile.value);
    };
    const selectedFile = () => {
        dropzoneFile.value = document.querySelector(".dropzoneFile").files[0];
        files.value.push(dropzoneFile.value);
    };
    watch(
        () => [...files.value],
        (currentValue) => {
        return currentValue;
        }
    );

    return { dropzoneFile, files, drop, selectedFile, v$: useVuelidate() };