Packages
livebook
0.8.0
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, initialized: false)}
end
@impl true
def update(assigns, socket) do
{value, assigns} = Map.pop!(assigns, :value)
socket = assign(socket, assigns)
socket =
if socket.assigns.initialized do
socket
else
socket =
if value do
push_event(socket, "image_input_init:#{socket.assigns.id}", %{
data: Base.encode64(value.data),
height: value.height,
width: value.width,
format: value.format
})
else
socket
end
assign(socket, initialize: true)
end
{:ok, socket}
end
@impl true
def render(assigns) do
~H"""
<div
id={"#{@id}-root"}
class="inline-flex p-4 border-2 border-dashed border-gray-200 rounded-lg cursor-pointer"
phx-hook="ImageInput"
data-id={@id}
data-phx-target={@target}
data-height={@height}
data-width={@width}
data-format={@format}
data-fit={@fit}
>
<input type="file" data-input class="hidden" name="value" />
<div id={"#{@id}-preview"} phx-update="ignore" data-preview>
<div class="text-gray-500">
Drag an image file here or click to open file browser
</div>
</div>
</div>
"""
end
end