Cannot consume uploaded files when entries are still in progress

Phoenix Forum Questions / Help
, ,
1

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
2

handle_event("update_cover_photo", _, _) is called when the form changes. That’s when the upload input changes aka when the file is added to the input.

You cannot make this callback wait for the upload to finish – and even if you could there’s good reasons not to. Instead register a callback on allow_upload with the :progress option and check the upload progress in there, consuming the upload if the entry is completely uploaded.