Cannot consume uploaded files when entries are still in progress

My demand: On user dashboard user is seeing his profile picture and cover photo. When he clicks on Cover photo a drop down menu opens up and there are 2 options/buttons. 1-Change Cover photo, 2- Delete cover photo. When he clicks the change cover photo option user is required to select the image and the image is processed after it is uploaded successfully.

Error: The image is not uploading 100%. And before complete upload the function “consume_uploaded_entries” is called.

Question: Now how to tell in elixir to wait till the image is uploaded 100% (progress: 100) before calling the function “consume_uploaded_entries”.

html file:

<div class="dropdown-menu btn" aria-labelledby="dropdownMenuButton">
                                <ul class="text-color-dark-4">
                                    <form phx-change="update_cover_photo">
                                        <label class="text-body-normal text-color-dark-3 test" type="button">
                                            <img src="/images/SmallCamera.svg" class="camera-img-change">
                                            Change cover photo
                                            <%= live_file_input @uploads.update_cover_photo, class: "d-none" %>
                                        </label>
                                    </form>

                                    <label >...</label>
                                </ul>
                            </div>

def handle_event("update_cover_photo", unsigned_params, socket) do
    user = socket.assigns.current_user

    res =
      consume_uploaded_entries(socket, :update_cover_photo, fn %{path: path}, entry ->
        file = %Plug.Upload{
          content_type: entry.client_type,
          filename: entry.client_name,
          path: path
        }
end