LiveView upload directly to AWS China S3

app.js

let Uploaders = {}

Uploaders.S3 = function (entries, onViewError) {
  entries.forEach(entry => {
    let xhr = new XMLHttpRequest()
    onViewError(() => xhr.abort())
    xhr.onload = () => (xhr.status === 200 ? entry.done() : entry.error())
    xhr.onerror = () => entry.error()
    xhr.upload.addEventListener("progress", event => {
      if (event.lengthComputable) {
        let percent = Math.round((event.loaded / event.total) * 100)
        entry.progress(percent)
      }
    })

    xhr.open("PUT", entry.meta.url, true)
    xhr.send(entry.file)
  })
}

let liveSocket = new LiveSocket("/live", Socket, {
  uploaders: Uploaders,
  params: {_csrf_token: csrfToken},
})

config.exs

config :ex_aws,
  access_key_id: [{:system, "AWS_ACCESS_KEY_ID"}, :instance_role],
  secret_access_key: [{:system, "AWS_SECRET_ACCESS_KEY"}, :instance_role],
  region: {:system, "AWS_REGION"}

mix.exs

defp deps do
  [
    {:phoenix, github: "phoenixframework/phoenix", branch: "master", override: true},
    {:phoenix_ecto, "~> 4.0"},
    {:phoenix_live_view, github: "phoenixframework/phoenix_live_view", branch: "cm-uploads-merge", override: true},
    {:floki, ">= 0.27.0", only: :test},
    {:phoenix_html, "~> 2.11"},
    {:phoenix_live_reload, "~> 1.2", only: :dev},
    {:phoenix_live_dashboard, "~> 0.3 or ~> 0.2.9"},
    {:telemetry_metrics, "~> 0.4"},
    {:telemetry_poller, "~> 0.4"},
    {:gettext, "~> 0.11"},
    {:brightu, in_umbrella: true},
    {:jason, "~> 1.0"},
    {:plug_cowboy, "~> 2.0"},
    {:ranch, "~> 1.7.1"},
    {:ex_aws, "~> 2.1"},
    {:ex_aws_s3, "~> 2.0"},
    {:sweet_xml, "~> 0.6"}
  ]
end

page_live.ex

@impl true
def mount(_params, _session, socket) do
  {:ok,
   socket
   |> assign(:uploaded_files, [])
   |> allow_upload(:avatar,
     accept: ~w(.jpg .jpeg .png),
     max_entries: 10,
     max_file_size: 50_000,
     external: &presign_upload/2
   )}
end

defp presign_upload(entry, socket) do
  bucket = "phx-upload-example"
  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("validate", _params, socket) do
  {:noreply, socket}
end

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

@impl true
def handle_event("save", _params, socket) do
  uploaded_files =
    consume_uploaded_entries(socket, :avatar, 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)

  {:noreply,
   socket
   |> put_flash(:info, "#{length(uploaded_files)} file(s) uploaded")
   |> update(:uploaded_files, &(&1 ++ uploaded_files))}
end

page_live.html.leex

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

  <div class="grid grid-cols-2 gap-4">
    <%= for entry <- @uploads.avatar.entries do %>
      <div class="flex items-center space-x-4 p-4">
        <%= live_img_preview entry, width: 64 %>
        <div>
          <div>
            <span class="text-3xl font-bold"><%= entry.client_name %></span>
          </div>
          <div>
            <progress max="100" value="<%= entry.progress %>" class="mt-2"></progress>
            <%= entry.progress %>%
          </div>
          <button phx-click="cancel-upload" phx-value-ref="<%= entry.ref %>">cancel</button>
        </div>
      </div>
    <% end %>
  </div>

  <form class="mt-6" phx-change="validate" phx-submit="save">
    <%= live_file_input @uploads.avatar %>
    <button type="submit">upload <%= Enum.count(@uploads.avatar.entries) %> files</button>
  </form>

  <div class="grid grid-cols-6 gap-x-4">
    <%= for url <- @uploaded_files do %>
      <img src="<%= url %>" class="object-cover h-48" />
    <% end %>
  </div>
</div>