[BUG] The dragzone is calling the custom validator on hover with a file

[alexandreczg]

Describe the bug When a custom validator is enabled and the user hovers the dropzone with a file dragged, it custom validator gets called with an undefined causing errors in the console.

To Reproduce

1. Just use the official example from here
2. Find a file to drag over the dropzone
3. Observe the errors in the console of your browser

TypeError: Cannot read properties of undefined (reading 'length')
    at nameLengthValidator (test.tsx:6:19)
    at eval (index.js:122:1)
    at Array.every (<anonymous>)
    at allFilesAccepted (index.js:113:1)
    at eval (index.js:578:61)

Expected behavior The custom validator should not be called until the files are actually dropped in the dropzone.

Screenshots

Here's a GIF:

Desktop (please complete the following information):

• OS: MacOs & Windows
• Browser Chrome and Firefox
• Version Latest

[fecoderchinh]

I added ? at file.name?.length.

[alexandreczg]

@fecoderchinh yes, you can build some guardrails on your own, such as:

const validateInputFile = useCallback(
        (file: File | DataTransferItem) => {
            if (file instanceof DataTransferItem) {
                // This is a on drag item that gets passed as an argument to this function
                // it caused errors below, since it does not have the same properties as File
                return null;
            }
...

But I'd like to understand why is the validate function being called before the files are actually released into the dragzone. If you have an expensive validation function, this would cause some performance issues.