adobe / adobe/react-spectrum

Add a file input component that works with forms

Open
#7,980 1 comment 5 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### Provide a general summary of the feature here

I'm building a form that includes a few sections that require file uploads. It would be nice if I could use the existing form API to handle this scenario. I found [this discussion](https://github.com/adobe/react-spectrum/discussions/5486#discussioncomment-7695236) that covers this topic — has there been any progress made since then? If not, and if there's still interest in implementing this, I'm happy to give it a go.

### 🤔 Expected Behavior?

```tsx


Name




Files



Add

```

### 😯 Current Behavior

The `FileTrigger` component is currently not composable with the `Form` component.

### 💁 Possible Solution

My current best guess is that this would involve:

1. creating a `FormField` component analagous to `TextField` and `NumberField`
2. extending the `Input` component to be composable with `FormField`

I'm unsure how to tackle 2. as the current implementation of file upload in `FileTrigger` doesn't just use ``. Would appreciate any input on this problem!

### 🔦 Context

n/a

### 💻 Examples

_No response_

### 🧢 Your Company/Team

_No response_

### 🕷 Tracking Issue

_No response_

Contributor guide

Open the contributing guide

Research direction

Read the existing Form, FileTrigger, TextField, NumberField, and Input implementations, then review the linked discussion. Determine how file values should participate in form submission and validation; done means a file field composes with Form and the example submits and reports FieldError correctly.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.