(KeyError) key nil not found in: %{"" => :photo} while attempting to upload to S3 bucket

I get a (KeyError) key nil not found in: %{"" => :photo} few seconds after attaching a file that I need to upload to S3 using LiveView.

Below are the necessary code snippets.

socket =
          allow_upload(
            socket,
            :photo,
            auto_upload: true,
            max_entries: 1,
            accept: ~w(.png .jpeg .jpg),
            max_file_size: 500_000,
            external: &generate_metadata/2
          )

my generate_metadata function

defp generate_metadata(entry, socket) do
    config = %{
      region: @region,
      access_key_id: System.fetch_env!("AWS_ACCESS_KEY_ID"),
      secret_access_key: System.fetch_env!("AWS_SECRET_ACCESS_KEY")
    }

    {:ok, fields} =
      SimpleS3Upload.sign_form_upload(config, @s3_bucket,
        key: filename(entry),
        content_type: entry.client_type,
        max_file_size: socket.assigns.uploads.photo.max_file_size,
        expires_in: :timer.hours(1)
      )

    metadata = %{
      uploader: "S3",
      key: filename(entry),
      url: s3_url(),
      fields: fields
    }

    {:ok, metadata, socket}
  end

the upload form

<form phx-submit="save" phx-change="validate">
  <%= live_file_input @uploads.photo %>
  <button type="submit">Upload</button>
</form>

the necessary event functions

def handle_event("save", _params, socket) do
    {completed, []} = uploaded_entries(socket, :photo)

    urls =
      for entry <- completed do
        Path.join(s3_url(), filename(entry))
      end

  ..........some other code......
 
    {:noreply,
     redirect(socket, to: Routes.session_path(socket, :create_session, [{:jwt, new_jwt}]))}
  end

and lastly the validate function

def handle_event("validate", _params, socket) do
    {:noreply, socket}
 end

I appreciate any possible solutions. Thank you

Try checking browser console for errors. The JS uploader probably can’t upload the file to s3 due to some CORS issue.

Sorry for the late reply, but yeah actually what you are saying is very true. I actually came across this explanation in some notes in pragmatic studio LiveView course. They’ve explained this and provided some guidlines on how to add the cors configuration to AWS.

Thank you.