SlopUI.Components.Upload (SlopUI v0.1.0)

Copy Markdown View Source

File upload dropzone and entry list for LiveView uploads.

Summary

Functions

Renders a dropzone and the list of upload entries for a LiveView upload.

Functions

upload(assigns)

Renders a dropzone and the list of upload entries for a LiveView upload.

# in mount/3
allow_upload(socket, :attachments, accept: ~w(.png .jpg .pdf), max_entries: 5, auto_upload: true)

# in the template, inside a form with phx-change and phx-submit
<.upload upload={@uploads.attachments} label="Attachments" hint="PNG, JPG or PDF up to 8 MB" on_cancel="cancel-upload" />

# in the LiveView
def handle_event("cancel-upload", %{"ref" => ref}, socket), do: {:noreply, cancel_upload(socket, :attachments, ref)}

Drag and drop, click-to-browse, keyboard access (the file input is focusable and labelled), progress, image previews, per-entry and upload-level errors are all handled. Errors are translated with SlopUI.translate_upload_error/1.

Attributes

  • upload (Phoenix.LiveView.UploadConfig) (required)
  • label (:string) - Defaults to nil.
  • description (:string) - Defaults to nil.
  • hint (:string) - shown inside the dropzone, e.g. accepted types and size. Defaults to nil.
  • on_cancel (:string) - event name pushed with phx-value-ref to cancel an entry. Defaults to nil.
  • compact (:boolean) - single-row dropzone. Defaults to false.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.