How to include file extension with LiveView Uploads?

spyq

I’ve followed the uploads guide and have uploads working with one small issue - the files have no file type extension (.jpg etc).

Here is my handler:

def handle_event("save", _params, socket) do
  uploaded_files =
    consume_uploaded_entries(socket, :avatar, fn %{path: path}, entry ->
      dest = Path.join([:code.priv_dir(:qualyst), "static", "uploads", Path.basename(path))
      File.cp!(path, dest)
      {:ok, Routes.static_path(socket, "/uploads/#{Path.basename(dest)}")}
    end)

  {:noreply, update(socket, :uploaded_files, &(&1 ++ uploaded_files))}
end

Uploaded files show up in priv/static/uploads like this: “uploads/live_view_upload-1662238207-966158677041787-1”

Since there is no file extension, I can’t figure out how to display the images after upload.

I know there must be a straightforward way to do this, but after playing around I couldn’t figure out an elegant solution besides parsing %Phoenix.LiveView.UploadEntry{}. Any help would be much appreciated. Thanks!

4 comments

/phoenix #troubleshooting #liveview #uploads

1 1709 4

2022-09-04 06:58:10 UTC

Showing Posts 1 to 4

Show Best Posts
Show All (oldest first)
Show All (newest first)

mcrumm

Phoenix Core Team

Welcome @spyq!

You can’t trust what the client sends, but the File metadata provided by the browser is available on the UploadEntry.

You can use Path.extname/1 on the client name:

extname = Path.extname(entry.client_name)

…or if the client name has no extension, then you can try to derive it from the content type with MIME.extensions/1

  [extname] = MIME.extensions(entry.client_type)

…and if you have restricted allowed upload types with the :accept option on allow_upload/3 then it should always return an expected value.

…but none of that guarantees that the metadata is valid. If you need to know that those bytes are a JPEG you’ll need to use something like GenMagic which invokes libmagic under the hood and introspects the actual file bytes, and then invoke MIME.extensions/1 with the result mime_type to search for a known extension.

Hope that helps!

Post #1

spyq

Thanks so much for the quick response @mcrumm!

Using Path.extname solved the extension name issue. I had assumed that was why the images weren’t displaying, but that actually didn’t solve the issue, because I hadn’t realized that I needed to configure Plug to include the “images” folder in static assets. Now I see that the original guide would have worked out as is, without the extension name, if I had done that step when creating the folder in static.

Thanks again!
Spyq

Post #2

mcrumm

Phoenix Core Team

If you feel the guides could be clearer on that point, a PR would be very welcome!

Post #3

mayel

FYI there’s now a native elixir library for this kind of mime detection, I haven’t used it yet but been meaning to see if it can replace the NIF we currently use for it: GitHub - chaskiq/ex-marcel: Find the mime type of files, examining file, filename and declared type · GitHub

Post #4

— All posts loaded —