Dropzone does not seem to accept Markdown files

[kimfucious]

What package has an issue

@mantine/dropzone

Describe the bug

Hi there.

I'm loving Mantine; thanks!

For some reason, I can't seem to get DropZone to accept a Markdown file. DropZone status is always rejected: true.

It looks like text/markdown is in the spec, but nothing seems to work for me besides removing the accept prop.

Markdown files dropped and selected do get uploaded; but I'd like to know anyone knows what could be put in the accept prop that would work.

<Dropzone
    onDrop={(files) => handleImport(files)}
    onReject={(files) => console.log("rejected files", files)}
    maxSize={5 * 1024}
    multiple={false}
    accept={[
        ".md",
        ".markdown",
        "text/markdown",
        "text/*",
    ]}
>
    {(status) => dropzoneChildren(status, theme)}
</Dropzone>

In which browser did the problem occur

Chrome

If possible, please include a link to a codesandbox with the reproduced problem

No response

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

No response

Possible fix

No response

[rtivital]

Dropzone does not work with react 18. If you need it, either downgrade your react to 17 or upgrade all mantine packages to 5.0 alpha version – https://v5.mantine.dev/

[kimfucious]

Thanks for confirming that, @rtivital

[rtivital]

Fixed in 5.0

[ddxgz]

Hi, this seems coming back again. I'm using the below options. When I move a markdown file to the dropzone, it shows reject, but the file is still got uploaded.

  <Dropzone
    openRef={openRef}
    onDrop={handFileUpload}
    className={classes.dropzone}
    radius="md"
    maxSize={30 * 1024 ** 2}
    accept={[
      '.md',
      '.markdown',
      'text/markdown',
      'text/*',
      'text/plain',
    ]}
 >
    <div style={{ pointerEvents: 'visible' }}>
      <Group justify="center">
        <Dropzone.Accept>
          <IconDownload
            style={{ width: rem(50), height: rem(50) }}
            color={theme.colors.blue[6]}
            stroke={1.5}
          />
        </Dropzone.Accept>
        <Dropzone.Reject>
          <IconX
            style={{ width: rem(50), height: rem(50) }}
            color={theme.colors.red[6]}
            stroke={1.5}
          />
        </Dropzone.Reject>
        <Dropzone.Idle>
          <IconCloudUpload
            style={{ width: rem(50), height: rem(50) }}
            stroke={1.5}
          />
        </Dropzone.Idle>
      </Group>

      <Text ta="center" fw={700} fz="lg" mt="xl">
        <Dropzone.Accept>Drop files here</Dropzone.Accept>
        <Dropzone.Reject>Accepted file less than 30mb</Dropzone.Reject>
        <Dropzone.Idle>Upload file</Dropzone.Idle>
      </Text>
      <Text ta="center" fz="sm" mt="xs" c="dimmed">
        Drag&apos;n&apos;drop files here to upload. We can accept only files
        that are less than 30mb in size.
      </Text>
    </div>
 </Dropzone>

I'm using the versions:

"@mantine/core": "^7.6.2",
"@mantine/dropzone": "^7.6.2",
"react": "^18.2.0",