Where and how can I store private profile picture safely in my React and Nodejs web application?

we are developing a user interface for a video conference app. in this app, user will register and then add its avatar through Edit.js component. We are using Nodejs in backend and MongoDB for storing datas. I have actually searched in the internet but there are many thoughts about my problem. Do you know how I can store user profile pictures safely?

Answer

There are several solutions that you use when storing profile pictures or any pictures for that matter.

  1. MongoDB

You can base64 encode your picture and store it as a property in MongoDB. There is a document size limit of 16mb in MongoDB, so you might run into problems if your pictures are very large.

  1. On the disk

Node allows you to save files to the filesystem via the fs API. You can save your files in a folder on your web server and access them from Node, or if using Nginx, directly from that. The drawback is that disk space on web servers and VPS is relatively expensive.

  1. On a cloud image hosting service like cloudinary

Cloudinary handles image storage, retrieval, resizing and other nice things out-of-the-box for you. It has a simple API that you can use directly from Node to upload your pictures and get an image URL to save in MongoDB. However, it’s free plan quickly runs out, and you have to pay a subscription fee to have more bandwidth and storage space.

From experience, this is an expensive option best for prototyping.

  1. Store in the cloud in an AWS bucket

If using AWS, you can create a bucket that lets you store individual files. You can pay-as-you-go per GB of bandwidth and storage.

For cheaper alternatives, try Linode or DigitalOcean, which give you 250GB of storage space and 500GB of bandwidth for $5.