Media Uploads (Web)

Overview

1. User creates or edits an existing Look or Item. In the upload section of the new/edit form. we pass the item or look ID as a context prop on the FileUploader component.
2. User picks one or more images with the standard file picker.
3. For each file to be uploaded, client makes a POST request to the /resources/upload endpoint
4. Upload endpoint creates a new record in the Media table with a CUID key and returns an AWS S3 Presigned Url
5. Client makes a PUT request for each file to the presigned url.
6. When the file upload is complete, a lambda function Watcher is triggered by the S3ObjectCreated event.
7. Watcher function decodes the S3 object to determine the key, and looks for a corresponding Media table entry with that ID. If found, Watcher uses sharp to determine file size, orientation and dimensions and writes that metadata to the Media table.
8. Watcher writes an entry in the itemsToMedia or looksToMedia join tables. This connects the media item with the item or look passed in context above

Diagram v7.16.2024

(click to open at actual size)

Source Code

Source

upload-flow.sd

-- render at https://sequencediagram.org
entryspacing 0.7
frame #lightblue Upload Flow (AWS Web) – v1.0

participantspacing 3
bottomparticipants

actor "User" as user #lightblue
entity "Web Client" as web #orange
entity "Server" as server #lightgreen
database "Item / Look" as item #lightgray
database "Media" as media #lightgray
entity "S3" as s3 #pink
entity "Watcher " as watcher #purple

lifelinestyle user #gray:1:solid
lifelinestyle web #gray:1:solid
lifelinestyle media #gray:1:solid
lifelinestyle item #gray:1:solid
lifelinestyle server #gray:1:solid

user -#blue> web: Create Item
web ->> server: Create Item
server ->> item:Create Item
activate item
item -->> web:return item id
deactivate item
web -->> user: Redirect to /items/$id

rbox over user:Pick File(s) and
Click "Upload"
user -#blue> web:Upload File(s)
web -> server:POST /resources/upload
<color #gray>file name, type, displayOrder
and item or look ID
server ->> media:Create Media Record

activate media
media -->> server:return Media ID
deactivate media

server -->> web:presigned S3 url
web -> s3:PUT file to presigned url
<color #gray>Key matches ID of media record
activate s3
s3 --> s3:
s3 --> s3:
s3 -> watcher:Upload Complete
s3 --> web:Upload Complete
deactivate s3
box over web:Image Thumbnail Appears
watcher -> media:Request Media Record
<color #gray>Key matches Media ID
activate media
media -->> watcher:return Media Record
deactivate media

activate watcher
watcher -> media:Update Metadata
<color #gray>dimensions, orientation
deactivate watcher

watcher -> server:Connect Media <color #gray>link to item/look