An upload queue with progress, cancel and retry
Each file gets its own AbortController, kept in a ref. Cancelling the video stops its fake upload; Retry starts it again with a new controller. Pick some files yourself to watch the bars.
File uploads need a file input and a drop zone that validate type and size, instant previews through object URLs that are freed afterwards, a progress bar, cancel and retry; reorderable lists need pointer events for mouse, pen and touch plus a keyboard way to move items with spoken announcements.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Add a Remove button to each preview in the drop zone example, and make sure its object URL is freed.
Add Move up and Move down buttons to the sortable list as an extra non-drag alternative.
Explain it without notes
How do you show an instant preview of a chosen image, and what must you clean up?
How do you build an accessible drag-and-drop upload area?
How would you implement upload progress and cancel in React?
How do you make a sortable list accessible?
Preview
Console
Nothing logged yet.Expected console output
photo.jpg done, video.mp4 cancelled
photo.jpg done, video.mp4 done