What is the difference between loop and opt?

loop is a section that repeats and opt is a section that may or may not happen. Both close with end.

Why not send files through the backend?

They would use its bandwidth and memory, which hurts with large files. Direct upload leaves the backend with credentials and records only.

How long should temporary credentials last?

Long enough for the file size and network, and no longer. Follow your storage service's documentation for the details.

File upload sequence diagram template

Previewed in the “Ink Teal” theme; you can switch themes in the editor

When to use it

Use it to design uploads for a drive, attachments or video, or to settle whether files should pass through your application servers. This is the direct-upload design: the backend only issues credentials and keeps records, and the browser sends file content straight to object storage, so large files do not overload the app.

Make it yours

Small files need no parts: delete the loop and the completion step and upload once.
For instant upload of known files, add an alt after the request: if the hash exists, return the file URL.
If uploads are transcoded or scanned afterward, add a message to a queue after saving the record.

Mermaid code

file-upload-sequence.mmd

sequenceDiagram
    actor U as User
    participant W as Browser
    participant B as App backend
    participant O as Object storage
    U->>W: Choose file
    W->>W: Hash file and split into parts
    W->>B: Request upload with name size hash
    B->>B: Validate type and size
    B->>O: Start multipart upload
    O-->>B: Upload ID
    B-->>W: Upload ID and temporary credentials
    loop Each part
        W->>O: Upload part
        O-->>W: Part checksum
    end
    opt A part fails
        W->>O: Retry that part
    end
    W->>B: Report all parts uploaded
    B->>O: Complete multipart upload
    O-->>B: File URL
    B->>B: Save file record
    B-->>W: Upload complete
    W-->>U: Show file

Ask an AI for one with this structure

Send the prompt below to ChatGPT or Claude, then paste the whole reply into the editor; the code inside is detected automatically.

prompt.txt

Draw a large file multipart upload sequence diagram with Mermaid sequenceDiagram syntax. Participants are User, Browser, App backend and Object storage. The browser hashes the file and splits it into parts, then requests an upload; the backend validates type and size, starts a multipart upload with object storage and returns the upload ID and temporary credentials. Use loop for uploading each part and opt for retrying a failed part. When all parts are uploaded the browser tells the backend, which completes the multipart upload, saves the file record and returns upload complete. Output only the mermaid code block.

FAQ

What is the difference between loop and opt?: loop is a section that repeats and opt is a section that may or may not happen. Both close with end.
Why not send files through the backend?: They would use its bandwidth and memory, which hurts with large files. Direct upload leaves the backend with credentials and records only.
How long should temporary credentials last?: Long enough for the file size and network, and no longer. Follow your storage service's documentation for the details.

More in this category

All templates

Updated 2026-11-11