Is vue2-dropzone compatible with vue3?

Question

vue2-dropzone is working fine for vue2 but not working for vue3.

With the following code

import vue2Dropzone from 'vue2-dropzone'
import 'vue2-dropzone/dist/vue2Dropzone.min.css'

return {
  dropzoneOptions: {
     autoProcessQueue: false,
         addRemoveLinks: true,
         url: this.url,
         headers: {
             'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
         },
     },
     id: null,
     myDropZone: null,
     supervisorError: ''
  }
}

I do have the following error

TypeError: Cannot read property '_c' of undefined vue3

Answer 1

vue3-dropzone

What you are after is vue3-dropzone.

It worked highly similar to the vue2-dropzone package that most of you may have been using with vue2. I myself am one of the contributors to the new vue3-dropzone package. I have just added the example code for those who want to Save Multiple Files at once, as shown below:

Example of Saving Multiple Files

<template>
      <div>
        <div v-bind="getRootProps()">
          <input v-bind="getInputProps()" />
          <p v-if="isDragActive">Drop the files here ...</p>
          <p v-else>Drag 'n' drop some files here, or click to select files</p>
        </div>
        <button @click="open">open</button>
      </div>
</template>
    
<script>
    import { useDropzone } from "vue3-dropzone";
    import axios from "axios";
    
    export default {
      name: "UseDropzoneDemo",
      setup() {
        const url = "{your_url}"; // Your url on the server side
        const saveFiles = (files) => {
          const formData = new FormData(); // pass data as a form
          for (var x = 0; x < files.length; x++) {
            // append files as array to the form, feel free to change the array name
            formData.append("images[]", files[x]);
          }
    
          // post the formData to your backend where storage is processed. In the backend, you will need to loop through the array and save each file through the loop.
    
          axios
            .post(url, formData, {
              headers: {
                "Content-Type": "multipart/form-data",
              },
            })
            .then((response) => {
              console.info(response.data);
            })
            .catch((err) => {
              console.error(err);
            });
        };
    
        function onDrop(acceptFiles, rejectReasons) {
          saveFiles(acceptFiles); // saveFiles as callback
          console.log(rejectReasons);
        }
    
        const { getRootProps, getInputProps, ...rest } = useDropzone({ onDrop });
    
        return {
          getRootProps,
          getInputProps,
          ...rest,
        };
      },
    };
</script>