Skip to content

Instantly share code, notes, and snippets.

@goofansu
Last active August 5, 2023 04:05
Show Gist options
  • Save goofansu/e3f8551a596373ef6370208bfc7db78d to your computer and use it in GitHub Desktop.
Save goofansu/e3f8551a596373ef6370208bfc7db78d to your computer and use it in GitHub Desktop.
LiveView upload directly to AWS China S3
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 :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"}
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
@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
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment