File Upload · API
Open the native file picker from bindings, LiveView, or a DOM event.
Hex doc
Phoenix
open_file_picker (Phoenix binding)
Drag your file(s) here
<.action phx-click={Corex.FileUpload.open_file_picker("file-upload-api-phx")} class="button button--sm">
Open picker
</.action>
<.file_upload name="demo[]" class="file-upload" max_files={3}>
<:label>Upload</:label>
<:close>
<.heroicon name="hero-x-mark" />
</:close>
</.file_upload>
open_file_picker (push_event from LiveView)
Drag your file(s) here
<.action phx-click="api_fu_open_server" phx-value-id="file-upload-api-server" class="button button--sm">
Open picker
</.action>
<.file_upload name="demo[]" class="file-upload" max_files={3}>
<:label>Upload</:label>
<:close>
<.heroicon name="hero-x-mark" />
</:close>
</.file_upload>
def handle_event("api_fu_open_server", %{"id" => id}, socket) do
{:noreply, Corex.FileUpload.open_file_picker(socket, id)}
end
open_file_picker (CustomEvent from JavaScript)
Drag your file(s) here
const el = document.getElementById("file-upload-api-js");
el?.dispatchEvent(
new CustomEvent("corex:file-upload:open", {
bubbles: false,
})
);