Upload
Queue and recovery
Statement uploads
checking-july.ofx
84 KB
Uploaded
card-july.csv
142 KB
Uploading card-july.csv68%savings-july.csv
The demo transport rejected this file.
open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
open type Html
open type Svg
open type Datastar
let uploadQueueExample =
div {
_dataSignals "{uploadFeedback: ''}"
UploadList.create "Statement uploads"
[ UploadItem.create "upload-complete" "checking-july.ofx" UploadState.Complete
|> UploadItem.withDetail "84 KB"
UploadItem.create "upload-active" "card-july.csv" (UploadState.Uploading (68, 100))
|> UploadItem.withDetail "142 KB"
|> UploadItem.withActions (
Button.create "Cancel"
|> Button.withAttributes [ _dataOn ("click", "$uploadFeedback = 'Upload cancelled. The selected local file remains available to retry.'") ]
|> Button.render)
UploadItem.create "upload-failed" "savings-july.csv" (UploadState.Failed "The demo transport rejected this file.")
|> UploadItem.withActions (
Button.create "Retry"
|> Button.withVariant ButtonVariant.Primary
|> Button.withAttributes [ _dataOn ("click", "$uploadFeedback = 'Retry queued for savings-july.csv.'") ]
|> Button.render) ]
|> UploadList.render
output {
_role "status"
_ariaLive "polite"
_dataShow "$uploadFeedback != ''"
_dataText "$uploadFeedback"
_style "display:none"
_class "mt-2 text-sm text-[var(--fve-muted-text)]"
}
}Empty queue
Statement uploads
No files queued.
open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
open type Html
open type Svg
open type Datastar
let emptyUploadQueueExample =
UploadList.create "Statement uploads" []
|> UploadList.render