svilen

svilen

Author of Concurrent Data Processing in Elixir

LiveView Uploads: resuming on cancel with auto_upload

I’m currently implementing the brand new LiveView Uploads, using the auto_upload setting, and I have a situation which I’m not sure how to resolve.

The uploader is configured to handle multiple images, with auto_upload: true:

socket
|> allow_upload(:images,
  accept: [".jpg", ".jpeg", ".png"],
  auto_upload: true,
  progress: &handle_progress/3,
  max_file_size: 5 * 1024 * 1024,
  max_entries: 20
)

The actual file upoad input is hidden, so we have drag and drop only.

When you drop a bunch a files, and they are all valid, the upload starts and everything works as expected. However, if there is a single file that’s invalid, the whole batch of files stops. I have implemented a cancel button so you can cancel individual files from the UI:

  def handle_event("cancel-upload", %{"ref" => ref}, socket) do
    {:noreply, cancel_upload(socket, :images, ref)}
  end

The problem I’m facing is that after I cancel the invalid file(s), the remaining valid files does not resume uploading. Unless I submit the form or add drag and drop more files, nothing will get uploaded.

I’m looking for a way to “retry” uploading files or trigger auto_upload again, if all entries on the uploader are valid. Does anyone have any ideas how to do it?

Here is my template markup (simplified version) just for completeness:

<%= live_file_input @uploads.images, class: "is-hidden" %>

<div class="dropzone" phx-hook="DragOver" phx-drop-target="<%= @uploads.images.ref %>">
  Drag and drop your files here
</div>

<table class="uploads-in-progress table">
  <tbody>
    <%= for entry <- @uploads.images.entries do %>
      <tr>
        <td class="<%= if !entry.valid?, do: "has-text-danger" %>"><%= entry.client_name %></td>
        <td><progress class="progress" value="<%= entry.progress %>" max="100"><%= entry.progress %></progress></td>
        <td class="has-text-danger"><span class="is-clickable" phx-click="cancel-upload" phx-value-ref="<%= entry.ref %>">Cancel</span></td>
      </tr>
    <% end %>
  </tbody>
</table>

Most Liked

svilen

svilen

Author of Concurrent Data Processing in Elixir

I have a workaround, which is a bit of a hack… Here it is for anyone interested:

I noticed that live_view.js simply dispatches an input event to the drop target here so I created a hook that triggers the event:

Hooks.ResumeUpload = {
  mounted() {
    this.handleEvent('resume_upload', ({id}) => {
      const dropTarget = document.getElementById(id);
      dropTarget.dispatchEvent(new Event('input', { bubbles: true }));
    });
  },
};

The hook subscribes to a resume_upload event, which is triggered when you cancel an upload:

def handle_event("cancel_upload", %{"ref" => ref}, socket) do
  socket =
    socket
    |> cancel_upload(:images, ref)
    |> push_event("resume_upload", %{id: socket.assigns.uploads.images.ref})

  {:noreply, socket}
end

and in the template I just had to find a place for the hook:

<div id="upload-section" phx-hook="ResumeUpload">
  <!-- same code as before ... -->
</div>

I wonder if there is a better way to accomplish this :thinking:

envixo

envixo

Thanks for sharing the solution.

enkr1

enkr1

This workaround is working fine but im just curious why is this not fixed/handled in the phoenix live view?

Where Next?

Popular in Questions Top

marius95
Hello everyone, I try to use an Javascript Event Handler in my root.html.leex file. Therefore I created a function in the app.js file: ...
New
gshaw
What is the idiomatic way of matching for not nil in Elixir? E.g., First way: defp halt_if_not_signed_in(conn, signed_in_account) when...
New
JorisKok
I have a server on AWS, and was running a load test using artillery. When looking at the Phoenix dashboard I see the Ports going to 100% ...
New
beno
I will often find my self writing things similar to: case some_value do nil -&gt; something() "" -&gt; something() _ -&gt; someth...
New
vrod
I am using the Starship cross-shell prompt – it seems pretty nice, but I get some errors: [WARN] - (starship::utils): Executing command ...
New
hariharasudhan94
lets say i have a sample like a = 20; b = 10; if (a &gt; b) do {:ok, "a"} end if (a &lt; b) do {:ok, b} end if (a == b) do {:ok, "eq...
New
ycv005
I have followed this StackOverflow post to install the specific version of Erlang. And When I am running mix ecto.setup then getting fol...
New
jay1
Why is it that the mnesia database isn’t the most preferred database for use in Elixir/Phoenix?
New
nsuchy
Hi. I’ve noticed that Windows Powershell has it’s own IEX command and you cannot access Elixir’s IEX due to the conflict. This isn’t a cr...
New
joaquinalcerro
Hi there, I am working with Ecto-Postgresql and I need to call all of the records from a specific table but the table has 40,000 record...
New

Other popular topics Top

sen
Hi All, I set a environment variables in dev.exs , like below code. when i start server, how can i set the ${enable} value? thanks. d...
New
TunkShif
This post is an instruction guide to help you setup your Neovim for Elixir development from scratch. It includes general information on h...
274 41454 115
New
chrismccord
Phoenix 1.4.0 released Phoenix 1.4 is out! This release ships with exciting new features, most notably with HTTP2 support, improved deve...
688 30840 112
New
albydarned
Hello all! I am typing this post from my new MacBook Pro with the M1 chip. I’m loving it so far, and will probably use it as my daily dr...
New
lessless
I believe there are people here who are dealing with CSV files import on the daily basis, and since Excel is a really popular tool there ...
New
jononomo
I am trying to figure out how Mix knows whether the environment is test, dev, or prod -- where is this set? Thanks.
New
stefanluptak
Hello everybody, usually, I use a 29" ultra-wide monitor for VSCode which can easily accomodate explorer (files panel) + file with code ...
New
bsollish-terakeet
Credo is smart enough to check for (something like) this: assert length(the_list) == 0 with this response: Checking if an enum is empt...
New
WestKeys
Currently suffering from paralysis by [HTTP client] analysis. This is rather unusual in Elixirland as there tends to be consensus on the ...
New
openscript
Hello! Sorry for this astonishing simple question, but I’m really stuck. I try to set up the intellij-elixir plugin, but I don’t know ho...
New

We're in Beta

About us Mission Statement