How to handle storing lots of images (profile pictures, etc)

How to handle storing lots of images (profile pictures, etc)
0

#1

Hi All,

I’m working on a project where I want to allow users to upload a profile picture. While I don’t expect this app to get any traffic ever I have read that simply storing the image to be served in the database is a bad idea because it is very non performant when you’re dealing with an app used by lots of people.

Instead what people suggest is to save the image to “the disk” or in the file system and then save a reference to that file location in the database. When they say “the disk” or in the file system is this the file system of the server that is running the app? If I am running the webserver on my personal machine (localhost:3000) would I essentially be saving the file to my harddrive? Further, If i deploy the app to heroku is it possible to save the image on heroku’s server that is running my app? and serve it from there?

Finallly, if this is indeed possible im wondering HOW to prompt the user to save the file to the disk. Does this sound reasonable:

  1. create an HTML form with an input for the file path? (input type = file)
  2. when sent a route on the node server will receive the file path
  3. The server then somehow saves the file in the file system (is there a good module for this?)
  4. once the file is saved the server saves the file path to the database
  5. The image can now be fetched and displayed from the path stored in the DB

Another question I have — If I manually drag a file into (mimicking an upload i think?) myproject/public/images and try to link an <img src="./public/images/my-img.png"/> the browser will respond with a “Not allowed to load local resource” error. Why does this not happen when a user uploads the file and the path is retrieved from the database? Isn’t it serving it from the same spot in the file system ultimately?

Thanks


#2

@Swoodend Typically, one stores images for websites in a /home/username/myproject/resources/images/ folder or on a Content Delivery Network (CDN). Then, like you write above, you use the image path in your HTML. I’m not sure why that’s not working for you on your host. Maybe the file name or path is incorrect?