isDragReject not working

[emkis]

I used the useDropzone hook with this options:

{
  maxSize: 5242880, // 5MB
  minSize: 209715, // 204,8 KB
  onDrop: (acceptedFiles: any, rejectedFiles: any) => {
    console.log({ acceptedFiles, rejectedFiles })
  },
}

And when I run console.log with acceptedFiles and rejectedFiles in the onDrop function, I get the right information.
However, the isDragReject property does not work respecting the values of maxSize and minSize.

When i set in the hook options the property multiple: false, then the isDragReject worked correctly when i tried to send more than one file.

Sorry my bad english, but im trying to help 🌟

[emkis]

Example of the problem

You can see here, that when a drag one invalid file, that is logged on the list of rejectedFiles, the property isDragReject was false, but should be true.

And when i tried i set the multiple: false and try to drag multiple files, the isDragReject was correct.

I hope that this help you understand the problem.

[Yaxian]

Thanks, I will check soon.

[Yaxian]

@emkis Hi, could you provide the code snippet to help me reproduce it? Thanks~ 😃

[emkis]

@Yaxian sure.

Template

<div  v-bind="getRootProps()">
  <input v-bind="getInputProps()" />

  <p>isDragActive: {{ isDragActive }}</p>
  <p>isDragReject: {{ isDragReject }}</p>
</div>

Script

<script lang="ts">
import { defineComponent } from 'vue'
import { useDropzone } from 'vue3-dropzone'

export default defineComponent({
  setup(props) {
    const {
      getRootProps,
      getInputProps,
      isDragActive,
      isDragReject,
    } = useDropzone({
      maxSize: 5242880, // 5MB,
      minSize: 209715, // 204,8 KB
      onDrop: (acceptedFiles: any, rejectedFiles: any) => {
        console.log({ acceptedFiles, rejectedFiles })
      },
      multiple: false,
    })

    return {
      getRootProps,
      getInputProps,
      isDragActive,
      isDragReject,
    }
  },
})
</script>

[Yaxian]

Hi, I release v0.0.6.

Could you check this version?

Thanks 😄

[emkis]

@Yaxian, of course, I'm going to try today and already let you know the result

[emkis]

@Yaxian the error unfortunately keeps happening 🤯, how did you test it?

[Yaxian]

I found same issue here, https://stackoverflow.com/questions/41450438/datatransferitems-getasfile-method-returning-null-for-files

The dragenter event doesn't have access to the actual files. It can detect what files are being dragged but it can't access their content. This is why even though the DataTransfer.items object is populated, the DataTransfer.files object isn't, and the getAsItem method cannot be used on DataTransfer.items items.

About DataTransfer, see https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem/getAsFileSystemHandle

When dragging, the file may be instanceof DataTransferItem in drag event, we can get the {kind: "file", type: "image/jpeg"}, but can not get the file size. so minSize and maxSize won't work.

accept works well when dragging.

After drop, we can get the file content, and minSize and maxSize will work.

[emkis]

Wow, it makes sense. At least we learned something new. Thanks for sharing and your time ⚡