std-upload

Level: Atom | Entity: UploadFile | Persistence: runtime

4 states, 6 events, 7 transitions

Live Preview

orbital UploadFileOrbital {
  entity UploadFile [runtime] {
    id : string
    name : string
    description : string
    status : string
    createdAt : string
    fileName : string
    fileSize : number
    uploadStatus : string
  }
  trait UploadFileUpload -> UploadFile [interaction] {
    initial: idle
    state idle {
      INIT -> idle
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "upload", size: "lg" }, { type: "typography", content: "Upload", variant: "h2" }] }, { type: "divider" }, { type: "upload-drop-zone", accept: "*/*", event: "UPLOAD", multiple: false, maxSize: 10485760 }] })
      UPLOAD -> uploading
        (set @entity.fileName @payload.fileName)
        (set @entity.uploadStatus uploading)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "upload", size: "lg" }, { type: "typography", content: "Uploading...", variant: "h2" }] }, { type: "divider" }, { type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], "fileName"] }, { type: "progress-bar", value: 50, showPercentage: true }, { type: "spinner", size: "md" }] })
    }
    state uploading {
      COMPLETE -> complete
        (set @entity.uploadStatus complete)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "check-circle", size: "lg" }, { type: "typography", content: "Upload Complete", variant: "h2" }] }, { type: "divider" }, { type: "alert", variant: "success", message: "File uploaded successfully." }, { type: "typography", variant: "caption", color: "muted", content: ["object/get", ["array/first", "@entity"], "fileName"] }, { type: "button", label: "Upload Another", event: "RESET", variant: "primary", icon: "upload" }] })
      FAILED -> error
        (set @entity.uploadStatus error)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", align: "center", children: [{ type: "error-state", title: "Upload Failed", message: "Something went wrong. Please try again.", onRetry: "UPLOAD" }, { type: "stack", direction: "horizontal", gap: "sm", justify: "center", children: [{ type: "button", label: "Retry", event: "RETRY", variant: "primary", icon: "rotate-ccw" }, { type: "button", label: "Cancel", event: "RESET", variant: "ghost" }] }] })
    }
    state complete {
      RESET -> idle
        (set @entity.uploadStatus idle)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "upload", size: "lg" }, { type: "typography", content: "Upload", variant: "h2" }] }, { type: "divider" }, { type: "upload-drop-zone", accept: "*/*", event: "UPLOAD", multiple: false, maxSize: 10485760 }] })
    }
    state error {
      RETRY -> uploading
        (set @entity.uploadStatus uploading)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "upload", size: "lg" }, { type: "typography", content: "Uploading...", variant: "h2" }] }, { type: "divider" }, { type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], "fileName"] }, { type: "progress-bar", value: 50, showPercentage: true }, { type: "spinner", size: "md" }] })
      RESET -> idle
        (set @entity.uploadStatus idle)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "upload", size: "lg" }, { type: "typography", content: "Upload", variant: "h2" }] }, { type: "divider" }, { type: "upload-drop-zone", accept: "*/*", event: "UPLOAD", multiple: false, maxSize: 10485760 }] })
    }
  }
  page "/uploadfiles/upload" -> UploadFileUpload
}

Loading preview...

Orbital Visualization

Loading visualization...

Entity Fields

Field	Type	Default
id	string	-
name	string	-
description	string	-
status	string	"active"
createdAt	string	-
fileName	string	""
fileSize	number	0
uploadStatus	string	"idle"

States

State	Type
idle	Initial
uploading	-
complete	-
error	-

Events

Event	Payload
INIT	-
UPLOAD	fileName: string
COMPLETE	-
FAILED	-
RETRY	-
RESET	-

Transitions

From	Event	To	Effects
idle	INIT	idle	1 effect
idle	UPLOAD	uploading	3 effects
uploading	COMPLETE	complete	2 effects
uploading	FAILED	error	2 effects
error	RETRY	uploading	2 effects
error	RESET	idle	2 effects
complete	RESET	idle	2 effects