Save event is not fire when external:&presigned_upload generate presigned_url

Phoenix Forum Questions / Help
,
1

Hi, please help me. After generating presigned_url from presigned_upload, I am expecting handle_event(“save”) to be called, but it is not fire. Kindly help me; I don’t know what I am doing wrong.

@impl true
  def render(assigns) do
    ~H"""
    <div>
      <.header>
        <%= @title %>
        <:subtitle>Add new project to database.</:subtitle>
      </.header>

      <.simple_form
        :let={f}
        for={@changeset}
        id="project-form"
        phx-target={@myself}
        phx-change="validate"
        phx-submit="save"
      >
        <.input field={{f, :title}} type="text" label="Title" />
        <.input field={{f, :description}} type="text" label="Description" />
        <.input field={{f, :active}} type="checkbox" label="Active" />

        <.live_file_input upload={@uploads.images} />

        <div class="bg-gray-100 p-6" phx-drop-target="{@uploads.images.ref}">
          <%= for {_ref, err} <- @uploads.images.errors do %>
            <p class="alert alert-danger"><%= Phoenix.Naming.humanize(err) %></p>
          <% end %>

          <div class="grid grid-cols-2 gap-4">
            <%= for entry <- @uploads.images.entries do %>
              <div class="flex items-center space-x-4 p-4">
                <.live_img_preview entry={entry} width: 5 />
                <div>
                  <div>
                    <p class="text-xl"><%= entry.client_name %></p>
                  </div>
                </div>
              </div>
            <% end %>
          </div>
        </div>

        <:actions>
          <.button phx-disable-with="Saving...">Save Project</.button>
        </:actions>
      </.simple_form>
    </div>
    """
  end

@impl true
  def update(%{project: project} = assigns, socket) do
    changeset = Projects.change_project(project)

    {:ok,
     socket
     |> assign(assigns)
     |> assign(:changeset, changeset)
     |> assign(:uploaded_files, [])
     |> allow_upload(:images,
       accept: ~w(.jpg .jpeg .png),
       max_entries: 5,
       #  max_file_size: 50_000,
       external: &presigned_upload/2
     )}
  end

  defp presigned_upload(entry, socket) do
    bucket = "tes-portfolio"
    key = "public/#{entry.client_name}"

    {:ok, presigned_url} = ExAws.Config.new(:s3) |> ExAws.S3.presigned_url(:put, bucket, key)
    meta = %{uploader: "S3", bucket: bucket, key: key, url: presigned_url}

    {:ok, meta, socket}
  end

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

  @impl true
  def handle_event("validate", %{"project" => project_params}, socket) do
    changeset =
      socket.assigns.project
      |> Projects.change_project(project_params)
      |> Map.put(:action, :validate)

    {:noreply, assign(socket, :changeset, changeset)}
  end

  def handle_event("save", %{"project" => project_params}, socket) do

    uploaded_files =
    consume_uploaded_entries(socket, :images, fn %{} = meta, _entry ->
      {:ok, presigned_url} =
        ExAws.Config.new(:s3)
        |> ExAws.S3.presigned_url(:get, meta.bucket, meta.key, expires_in: 86_400)

      presigned_url
    end) |> IO.inspect

    save_project(socket, socket.assigns.action, project_params)
  end
2

If you want uploads to happen automatically, without a form submit, you need to add auto_upload: true to your upload config and then consume uploads in a custom progress callback, as in the docs example:

allow_upload(socket, :avatar, accept: :any, progress: &handle_progress/3, auto_upload: true)

defp handle_progress(:avatar, entry, socket) do
  if entry.done? do
    uploaded_file =
      consume_uploaded_entry(socket, entry, fn %{} = meta ->
        {:ok, ...}
      end)

    {:noreply, put_flash(socket, :info, "file #{uploaded_file.name} uploaded")}
  else
    {:noreply, socket}
  end
end
3

Thank you @mcrumm for your response.
Normally, what I want is to submit the form and upload it. but when I submit nothing happens I only get the presigned_url and handle_event("save") is not fire which is why am confused.

I have updated my snippet to reflect render function

4

At a glance your template looks fine. Are you getting any errors in the browser console?

5

I got this from the browser, Do I need to do another setup aside from what I have done above

image
image1761×360 60.5 KB

6

Yes you need the client-side Uploaders.S3 code from the External Uploads guide

7

Thank you @mcrumm everything is working fine now, I will update the full working script

1 Like