darknessnerd/drop-zone

Vue3 Library Component for drag’n’drop file uploads with image previews.

drop-zone's Issues

support for ts? Could not find a declaration file for module 'dropzone-vue'

Im getting this error where it can not find the a declaration file. is there any other extra setup that needs to be done? I tried to install the types file but was not found in the registry.

acceptFiles limits the possible file types to a pre-defined list

This becomes an issue if you have a file type that isn't your run-of-the-mill file and has no matching MIME-type that is defined in @/utils/minetypes . If you have a custom file format for example, you're out of luck because there's no way to limit the dropzone to respect a custom file extension. The only workaround is to accept all types and maybe try to validate it on your own.

I imagine the user should be able to specify any arbitrary file extensions.

How would I support uploading using pre-signed URLs?

If I had a server function that could be called with data from a file item (e.g. file name, WebKit Relative Path, file length and mime type) and would return a pre-signed URL, the method (PUT or POST), any additional headers and a success callback, how would I set this to call it for each file when it is ready to upload and then use the pre-signed URL for the upload?

Thanks!

How am I gonna change the default text "Drop here"

How to show existing image files in dropzone widget in edit form?

Hi,

I have uploaded my image file in base64 and have them in db-table. In the edit form, I would like to show the respective already uploaded image file in the dropzone widget. How can I achieve that? Can you please help me on that?

NOTE: I have directly saved the uploaded image in db-table in base64 encoded format, but not in server.

Thanks in advance!

¿How can i rename file(s)?

I have troubles to find the way to rename the file before it uploads to server.
Could you help me please?

Regards,
Abraham

No event to capture ajax response on success

Hello there!

Is there a way to capture the ajax response on successful upload? I don't find it in the documentation. Thanks!

can i access files before they are sent to the server eg replace the URL with ref or v-model something like this

<template #message> Upload/Drop File Here

                            </DropZone>

What if I want the message zone to stay, even if a file has been added ?

I noticed that a v-if is present in the message slot causing this part to disappear if a file has been added.
Is there a way to prevent that if I want the message to be displayed no matter what ?

Could you please tell me how to change the default text "drop here"?

Hi
I want to change the default text in this module from "drop here" to something else, how should I do it?

Make delay between send files

How can I set a delay to send multiple files?

See this article: https://theraloss.com/dropzonejs-upload-items-with-delay-between-them

Multiple dropzones on a page

Hello.
When using two or more drop zone components on the same page, a bug occurs. When you click on the first component, the file selection window opens, after selecting the file, the file selection window of the second component immediately opens. When closing the second window, both components break without an error, they just don't work. A unique ID or ref does not correct the situation.
Do you have any suggestions on how to fix this?

Thank you and I apologize for my English.

show images in dropzone area getting from db

Hi,

I have uploaded my image file in Laravel storage and have them in db-table. In main page , I would like to show the respective already uploaded image file in the dropzone widget. How can I achieve that? Can you please help me on that?

Thanks in advance!

Can you give me some hints for implementation?

i need the removeallfiles function.
Can you give me some hints for implementation?

thx)

No events catched

Hello,

I have attached all events to a callback function. However when I drop, upload etc no events are catched.
What am I doing wrong?

How do I customize the text in the dropzone?

It says 'Drop here', how do I change it?

Demo doesn't work

Demo doesn't work, fix please

Some dropzone item controls appear over active modal dialogs

Style dropzone__item-controls conflicts with some modal dialogs because of huge z-index. I fixed this issue using such patch but I think it's better to make some setting for z-index.

