[upload] Add new Dropzone/Fileupload component

[pushys]

Feature request

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

Summary

Possible structure:

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

export default function ExampleFileUpload() {
  return (
    <FileUpload.Root>
      <FileUpload.Trigger>Select file</FileUpload.Trigger>
    </FileUpload.Root>
  );
}

Or with a drop zone:

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

export default function ExampleFileUpload() {
  return (
    <FileUpload.Root multiple accept="image/png">
      <FileUpload.Dropzone>Drop files here</FileUpload.Dropzone>
    </FileUpload.Root>
  );
}

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

Benchmarks

• 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

[mj12albert]

I see @colmtuite already has ideas about this 👀
radix-ui/primitives#3305

[oliviertassinari]

Equivalent to mui/mui-x#2901 for Material UI. I have linked the benchmarks that we have so far for this.