Screenplay Submissions · File Upload

Q: How do I upload a file without opening the OS file dialog?

Set the input's files directly on #upload-input — Playwright setInputFiles, Selenium send_keys(path), Cypress selectFile. The dialog is an operating-system window no locator can reach. #upload-dropzone takes the same file as a drag-and-drop payload.

Q: How do I assert that an upload actually reached the server?

#upload-result shows the client-side name, size and type as soon as a file is chosen — which proves nothing left the browser. With the backend up, the server echo { received: } lands in #upload-server-result; assert that instead.

A real file input plus a drag-and-drop zone. Selecting a file shows its name, size and type; Upload POSTs it to a live backend.

Send us your script. The studio reads the filename, the size, and nothing else.

File Upload is a medium Forms & Inputs challenge on Fun UI Playground. A real file input plus a drag-and-drop zone. Selecting a file shows its name, size and type; Upload POSTs it to a live backend. It needs the site’s live backend for real HTTP behavior. Every interactive element carries a stable id and data-testid prefixed with “upload-”, and the techniques it exercises are set input files, drag-drop upload zones, assert file metadata, POST multipart/binary.

At a glance

Category: Forms & Inputs
Difficulty: medium
Teaches: set input files · drag-drop upload zones · assert file metadata · POST multipart/binary
Backend: Needs the live /api backend
Locators: Stable id and data-testid, prefixed upload-

Selectors on this page

Locator	What it is
`#upload-input` `#upload-dropzone` `#upload-submit`	File input: #upload-input · drop zone: #upload-dropzone · submit: #upload-submit
`#upload-result`	Client-side result (name / size / type) renders in #upload-result as soon as a file is chosen
`#upload-server-result`	With the backend up, the server echo lands in #upload-server-result ({ received: <bytes> })

Frequently asked questions

How do I upload a file without opening the OS file dialog?

Set the input's files directly on #upload-input — Playwright setInputFiles, Selenium send_keys(path), Cypress selectFile. The dialog is an operating-system window no locator can reach. #upload-dropzone takes the same file as a drag-and-drop payload.

How do I assert that an upload actually reached the server?

#upload-result shows the client-side name, size and type as soon as a file is chosen — which proves nothing left the browser. With the backend up, the server echo { received: <bytes> } lands in #upload-server-result; assert that instead.

More Forms & Inputs

Updated 2026-09-07

Fun UI Playground — all challenges, bug hunts, getting started, glossary, about.