Corex.FileUpload
(Corex v0.1.0-beta.4)
View Source
Phoenix implementation of Zag.js File Upload.
Use multipart on the parent form and read %Plug.Upload{} from params in a controller action, as in Phoenix file uploads.
LiveView phx-submit cannot transport raw multipart file bytes over the WebSocket; use a controller route for classic Plug.Upload, or allow_upload/3 for LiveView-native uploads with Corex.FileUploadLive (<.file_upload_live>). Do not combine this Zag component with live_file_input on the same file control.
API
Client DOM dispatches:
corex:file-upload:clear-filescorex:file-upload:clear-rejectedcorex:file-upload:open
Server pushes (from clear_files/2, clear_rejected_files/2, open_file_picker/2):
file_upload_clear_files—%{"id" => id}file_upload_clear_rejected—%{"id" => id}file_upload_open—%{"id" => id}
The template renders a single list of accepted files (Zag’s default). Rejected
files are not listed in the DOM; use on_file_change (e.g. rejectedCount) and
on_file_reject / on_file_reject_client to react to validation failures.
Examples
Minimal
<.file_upload id="file-upload-anatomy-minimal" name="document" class="file-upload">
<:close>
<.heroicon name="hero-x-mark" />
</:close>
</.file_upload>With label
<.file_upload id="file-upload-anatomy-label" name="document" class="file-upload">
<:label>Files</:label>
<:close>
<.heroicon name="hero-x-mark" />
</:close>
</.file_upload>Custom slots
<.file_upload id="file-upload-anatomy-custom" name="document" class="file-upload">
<:dropzone>
<span>Custom dropzone</span>
</:dropzone>
<:open>
<span>Custom trigger</span>
</:open>
<:close>
<.heroicon name="hero-x-mark" />
</:close>
</.file_upload>Multipart form (controller)
<.form for={@form} action={~p"/file-upload/form"} method="post" id={@form.id} multipart>
<input type="hidden" name="file_upload_changeset[_sent]" value="1" />
<.file_upload field={@form[:attachment]} class="file-upload">
<:label>Attachment</:label>
<:close>
<.heroicon name="hero-x-mark" />
</:close>
<:error :let={msg}>
<.heroicon name="hero-exclamation-circle" class="icon" />
{msg}
</:error>
</.file_upload>
<.action type="submit" class="button button--accent w-full">Submit</.action>
</.form>Use multipart on the parent form so %Plug.Upload{} is available on the server for classic uploads. Optional hidden _sent supports used_input? when validating empty submits.
Summary
Functions
Attributes
id(:string)disabled(:boolean) - Defaults tofalse.invalid(:boolean) - Defaults tofalse.read_only(:boolean) - Defaults tofalse.required(:boolean) - Defaults tofalse.name(:string)form(:string)dir(:string) - Defaults tonil.Must be one ofnil,"ltr", or"rtl".max_files(:integer) - Defaults to1.max_file_size(:integer) - Defaults tonil.min_file_size(:integer) - Defaults tonil.allow_drop(:boolean) - Defaults totrue.prevent_document_drop(:boolean) - Defaults totrue.accept(:string) - Defaults tonil.directory(:boolean) - Defaults tofalse.on_file_change(:string) - Defaults tonil.on_file_change_client(:string) - Defaults tonil.on_file_accept(:string) - Defaults tonil.on_file_accept_client(:string) - Defaults tonil.on_file_reject(:string) - Defaults tonil.on_file_reject_client(:string) - Defaults tonil.translation(Corex.FileUpload.Translation) - Override translatable strings. Defaults tonil.errors(:list) - List of error messages when not using field=. Defaults to[].field(Phoenix.HTML.FormField) - Form field for id, name, form, invalid, and required wiring.- Global attributes are accepted.
Slots
label- Accepts attributes:class(:string)
dropzoneopenclose(required) - Accepts attributes:class(:string)
error- Accepts attributes:class(:string)