建立带有文件上传的 React 客户端接收表

2026年8月10日1 次浏览来源:Dev.to阅读原文

正文保留英文原文(机翻易破坏代码与排版),标题/摘要已提供中文

Client intake often requires two types of information: searchable answers and files for review.

This Vite and React example collects both in the same response.

You can try the form without an account.

Ask only what you need The example asks for: the client's name; a work email address; the result they need; an optional target date; up to five briefs or reference files.

Each answer should help someone prepare for the first call.

Leave detailed discovery questions for the call.

Define the form The form schema lives in the React app: Keep the form and field IDs after you collect the first response.

Fillo uses them as stored answer keys.

You can change labels and help text without changing the IDs.

The React app controls the route, layout, styles and what happens after submit.

Fillo handles the schema, validation, uploads and responses.

The SDK renders React controls in the page.

It does not use an iframe.

Send files straight to storage The browser sends each file to the storage connected to the Fillo workspace.

The Vite app does not proxy the file through its own server.

Storage credentials do not go into the browser bundle.

For client files, connect Google Drive, Box, Amazon S3 or an S3-compatible bucket.

Some eligible new workspaces can use temporary Fillo storage while they test.

It accepts files up to 10 MiB, with 100 MiB available per workspace.

Completed files expire after seven days.

Connect your own storage before you use the form for client work.

Run the preview The example still shows the form when no publishable key is present: Preview mode lets you fill in the fields and see the success state.

It does not send a response.

File uploads stay disabled.

Run it locally: Test before you share it Check these cases before a client uses the form: Leave each required field empty and check the error.

Select a file type that the form does not accept.

Test the file count and storage size limits.

Interrupt an upload and try it again.

Submit a test response and find its files in Fillo.

Use the form with a keyboard and on a phone.

Delete the test response and check what happens to its files.

The repository contains the source, screenshots and a checklist for coding agents.

The setup guide explains storage and publishing in more detail.

To collect responses with this example, start with Fillo.

分享