Add Dropzone/upload component

[anmol5varma]

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Currently, we have components for a lot of input fields in material-ui npm but we don't have any component for file upload, only a demo in the documentation.

Examples

https://ant.design/components/upload/#header

I would love to have something along the lines of these to be readily available in the Material UI library.
Features like these decide which library to opt for in a number of scenarios.

import FileUploader from '@material-ui/core/FileUploader';

Motivation 🔦

I am currently working on a project using material-ui and had to create a native component to upload files.
A lot of devs like me using material library might have faced a similar problem. A lot of lives will become better apparently.

Since I have found a way for me, I can pick up this feature if we choose to go ahead.

Benchmark

• Read-only: https://mui-org.notion.site/Dropzone-upload-component-06f358aa35c34e26bdc3a076c2a66ffc
• Source: https://www.notion.so/mui-org/Dropzone-upload-component-06f358aa35c34e26bdc3a076c2a66ffc
• Slim layer approach:
  • enhancement request: dropzone shadcn-ui/ui#163

[oliviertassinari]

@eps1lon I think that you meant to link mui/material-ui#22141.

I'm reopening as I think there is a potential for a broader solution to the upload button demo we have in the documentation. We could have a simple component mui/material-ui#22141 and another one with more advanced features (here). This more advanced component could handle: dropzone, image preview, queuing, etc. I have been keeping track of it in https://trello.com/c/uKckCoKm/1709-dropzone-upload-component. I also suspect it could be a candidate for "enterprise".

[oliviertassinari]

Actually, it could also have been a duplicate of mui/material-ui#9716

[anmol5varma]

https://mdbootstrap.com/plugins/react/file-upload/
https://ant.design/components/upload/#header

I would love to have something along the lines of these to be readily available in the Material UI library.
Features like these decide which library to opt for in a number of scenarios.

[JitendraBhamidipati]

react-dropzone This might help you. This module is good , I am using it with material-ui and styling it as needed.

[anmol5varma]

So what is our final take?

[oliviertassinari]

@anmol5varma I have added the item in the public roadmap board: we will try to get to it, later next year.

[mouimet-infinisoft]

HI folks, I have developed an Upload component for personal use, I would be interested in adapting to Material-UI. I read documentation on how to contribute. Before going further, is there something done on this one? Anyone wants to share? Regards!

[oliviertassinari]

@mouimet-infinisoft a possible great first step would be to share what you have built as a codesandbox. This would allow to start a conversation on how to best approach the problem.

[mouimet-infinisoft]

@oliviertassinari ok perfect, I will prepare a sandbox this week end to open up the discussion! :)

[mouimet-infinisoft]

Here is a very very basic draft to open discussion.

https://codesandbox.io/s/react-mui-file-upload-forked-pu8qk?file=/src/FileUpload/FileUpload.tsx

[oliviertassinari]

@mouimet-infinisoft great, what I would propose for the solution is to approach the problem in two phases:

1. The first part would be to create a useUpload() component. Something that is headless hosting all the logic. It would support a dropzone, and a list of pending items to upload or to upload directly to the server. It would also support a single vs. multiple upload mode. This is important to allow developers to heavily customize it.
2. The second part would be to build a styled components, something ready to be used. Material Design doesn't provide guidances, so we will need to be a bit creative.

[JitendraBhamidipati]

@oliviertassinari I have a made a small component see if it helps, here its sandabox link. The issue i see is while uploading a pic it shakes a bit. Can work on it if its okay.

[TheRealCuran]

I want to add my 👍 and also point to https://github.com/TheRealCuran/material-ui-dropzone/tree/kaw/feat/typescript-mui-v5 which is a fork of https://github.com/Yuvaleros/material-ui-dropzone converted to TypeScript rebuilt on top of MUIv5

The fork is not perfect (and I probably need to check my internal version for any missing fixes/updates), but it is working for me with the dialogue version for a while now. Feel free to contact me for consultation on a proper, integrated MUI version of this.

In case it might help speed up the implementation: my Order ID is: 💳 47016

[liho00]

2023 still waiting...

[oliviertassinari]

2023 still waiting...

It's a fair component. Our product strategy so far has been to focus on leading or being on a trajectory to sustain leadership in each component segment before expanding to another one.

We might change this in the future, significantly lowering our execution quality bar for the sake of covering more ground. We will see.

[mickdewald]

2023 still waiting...

It's a fair component. Our product strategy so far has been to focus on leading or being on a trajectory to sustain leadership in each component segment before expanding to another one.

We might change this in the future, significantly lowering our execution for the sake of covering more ground. We will see.

Sensible approach.
But I would love to see a MUI version of a drop zone component for sure!
Keep up the good work!

[TheRealCuran]

It's a fair component. Our product strategy so far has been to focus on leading or being on a trajectory to sustain leadership in each component segment before expanding to another one.

We might change this in the future, significantly lowering our execution for the sake of covering more ground. We will see.

It would be really appreciated if you could add new components before reaching perfection with the existing ones. Especially basic stuff like a dropzone/file upload. Again, I am willing to help with integrating my branch into MUI (I do suspect that will need some considerable changes, since I basically hacked it up and "just made it work")

And again: if it helps to speed it up, we are customers: 💳 61706

[liho00]

2023 still waiting...

It's a fair component. Our product strategy so far has been to focus on leading or being on a trajectory to sustain leadership in each component segment before expanding to another one.

We might change this in the future, significantly lowering our execution for the sake of covering more ground. We will see.

Glad to hear your reply, sound like a nice approach, will definitely try it out once its available.

For anyone who seeking dropdown & file upload component, do try filepond https://pqina.nl/filepond/ as alternative for now.
I been searching a lot of upload components, filepond is the best that I found.

[TheRealCuran]

For anyone who seeking dropdown & file upload component, do try filepond https://pqina.nl/filepond/ as alternative for now. I been searching a lot of upload components, filepond is the best that I found.

Oh, Filepond looks really nice. Will look at it soon and might use that in the future! Thanks.

But yeah, a native MUI solution would be really appreciated! (:credit_card: 61706)