Dropzone-File Uploads

OverviewOfficial Website

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

Import Package

import DropZone from "@/common/dropZone.vue";

Examples

Title Javascript

Dropzone

Title	Javascript
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() };    
}