React-admin: file upload not working

[mahdinba97]

What you were expecting:
The file would show in the file upload box after dragging or selecting it.

What happened instead:
Nothing is shown after the file is dragged or selected

Steps to reproduce:
create a simple tabbed form with a file upload component in it

Related code:

<FormTab label="Files">
<ImageInput source="mainImage" label="Main Image" accept="image/*">
    <ImageField source="mainImage" />
</ImageInput>
<ImageInput source="images" label="Images" multiple accept="image/*">
    <ImageField source="images" />
</ImageInput>

<FileInput
    source="game"
    label="Game File"
    accept="application/zip"
    placeholder={<p>Drop your file here</p>}>
    <FileField source="gameZip" />
    <br />
</FileInput>
<br />
<FileInput source="gif" label="Gif" accept="application/gif">
    <FileField source="gif" />
</FileInput>
</FormTab>

Environment

• React-admin version: 2.9.4
• Last version that did not exhibit the issue (if applicable): ...
• React version: 16.8.6
• Browser: Google Chrome Version 75.0.3770.142

[seehou]

Did you add the upload decorator like this?
https://marmelab.com/react-admin/DataProviders.html#decorating-your-data-provider-example-of-file-upload

[pooriyababaei]

Did you add the upload decorator like this?
https://marmelab.com/react-admin/DataProviders.html#decorating-your-data-provider-example-of-file-upload

I think decorator is not related to fileinput. I've built the form-data upload feature in my custom data provider and i have the same issue but ImageInput works properly.

[Kmaschta]

Thank you for opening this issue. In order to confirm it, we'll have to reproduce it.
As explained in the bug report template, please fork the following CodeSandbox and repeat your issue on it:

https://codesandbox.io/s/github/marmelab/react-admin/tree/master/examples/simple

This is the simplest way to confirm a bug is related to the React Admin codebase.

[mahdinba97]

I added a simple fileinput component after the imageinput in postedit.js.
it works with pdf and images but not with zip files.

https://codesandbox.io/s/simple-6rxkf?fontsize=14&module=%2Fsrc%2Fposts%2FPostEdit.js

[pooriyababaei]

In my project which React Admin v2.9.4 is installed, FileInput accepts nothing.

[rkyrychuk]

I added a simple fileinput component after the imageinput in postedit.js.
it works with pdf and images but not with zip files.

https://codesandbox.io/s/simple-6rxkf?fontsize=14&module=%2Fsrc%2Fposts%2FPostEdit.js

@mahdinba97 Your example works and accept zip on my Mac, but not on Windows.

I've experienced same issue before, and finally debugged, that Windows often incorrectly identify mime types and use application/octet-stream. So, right now I've removed accept property and checking file type on server.

[rudza]

Is this fixed? @djhi

[djhi]

There is no issue in react-admin here. Open a new one if you think there is