File Field

[logaretm]

What

File fields are essential to many forms as they allow users to upload and sometimes edit local files and send them over to the server.

We need to build an abstraction that makes building these components easier.

How

It is still unclear what the JTBDs are for this. I will quickly put some thoughts into the moving parts of a File Input.

Anatomy

Aside from labels, we may have the following parts to help our users build.

Picker Trigger

This would trigger the native file picker UI, its implementation is straightforward, we can add a hidden file input and click it. Or we can use the FileSystem API if it has wider and sufficient support.

I will need to brush up on that.

File Preview

Some files can be previewed, like images. Adding a mechanism to preview the file if a preview is available can be very helpful. Usually implemented with URL.createObjectURL API.

There are some concerns with this:

• Files will need to be cleared from memory with URL.revokeObjectURL.
• Files can be too large, causing a performance issue when generating a local URL for it.

Uploading

In addition to that, there is still the process of uploading files.

I'm not sure if we should step into either way and how much we can abstract there, but it is something we need to think about.

via Submit

Files can be uploaded with form submits using multipart encoding and can be easily collected and transported with FormData objects which we already support well.

Upload Keys and References

Uploading with the traditional submit is suitable traditional forms, but some inputs immediately start uploading as soon as a file is picked, I can think of two reasons:

• API doesn't support multipart requests, very common with GraphQL.
• Better UX, since the file is already uploaded, the submit later will feel instant.

The mechanism is similar for both use-cases, the app usually requests an upload key and sends the file to an endpoint with the upload key provided. If valid, the file is accepted and a response is returned usually with a reference value to that file, like a media ID of sorts.

When the form is submitted later, the media key is used to reference the file. Ensuring the submission itself is serializable as JSON or any other format that does not require binary data.

A11y

There is no official WCAG Aria pattern for file input, nor it seems like there are suitable aria attributes to define custom elements as such.

React ARIA does have a FileTrigger component, so we can take hints into making it accessible, but it requires another component to be used with it. So it just feels like a clicker handler wrapper.

I think we can do better, but let's research this more.

Resources and Previous work

These are the libraries that inspire me when looking at file uploading, some of them are a bit too large for our scope but taking the key learnings from them will be a good idea.

• React ARIA's FileTrigger
• Dropzone
• Upload Thing
• FilePond