-
-
Save chrismccord/4dec0b6b410c0345b7dc25e60e15ed6d to your computer and use it in GitHub Desktop.
upload_example.ex
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
defmodule UploadDemoWeb.UploadLive do | |
use UploadDemoWeb, :live_view | |
def render(assigns) do | |
~H""" | |
<%= for {_ref, err} <- @uploads.avatar.errors do %> | |
<div class="alert alert-danger"><%= humanize(to_string(err)) %></div> | |
<% end %> | |
<div id="entries"> | |
<%= for entry <- @uploads.avatar.entries do %> | |
<div id={"entry-#{entry.ref}"} class="row"> | |
<%= live_img_preview entry, width: 75 %> | |
<h5><%= entry.client_name %></h5> | |
<div class="progress-bar" style={"width: #{entry.progress};"}></div> | |
<button type="button" phx-click="cancel-upload" phx-value-ref={entry.ref}> | |
<i class="far fa-trash"></i> | |
</button> | |
</div> | |
<% end %> | |
</div> | |
<form phx-change="validate" phx-submit="save" id="upload-form"> | |
<%= live_file_input @uploads.avatar %> | |
<%= if Enum.any?(@uploads.avatar.entries) do %> | |
<button type="submit" phx-disable-with="uploading..."> | |
upload <%= length(@uploads.avatar.entries) %> files | |
</button> | |
<% end %> | |
</form> | |
<div id="files"> | |
<h5>uploaded files (<%= length(@uploaded_files) %>)</h5> | |
<%= for url <- @uploaded_files do %> | |
<img src={url} width="150"/> | |
<% end %> | |
</div> | |
""" | |
end | |
def mount(_params, session, socket) do | |
{:ok, | |
socket | |
|> assign(:uploaded_files, []) | |
|> allow_upload(:avatar, accept: ~w(.jpeg .png), max_entries: 3)} | |
end | |
def handle_event("save", _params, socket) do | |
uploaded_files = | |
consume_uploaded_entries(socket, :avatar, fn %{} = meta, entry -> | |
[ext | _] = MIME.extensions(entry.client_type) | |
dest = Path.join("priv/static/uploads", Path.basename(meta.path) <> "." <> ext) | |
File.cp!(meta.path, dest) | |
Routes.static_path(socket, "/uploads/#{Path.basename(dest)}") | |
end) | |
{:noreply, | |
socket | |
|> put_flash(:info, "#{length(uploaded_files)} file(s) uploaded") | |
|> update(:uploaded_files, &(&1 ++ uploaded_files))} | |
end | |
def handle_event("cancel-upload", %{"ref" => ref}, socket) do | |
{:noreply, cancel_upload(socket, :avatar, ref)} | |
end | |
def handle_event("validate", _params, socket) do | |
{:noreply, socket} | |
end | |
end |
If anyone happens upon this snippet from content around the web, you're better served by looking at the implementation in the official liveview docs now.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
amazing... quite possibly the shortest drag & drop code for any web framework 👏 , was going to comment on the
~H sigil
but all i had to do is keep on reading...