AI Frontend · Exercise 5 of 5 Previous
Intermediate
Upload a File and Say What Happened
The route /api/upload is already running in the page: it answers 413 for a file bigger than 1,000 bytes and fails once (500) for a file named flaky.png. Write the click handler for #send.
With no file chosen, #error shows Choose a file first.. Otherwise #status shows Uploading… and the button is disabled while the request runs. On success #status shows Sent: <name> and #error is empty. On 413, #error shows That file is too large.. On any other failure, #error shows Could not send. Try again. and the button works again, so the user can retry.
What Check tests
- With no file, the error says to choose one
- A small file is sent:
Sent: a.png, no error - A file over 1,000 bytes shows
That file is too large. - The first try of
flaky.pngfails with a retryable message - Pressing Send again succeeds and clears the error
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.