PhoenixKitWeb.Live.Components.MediaSelectorModal (phoenix_kit v1.7.102)

Copy Markdown View Source

Media selector modal component.

A reusable modal component for selecting media files from anywhere in the admin panel. Supports both single and multiple selection modes.

Usage

# In parent LiveView, add to socket assigns
socket
|> assign(:show_media_selector, false)
|> assign(:media_selection_mode, :single)
|> assign(:media_selected_uuids, [])

# In template (IMPORTANT: Must pass phoenix_kit_current_user for uploads to work)
<.live_component
  module={PhoenixKitWeb.Live.Components.MediaSelectorModal}
  id="media-selector-modal"
  show={@show_media_selector}
  mode={@media_selection_mode}
  selected_uuids={@media_selected_uuids}
  phoenix_kit_current_user={@phoenix_kit_current_user}
/>

# To open the modal
def handle_event("open_media_selector", _params, socket) do
  {:noreply, assign(socket, :show_media_selector, true)}
end

# To receive selected media
def handle_info({:media_selected, file_uuids}, socket) do
  # Handle the selected file UUIDs
  {:noreply, socket |> assign(:gallery_uuids, file_uuids)}
end

Attrs

  • show — boolean, controls modal visibility
  • mode:single or :multiple
  • selected_uuids — list of already-selected file UUIDs
  • phoenix_kit_current_user — required for uploads to attribute the file
  • file_type_filter:all (default), :image, or :video
  • user_uuid — when set, restricts the library to files owned by that user; nil (default) shows the full library
  • scope_folder_id — when set, restricts both the browse query and the post-upload home folder to this folder UUID. Plugins scoping the picker to a single domain object (e.g. a catalogue item) pass this after lazy-creating their folder; files already living elsewhere get a FolderLink into the scope folder on re-upload rather than being moved out from under their original owner. nil (default) = no scope, legacy full-library behaviour.

Summary

Functions

handle_event(binary, arg2, socket)

Callback implementation for Phoenix.LiveComponent.handle_event/3.

render(assigns)

Callback implementation for Phoenix.LiveComponent.render/1.

update(assigns, socket)

Callback implementation for Phoenix.LiveComponent.update/2.