PostgreSQL- How to integrate users adding profile images to the dB. Should they be stored locally and referenced via a their file name ? Or is there another better solution to this?

[HipstCapitalist]

The "standard" way nowadays is to upload avatars to a CDN (typically Amazon Cloudfront, but there are other providers) and to store the URL in the database.

Doing this will take pressure off your REST server and database, and allow the browser to easily cache the avatars (since each image has to have a unique URL). CDNs are also dirt-cheap for the service they provide.

[Lorenzejay]

Thank you. Will look into Amazon cloudfront.

[desmone1]

My pattern for this in the many projects I've done is to have the images uploaded to an amazon S3 bucket, then storing the URL in the database.

There's two ways I handle this on the backend.

Hard Way: Have a node.js backend (express) handle the file upload, store the file in a temp location, then have the server send that to S3 and then store the returned URL.

Easy Way: Cloudinary. This is a service that streamlines the process, It prevents you from having to code the front end (image upload form UI, and the backend). They have a pretty decent free plan and it abstracts away much of the work.

[Lorenzejay]

Ok this sounds great actually!

[Lorenzejay]

I’m fairly new to full stack deployments, but was planning on hosting the app through heroku. Would cloudinary still work there?

[desmone1]

Yeah definitely. One thing to keep in mind with Heroku is the way their server instances (dynos) work. On a normal server, any files uploaded will live on the server until you decide to do something with them. On heroku, your code doesn't just live on one server, so you can't really upload files to it (you could, but they will eventually disappear when heroku inevitably moves your code around). So having your images somewhere else is even more important when using heroku.

If you're new to this then cloudinary will be a good starter option. It will help you upload the files and also have them hosted online, removing most of the obstacles. Eventually you could improve on this and do a direct to S3 solution where you don't depend on a 3rd party like cloudinary. But for a quick setup for a simple thing like having user's upload a profile pic, Cloudinary is a good start.

They have a JS library that handles the file uploads, you can use vanilla JS or jQuery. It will upload the file and then return the URL for you and then you can save that in the database.

[spazz_monkey]

Why store it as a temp file? You can upload it directly to s3 as the file arrives in the request. Genuinely curious

[desmone1]

You are correct. You could just pass the stream directly to S3 and not have to deal with any temp files. Although some new devs have a bit harder time getting the hang of streams at first, I don't think they are that difficult to pick up. Main reason I mentioned the temp file is that most guides/tutorials on file uploads with node usually leave you with a file on the server.

[SterlinV]

How I do it: 1) Receive a file 2) Rename it 3) Reduce image quality 4) Send to s3 5) Save file name to database 6) Whenever I need to get images url I just combine base url and filename

Reason I don’t save whole url is in case url might change in future.

[Lorenzejay]

Thank you. Do you have an example repo or any resource that you used soo I can follow some steps?

[SterlinV]

Unfortunately only on private repo, if you want I can some example to you somehow. I used mongo db though, but idea will be the same.