Dropzone unexpected behavior

[kamami]

Following the example in the documentation, the dropzone is looking like this when dragging a file with a prohibited type into the zone.

In the preview of the documentation, the state resets after dropping the file.

I am using "react-dropzone": "^14.3.8"

Probably related to this issue: react-dropzone/react-dropzone#1415

import * as React from "react";

import {
  Dropzone,
  DropzoneDescription,
  DropzoneGroup,
  DropzoneInput,
  DropzoneTitle,
  DropzoneUploadIcon,
  DropzoneZone,
} from "@/components/drop-zone";
import {
  FileList,
  FileListDescription,
  FileListHeader,
  FileListIcon,
  FileListInfo,
  FileListItem,
  FileListName,
  FileListSize,
} from "@/components/ui/file-list";

export default function DropzoneDemo() {
  const [files, setFiles] = React.useState([]);

  return (
    <Dropzone
      accept={{
        "image/*": [".jpg", ".png"],
        "application/pdf": [".pdf"],
      }}
      onDropAccepted={setFiles}
    >
      <div className="grid gap-4">
        <DropzoneZone>
          <DropzoneInput />
          <DropzoneGroup className="gap-4">
            <DropzoneUploadIcon />
            <DropzoneGroup>
              <DropzoneTitle>Drop files here or click to upload</DropzoneTitle>
              <DropzoneDescription>
                You can upload files up to 10MB in size. Supported formats: JPG,
                PNG, PDF.
              </DropzoneDescription>
            </DropzoneGroup>
          </DropzoneGroup>
        </DropzoneZone>
        <FileList>
          {files.map((file) => (
            <FileListItem key={file.name}>
              <FileListHeader>
                <FileListIcon />
                <FileListInfo>
                  <FileListName>{file.name}</FileListName>
                  <FileListDescription>
                    <FileListSize>{file.size}</FileListSize>
                  </FileListDescription>
                </FileListInfo>
              </FileListHeader>
            </FileListItem>
          ))}
        </FileList>
      </div>
    </Dropzone>
  );
}

[junwen-k]

Hi @kamami, thank you for reporting this issue!

You're absolutely right — I was able to reproduce the problem, and it appears to occur with version v14.3.8. As you probably already noticed, this seems to be related to the react-dropzone library itself, as earlier versions do not exhibit the same behavior.

Unfortunately, this means there isn't much we can address on our side directly. Hopefully, the issue will be resolved in an upcoming update of the library.

Thanks again for bringing this to our attention!

[junwen-k]

Actually upon diving deeper, it appears that the current behavior is the expected behavior.

https://react-dropzone.js.org/#!/Styling%20Dropzone

Try dropping non-image files into the Dropzone. The border stays red even after dropping into the dropzone. 👀

Perhaps the name isDragReject is a little misleading, I might need to relook into the styling if that's the case.

[kamami]

Actually upon diving deeper, it appears that the current behavior is the expected behavior.

https://react-dropzone.js.org/#!/Styling%20Dropzone

Try dropping non-image files into the Dropzone. The border stays red even after dropping into the dropzone. 👀

Perhaps the name isDragReject is a little misleading, I might need to relook into the styling if that's the case.

That would be awesome if you could look into it 👍🏻

[kamami]

Were you able to look into it? Someone left a comment that might be useful:
react-dropzone/react-dropzone#1415 (comment)