Add file input component

[connor-baer]

Visual

These are mockups and should not be used as the final design.

Context

This component can be used when a user is asked to upload any type of file. Examples include a profile photo, documents for verification, or paper receipts.

State

The component has multiple states which are not mutually exclusive:

1. Hovered
2. Focused
3. Active (when a user is dragging files over the dropzone)
4. Uploading
5. Single file vs multiple files: when multiple files can be uploaded, the component displays the selected files in a list.

Progressive enhancement

The component should be built on top of the native file input element (<input type="file" />). This ensures the greatest compatibility and best user experience on all devices.

Further reading: Using files from web applications (MDN)

[long-lazuli]

Hi folks,
In POS Pro, we did exactly a component like this,
I'd like to check with you if it can be integrated into Circuit.

As this checklist seem to be fulfilled...

The component has multiple states which are not mutually exclusive:
1. Hovered
2. Focused
3. Active (when a user is dragging files over the dropzone)
4. Uploading
5. Single file vs multiple files: when multiple files can be uploaded, the component displays the selected files in a list.

What would be the pattern you want to use in this Component ?
I can see mostly two cases:

1. the value sent by the form is the content of the file, as a classic Input[type=file];
2. when a file is selected, an asynchronous transformation is done to obtain the values.

We do the number Two: onFileSelection / FileChange, we upload the file content to a server, and retrieve an Id (it could be an url, with S3); we use the response of this request as values for the component.

It should be usable as a controlled & uncontrolled input, I imagine.

Here are some screenshots. We will have to work on it soon, I'd rather do it in the right direction if you think it can be valuable for Circuit.

[harshilparmar]

Hey @connor-baer Can I contribute to this. Or anything that can get me going for this repo. I really wants to contribute to design system.

[connor-baer]

Thanks for the offer, @harshilparmar, I appreciate your enthusiasm! Unfortunately, we currently don't accept outside contributions:

Don't work at SumUp?

In an effort to give back to the community from which we learn so much, our documentation and code are public. However, the intended use case for Circuit UI is purely internal for our product, so please treat this as a read-only project and inspiration only.