spyq
How to include file extension with LiveView Uploads?
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!
Trending in Questions
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Enabling companies to succeed by building software people love.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #elixirconf-us
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #hex
- #performance
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Producing high quality Elixir screencasts since 2017.
Enabling companies to succeed by building software people love.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
First 4 of 4 Posts
mcrumm
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/1on the 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…and if you have restricted allowed upload types with the
:acceptoption onallow_upload/3then 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
GenMagicwhich invokes libmagic under the hood and introspects the actual file bytes, and then invokeMIME.extensions/1with the result mime_type to search for a known extension.Hope that helps!
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
mcrumm
If you feel the guides could be clearer on that point, a PR would be very welcome!
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