magosi

Serving static user uploaded files in Phoenix

I am planning to make a web app that must support user uploads. Think of a quiz type of website where each question can have an associated image. I know how to handle file uploads by the user, but I have no idea where to store the uploaded files and how to serve them statically for download but also for templates to embed the images in Html. I want to do it locally, for now (no S3), and I have heard about Plug.Static, but then again I am unsure if that is the best solution. Imagine I store these user uploaded files in multiple folders and eventually my app will expand to the point where other file types are uploaded than images.

In short, where should I store and how can I serve static user uploaded files so that:

1.) They are available for download by the user (think Plug.Conn.send_file/5)
2.) They are accessible in my Html templates (for example: <image src="/images/img.jpg"> or
<embed src="/docs/file.pdf">) but someone cannot access them if they are unauthorized and tries to steal the user uploaded files. (For instance, someone should not be able to access the static file by going straight to mywebsite.com

As a side note, I often realise in the process of planning a web app project that I lack knowledge about the design and dynamics of web apps and how it all fits together.
If anyone can link me to good resources to inform myself better about these concepts I would really appreciate it.

Thank you all for your time and effort.

7 comments

/phoenix #file-uploading #static-assets

0 4001 7

2020-07-12 17:04:03 UTC

Marked As Solved

mindok

Where you store them is up to you. send_file should work with any path that the server has access to. Maybe “/uploads” under your project folder?
You would create a route to a controller where the parameter allows you to find the file. That route, with appropriate parameters to find the image file, is what you embed dynamically as the image link into your template when it is rendered. The controller can then handle authorisation when the browser follows the image link, and if all good, serves the file via send_file.

If you google “Phoenix Elixir send_file” you should find some samples. If not, I’ll take a look when I get back to the office tomorrow - I have done this recently so can get some code samples.

Post #2

Also Liked

shanesveller

Note that if you will ever run on more than one server, this technique is not sustainable as you will get irregular 404s based on which backend node you connect to on any given file request. This is why the S3 approach and similar techniques are so desirable, and as a bonus they help pave the way for separate hostnames for static files.

That in turn paves the way for CDN/caching techniques, or other avenues that allow you to take Elixir out of the equation for static content. It’s all a spectrum based on what your time/effort appetite allows for, and if this is an internal/side project you may never need to take it that far.

Post #6

magosi

Wow. It is so simple. Thank you very much. I appreciate your time and effort. I would love to see the code snippets as well.

Post #3

mindok

I went digging and remembered that I actually used a very good online tutorial to learn most of the tricks I needed to get this work. Here it is: Step-by-Step Tutorial to Build a Phoenix App that Supports User Upload

I didn’t do a lot of what was here (e.g. I didn’t want the ImageMagick dependency), but there’s plenty there to adapt to your situation I think.

Post #4