--- node_modules/dropzone-vue/dist/drop-zone.common.css	2022-01-05 01:32:20.000000000 +0300
+++ node_modules/dropzone-vue/dist/drop-zone.common.css	2021-12-30 17:16:13.185332736 +0300
@@ -166,7 +166,7 @@
   padding: 4px; }
 
 .dropzone__item:hover {
-  z-index: 1000; }
+  z-index: 10; }
 
 .dropzone__item {
   position: relative;
@@ -175,7 +175,7 @@
 .dropzone__error-mark, .dropzone__success-mark {
   pointer-events: none;
   opacity: 0;
-  z-index: 500;
+  z-index: 5;
   position: absolute;
   display: block;
   top: 8px;
@@ -249,7 +249,7 @@
 .dropzone__item-controls {
   display: inline-block;
   position: absolute;
-  z-index: 10000;
+  z-index: 100;
   border-radius: 4px;
   top: 8px;
   right: 8px; }
@@ -289,7 +289,7 @@
   border: 1px solid transparent; }
 
 .dropzone__details {
-  z-index: 20;
+  z-index: 2;
   position: absolute;
   top: 0;
   left: 0;
@@ -297,7 +297,7 @@
 
 .dropzone__progress {
   opacity: 1;
-  z-index: 1000;
+  z-index: 10;
   position: absolute;
   left: 50%;
   top: 50%;
--- node_modules/dropzone-vue/dist/dropzone-vue.common.css	2022-01-05 01:32:20.000000000 +0300
+++ node_modules/dropzone-vue/dist/dropzone-vue.common.css	2021-12-30 17:14:47.613674808 +0300
@@ -166,7 +166,7 @@
   padding: 4px; }
 
 .dropzone__item:hover {
-  z-index: 1000; }
+  z-index: 10; }
 
 .dropzone__item {
   position: relative;
@@ -175,7 +175,7 @@
 .dropzone__error-mark, .dropzone__success-mark {
   pointer-events: none;
   opacity: 0;
-  z-index: 500;
+  z-index: 5;
   position: absolute;
   display: block;
   top: 8px;
@@ -249,7 +249,7 @@
 .dropzone__item-controls {
   display: inline-block;
   position: absolute;
-  z-index: 10000;
+  z-index: 100;
   border-radius: 4px;
   top: 8px;
   right: 8px; }
@@ -289,7 +289,7 @@
   border: 1px solid transparent; }
 
 .dropzone__details {
-  z-index: 20;
+  z-index: 2;
   position: absolute;
   top: 0;
   left: 0;
@@ -297,7 +297,7 @@
 
 .dropzone__progress {
   opacity: 1;
-  z-index: 1000;
+  z-index: 1;
   position: absolute;
   left: 50%;
   top: 50%;

Cannot find module 'drop-zone' or its corresponding type declarations.

I have a problem with using typescript with drop-zone
I already signed dropzone-vue component inside main.ts file
but I get this error inside my component
Cannot find module 'drop-zone' or its corresponding type declarations.

Custom layout

how would you customize the layout, put the thumbs out of the container where you click to send images?

How to get the uploaded images in an Array

Hello,

I could not find if it is possible in the docs, but I would like to retrieve the base64 URLs to use the images on a Canvas, the question is, how Do I get it? Can you please help me ?

I have a component which does it, but I find this "Drop-zone" better.

that's the code I have:

<template>
  <div>
    <div class="file-selector">
      <input class="" ref="fileInput" type="file" @input="pickFile" @click="emitSetImage">
    </div>
       <img :src="image">
</div>
</template>

<script>
export default {

  data() {
  return {
    image: null
   
  }
},
  methods: {
   selectImage () {
    this.$refs.fileInput.click()
    },
    pickFile () {
      let input = this.$refs.fileInput
        let file = input.files
        if (file && file[0]) {
          let reader = new FileReader
          reader.onload = e => {
            this.image = e.target.result
          }
          reader.readAsDataURL(file[0])
      }
    },
     emitSetImage (image) {
      this.image = image
      this.$emit('setImage', image[0])
    },
  } 
}
</script>
<style lang="sass" scoped>
.file-selector
  margin-top: 30px
  border: 1px dashed black
  cursor: pointer
  padding: 50px
  text-align: center
  width: 70%
</style>

Thank you very much.

How to capture server response after successful upload

My server side script returns details about the uploaded files (url and ids). I need to capture this on my vue project but can't find a way with this dropzone vue

Can I define uploaded directory or can get uploaded data/image url?

Hello,

How can we get uploaded image's actual url as I am getting image name but I am not sure where it is being stored and neither I am getting its data/image base64 url.

Thanks.