Add Dropzone/upload component

anmol5varma commented 4 years ago

[x] 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:
- https://github.com/shadcn-ui/ui/issues/163

eps1lon commented 4 years ago

Closing in favor of mui-org/material-ui#22141. Since accessibility is a bit tricky with such a component we probably want to add a standalone one.

oliviertassinari commented 4 years ago

@eps1lon I think that you meant to link mui-org/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-org/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 commented 4 years ago

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

anmol5varma commented 4 years ago

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 commented 4 years ago

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

anmol5varma commented 4 years ago

So what is our final take?

oliviertassinari commented 4 years ago

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

mouimet-infinisoft commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

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

mouimet-infinisoft commented 3 years ago

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 commented 3 years ago

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

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.
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 commented 3 years ago

@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 commented 2 years ago

I want to add my :+1: 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: :credit_card: 47016

liho00 commented 1 year ago

2023 still waiting...

oliviertassinari commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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: :credit_card: 61706

liho00 commented 1 year ago

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 commented 1 year ago

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)

mui / mui-x