CODEWITHSUNDEEP
vue.jsdropzone
Irfan Iqbal
Irfan Iqbal

Reputation: 41

Is vue2-dropzone compatible with vue3?

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

Upvotes: 4

Views: 4951

Answers (3)

Talha Meh
Talha Meh

Reputation: 537

well, we're using this package for our production builds:

Vue3 Library Component for drag’n’drop file uploads with image previews. https://github.com/darknessnerd/drop-zone

Upvotes: 0

Andre W.
Andre W.

Reputation: 1023

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>

Upvotes: 3

kissu
kissu

Reputation: 46676

As stated in this post: https://github.com/rowanwins/vue-dropzone/issues/578

It looks like vue-dropzone does not support Vue3 as of right now, I mean the mantainer was already struggling to manage the vue 2 and asked for help so it seems legit.

Maybe give a look to this vue3 one: https://github.com/Yaxian/vue3-dropzone

Here is a list of available alternatives: https://github.com/vuejs/awesome-vue#drag-and-drop

Upvotes: 1

Related Questions