Upload / Download Center
Everything interviewers ask about files on one page: a drag-drop zone, a multi-file input with real validation, a hidden picker that forces the filechooser event, and downloads whose filenames are stamped at click time, so your test must capture the download and read its contents. New to file handling? Warm up on the basic upload and download widget first.
Upload
Allowed: .txt .csv .json .png, max 1 MB each. Invalid files land in the list with a visible reason, they are not silently dropped.
0 accepted · 0 rejected
Download
Names are stamped at click time: capture the download event, read suggestedFilename(), save it, open it, assert the contents.
The CSV contains one row per accepted upload (name, size, type). Upload first, then download, then assert the row count matches 0 accepted files.
Last generated download: none yet
Drills
- setInputFiles. Upload two valid files through
file-inputand assert both rows show the OK pill and the accepted count reads 2. - Validation. Upload a fake
malware.exe(any bytes, wrong extension) and assert its row is red with the reason "type not allowed", while the accepted count stays unchanged. - Filechooser. The hidden-picker button opens a chooser from a detached input: handle it with
page.waitForEvent('filechooser'), notsetInputFileson a visible input. - Drag and drop. Use
DataTransferinpage.evaluate(or dispatch drop events) to drop a file onto the dropzone and assert it lands in the list. - Dynamic download. Click the CSV button, capture the download, assert the filename matches
upload-report-\d+\.csv, save it, and assert its line count is accepted files + 1 header. - Static download. Download sample.txt and assert its exact contents.