vue2-dropzone

import { defineComponent } from 'vue'; import VueDropzone from 'vue2-dropzone'; import 'vue2-dropzone/dist/vue2Dropzone.min.css'; export default defineComponent({ name: 'FileUploadComponent', components: { VueDropzone }, data() { return { dropzoneOptions: { url: 'https://httpbin.org/post', // Replace with your actual upload endpoint thumbnailWidth: 150, // px maxFilesize: 2, // MB acceptedFiles: '.jpeg,.jpg,.png,.gif,.webp', // Supported file types addRemoveLinks: true, dictDefaultMessage: 'Drop files here or click to upload.', headers: { 'X-CSRF-TOKEN': process.env.VUE_APP_CSRF_TOKEN ?? '', // Example for CSRF token 'Custom-Header': 'MyValue' }, // Optionally disable auto-processing and manually trigger uploads // autoProcessQueue: false, } }; }, methods: { dropzoneSuccess(file, response) { console.log('File uploaded successfully!', file, response); // Access component instance to interact with Dropzone.js methods // (this.$refs.myVueDropzone as any).removeFile(file); }, dropzoneError(file, message, xhr) { console.error('Error uploading file:', file, message, xhr); }, dropzoneRemovedFile(file, error, xhr) { console.log('File removed from queue:', file); }, // Example of a manual upload trigger // processQueue() { // (this.$refs.myVueDropzone as any).processQueue(); // } } });