mui / mui/base-ui

Add new Dropzone/File Upload component

Open
#1,492 2 comments 31 reactions 0 assignees View on GitHub
scope: new proposal type: new feature waiting for 👍
Dominant language
TypeScript
Stars
10.9k
Forks
543
Avg merge
1d 20h
Merged PRs (30d)
101

Description

## Summary

It would be great to have an unstyled component for handling file(s) selection. Possible structure:

```typescript jsx
import * as React from 'react';
import { FileUpload } from '@base-ui-components/react/file-upload';

export default function ExampleFileUpload() {
return (

Select file

);
}
```

Or with a drop zone:

```typescript jsx
import * as React from 'react';
import { FileUpload } from '@base-ui-components/react/file-upload';

export default function ExampleFileUpload() {
return (

Drop files here

);
}
```

## Examples in other libraries

- https://react-spectrum.adobe.com/react-aria/FileTrigger.html
- https://chakra-ui.com/docs/components/file-upload
- https://ark-ui.com/react/docs/components/file-upload
- Slim layer approach:
- https://github.com/shadcn-ui/ui/issues/163
- Public link: https://mui-org.notion.site/Dropzone-upload-component-06f358aa35c34e26bdc3a076c2a66ffc
- Private link: https://www.notion.so/mui-org/Dropzone-upload-component-06f358aa35c34e26bdc3a076c2a66ffc

## Motivation

User requests:

- https://x.com/herkulano/status/2041604647501078846

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.