Packages
livebook
0.9.1
0.19.8
0.19.7
0.19.6
0.19.5
0.19.4
0.19.3
0.19.2
0.19.1
0.19.0
0.18.6
0.18.5
0.18.4
0.18.3
0.18.2
0.18.1
0.18.0
0.17.3
0.17.2
0.17.1
0.17.0
0.16.4
0.16.3
0.16.2
0.16.1
0.16.0
0.15.5
0.15.4
0.15.3
0.15.2
0.15.1
0.15.0
0.14.7
0.14.6
0.14.5
0.14.4
0.14.3
0.14.2
0.14.1
0.14.0
0.14.0-rc.1
0.14.0-rc.0
0.13.3
0.13.2
0.13.1
0.13.0
0.12.1
0.12.0
0.11.4
0.11.3
0.11.2
0.11.1
0.11.0
0.10.0
0.9.3
0.9.2
0.9.1
0.9.0
0.8.2
0.8.1
0.8.0
0.7.2
0.7.1
0.7.0
0.6.3
0.6.2
0.6.1
0.6.0
0.5.2
0.5.1
0.5.0
0.4.1
0.4.0
0.3.2
0.3.1
0.3.0
0.2.3
0.2.2
0.2.1
0.2.0
0.1.2
0.1.1
0.1.0
Automate code & data workflows with interactive notebooks
Security advisory:
This version has known vulnerabilities.
View advisories
Current section
Files
Jump to
Current section
Files
lib/livebook_web/live/output/image_input_component.ex
defmodule LivebookWeb.Output.ImageInputComponent do
use LivebookWeb, :live_component
@impl true
def mount(socket) do
{:ok, assign(socket, value: nil)}
end
@impl true
def update(assigns, socket) do
{value, assigns} = Map.pop!(assigns, :value)
socket = assign(socket, assigns)
socket =
if value == socket.assigns.value do
socket
else
image_info =
if value do
%{data: Base.encode64(value.data), height: value.height, width: value.width}
end
push_event(socket, "image_input_change:#{socket.assigns.id}", %{image_info: image_info})
end
{:ok, assign(socket, value: value)}
end
@impl true
def render(assigns) do
~H"""
<div
id={"#{@id}-root"}
class="inline-flex flex-col p-4 border-2 border-dashed border-gray-200 rounded-lg"
phx-hook="ImageInput"
phx-update="ignore"
data-id={@id}
data-phx-target={@myself}
data-height={@height}
data-width={@width}
data-format={@format}
data-fit={@fit}
>
<input type="file" data-input class="hidden" name="value" accept="image/*" capture="user" />
<div class="flex justify-center" data-preview>
<div class="flex justify-center text-gray-500">
Drag an image file
</div>
</div>
<div class="hidden flex justify-center" data-camera-preview></div>
<div class="mt-4 flex items-center justify-center gap-4">
<.menu id={"#{@id}-camera-select-menu"} position={:bottom_left}>
<:toggle>
<button
class="button-base button-gray border-transparent py-2 px-4 inline-flex text-gray-500"
data-btn-open-camera
>
<.remix_icon icon="camera-line" class="text-lg leading-none mr-2" />
<span>Open camera</span>
</button>
</:toggle>
<div data-camera-list>
<.menu_item>
<button role="menuitem" data-camera-id>
<span class="font-medium" data-label></span>
</button>
</.menu_item>
</div>
</.menu>
<button
class="hidden button-base button-gray border-transparent py-2 px-4 inline-flex text-gray-500"
data-btn-capture-camera
>
<.remix_icon icon="camera-line" class="text-lg leading-none mr-2" />
<span>Take photo</span>
</button>
<button
class="hidden button-base button-gray border-transparent py-2 px-4 inline-flex text-gray-500"
data-btn-cancel
>
<.remix_icon icon="close-circle-line" class="text-lg leading-none mr-2" />
<span>Cancel</span>
</button>
<button
class="button-base button-gray border-transparent py-2 px-4 inline-flex text-gray-500"
data-btn-upload
>
<.remix_icon icon="upload-2-line" class="text-lg leading-none mr-2" />
<span>Upload</span>
</button>
</div>
</div>
"""
end
@impl true
def handle_event("change", params, socket) do
value = %{
data: Base.decode64!(params["data"]),
height: params["height"],
width: params["width"],
format: socket.assigns.format
}
send_update(LivebookWeb.Output.InputComponent,
id: socket.assigns.input_component_id,
event: :change,
value: value
)
{:noreply, socket}
end
end