ImageInput.accept has no effect in Chrome on localhost

[magicxor]

What you were expecting:
accept attribute of ImageInput always affects file types in the file picker

What happened instead:
For some reason, it works as expected in CodeSandbox, but it doesn't work on localhost (there is no limitation by file type).

The bug can be reproduced on Windows (Chrome Version 108.0.5359.99 (Official Build) (64-bit)) and on Ubuntu (google-chrome Version 108.0.5359.124 (Official Build) (64-bit)).

I think it's not a Chrome bug because a plain <input type="file" accept=".png,.svg,.jpg,.jpeg" /> on the same page works as expected.

Steps to reproduce:

1. Clone the repo
2. type yarn install && yarn run start
3. Go to http://localhost:3000/#/user/112 and click on the dropzone

Related code:
https://github.com/magicxor/react-admin-repro-ImageInput-accept-bug

Environment

• React-admin version: 4.6.1
• Last version that did not exhibit the issue (if applicable):
• React version: 18.2.0
• Browser: Chrome Version 108.0.5359.99 (Official Build) (64-bit)
• Stack trace (in case of a JS error):

[slax57]

Could you try with accept="image/png,image/svg+xml,image/jpg,image/jpeg" instead?

[magicxor]

Could you try with accept="image/png,image/svg+xml,image/jpg,image/jpeg" instead?

Yes, sure. It works, but I don't understand why. Do you have any assumptions about it?

Unfortunately, this workaround also adds some extra (unwanted) extensions to the list: *.pjp, *.pjpeg, *.jfif, *.svgz

[slax57]

@magicxor I've taken it straight from the docs that:

accept must be a valid MIME type, according to input element specification or a valid file extension.

However, the docs also currently state that we can set accept to .png,.gif,.jpg,.jpeg, which might be wrong according to your tests.

In the code, we simply pass the accept prop to react-dropzone.
And their docs state:

The value must be an object with a common MIME type as keys and an array of file extensions as values (similar to showOpenFilePicker's types accept option).

useDropzone({
  accept: {
    'image/png': ['.png'],
    'text/html': ['.html', '.htm'],
  }
})

Can you try with such an accept prop, to see if it solves your issue?
If so, I'll update the RA docs with this example.

[magicxor]

@slax57 unfortunately, react-admin uses react-dropzone v12.1.0 where accept is defined as accept?: string | string[];: https://github.com/react-dropzone/react-dropzone/blob/v12.1.0/typings/react-dropzone.d.ts

I have tried

<ImageInput
    label={label}
    source={source}
    multiple
    validate={customValidate}
    options={{
        accept: ['.png', '.jpg', '.jpeg', '.svg'],
    }}
>
    <ImageField title={label} />
</ImageInput>

<ImageInput
    label={label}
    source={source}
    multiple
    validate={customValidate}
    accept={['.png', '.jpg', '.jpeg', '.svg']}
>
    <ImageField title={label} />
</ImageInput>

but it doesn't help either.

[slax57]

Alright, thanks for your investigations.

Here's what I suggest.
For the current version I'll simply fix the docs to remove the broken .png,.gif,.jpg,.jpeg example.
In parallel, if you would like, you can open a PR to submit bumping the react-dropzone version, to allow for more fine-grained customization of the accept prop. This PR should target the next branch as it's an enhancement and not really a bug fix.
Would you like to open it?
Thanks

[magicxor]

Thank you, I'll look into it.