Add file input component #2469

Mrtenz · 2024-06-07T10:00:17Z

This adds a new component FileInput which can be used to upload files to the Snap. It can be used in forms, and the files are sent to the Snap using a new FileUploadEvent, as well as a new files property in FormSubmitEvent.

<Field label="Upload file">
  <FileInput name="file" accept={['image/*']} compact />
</Field>

socket-security · 2024-06-13T11:32:00Z

New dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/@metamask/file-upload-example-snap@0.0.0-use.local	None	`0`	0 B

View full report↗︎

codecov · 2024-06-13T11:36:58Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 94.35%. Comparing base (151e6c5) to head (41426c5).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #2469   +/-   ##
=======================================
  Coverage   94.34%   94.35%           
=======================================
  Files         439      440    +1     
  Lines        9054     9070   +16     
  Branches     1391     1398    +7     
=======================================
+ Hits         8542     8558   +16     
  Misses        512      512

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

packages/snaps-sdk/src/jsx/components/form/FileInput.ts

packages/examples/packages/file-upload/src/index.test.tsx

FrederikBolding · 2024-06-14T09:55:37Z

packages/examples/packages/file-upload/src/index.tsx

+    event.type === UserInputEventType.FileUploadEvent &&
+    event.file !== null
+  ) {
+    const { files } = (await snap.request({


Good argument for letting context be updatable, but context currently has a quite small limit so you wouldn't be able to store large files there anyway

packages/snaps-sdk/src/jsx/validation.ts

packages/snaps-controllers/src/interface/utils.ts

packages/snaps-sdk/src/types/interface.ts

packages/snaps-sdk/src/types/handlers/user-input.ts

Co-authored-by: Frederik Bolding <frederik.bolding@gmail.com>

Mrtenz force-pushed the mrtenz/file-input-component branch 2 times, most recently from 789eea2 to 72299e3 Compare June 13, 2024 11:24

Mrtenz marked this pull request as ready for review June 13, 2024 11:42

Mrtenz requested a review from a team as a code owner June 13, 2024 11:42