State machine

A file upload, including the parts that go wrong.

Start the upload, interrupt it, then try again. See how the interface recovers.

PreviewIdle

Add to your project

Keep your references in one place.

material-study.pngExample file

Ready

Start the preview to follow the request.

Local simulation. No files are uploaded.

Implementation Event history & source

Keep the logic separate from the interface. Adapt the source with the Async UI states skill in the full library.

machine.js

How the guards work

Guard the start. No connection? Keep the current state.

Invalidate old work. Each request has an attempt ID.

Finish with evidence. DONE needs 100% progress.

Try a race condition

Cancel the upload, then send an old response. It must stay cancelled. The request ID is what protects it.