File upload question type

[latin-panda]

Description

Implement the file upload question type. The engine is pretty much ready, so the implementation work is mainly the front-end piece.

---

Checklist

• Does it need UI/UX design?
  • If yes, describe the UI/UX requirements or attach a Figma link in the "Design" section.
• Does it need API design?
  • If yes, specify the endpoints, methods, or data structures needed.
• Does it need design around state flow?
  • If yes, outline the state flow requirements.
• Does it need a test plan?
  • If yes, add the test plan as a comment in this task or attach the document.

---

User Stories

As a user filling out a form I want to:

• attach an file from my device
• visualize the filename and file extension
• replace an existing image
• submit any attached file when I send the full submission

Standard question type considerations:

• read-only: if there's a value, a filename with file extension is displayed. Buttons are disabled.
• relevance: full question is hidden if non-relevant
• required: if required, the asterisk and error message should be shown appropriately
• constraint: constraint message is shown in a reasonable location
• clear value: X next to the filename's row to remove
• default value: OUT OF SCOPE FOR FIRST PASS TODO FILE ISSUE

---

Design

• Figma Link

Default state

Loading state

File added and preview state

Error state

Mobile view

Delete confirmation

---

Related Issues

• https://github.com/getodk/web-forms/pull/363/files

[alyblenkin]

I thought this story was coming later?

[latin-panda]

@alyblenkin correct; this is for later. I created this ticket for tracking and to map it with the work done for attachments.

[latin-panda]

Question for later:
The form doesn't preserve the original filename. The file name is a timestamp, for example, 1744407262741.pdf
Does it still display this name in the UI (see Figma)? It may be replaced with a generic message ("file selected").