Dropzone-File Uploads

OverviewOfficial Website

Dropzone is one of the most popular drag and drop libraries. 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() };    
}