From aea8af55fba4f58cba37bcf99f46735355a49581 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonatan=20K=C5=82osko?= <jonatanklosko@gmail.com>
Date: Tue, 17 Sep 2024 01:14:51 +0700
Subject: [PATCH] Show progress in file input upload

---
 lib/livebook_web/live/output/file_input_component.ex | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/lib/livebook_web/live/output/file_input_component.ex b/lib/livebook_web/live/output/file_input_component.ex
index d3ca4173854f..e017a2b1bbaa 100644
--- a/lib/livebook_web/live/output/file_input_component.ex
+++ b/lib/livebook_web/live/output/file_input_component.ex
@@ -43,7 +43,7 @@ defmodule LivebookWeb.Output.FileInputComponent do
     ~H"""
     <form id={"#{@id}-root"} phx-change="validate" phx-target={@myself}>
       <label
-        class="inline-flex flex-col gap-4 p-4 border-2 border-dashed border-gray-200 rounded-lg cursor-pointer"
+        class="min-w-[50%] inline-flex flex-col gap-4 p-4 border-2 border-dashed border-gray-200 rounded-lg cursor-pointer"
         phx-drop-target={@uploads.file.ref}
         phx-hook="Dropzone"
         id={"#{@id}-upload-dropzone"}
@@ -56,6 +56,9 @@ defmodule LivebookWeb.Output.FileInputComponent do
           <% end %>
         </div>
         <.live_file_input upload={@uploads.file} class="hidden" accept={@accept} />
+        <div :for={entry <- @uploads.file.entries} class="delay-200 flex flex-col gap-1">
+          <.file_entry name="File" entry={entry} on_clear={JS.push("clear_file", target: @myself)} />
+        </div>
       </label>
       <p
         :for={msg <- LivebookWeb.HTMLHelpers.upload_error_messages(@uploads.file)}
@@ -72,6 +75,10 @@ defmodule LivebookWeb.Output.FileInputComponent do
     {:noreply, socket}
   end
 
+  def handle_event("clear_file", %{"ref" => ref}, socket) do
+    {:noreply, cancel_upload(socket, :file, ref)}
+  end
+
   defp handle_progress(:file, entry, socket) do
     if entry.done? do
       {file_ref, client_name} =