Upload an user's image on its account Creation or in registration form using express js

Question

I'm new to node js and I'm creating a simple app where user will create an account with details and i have used mongo dB at the backend to store the user's details his name email etc.

After creating an accent I'm redirecting it to the login page where user has to login and on login success user will be redirected to profile where right now I'm showing his name using sessions.

Now what i want is, I want to upload a user's image on account creation and i'm wondering how m going to link it to my account create form as shown in screenshot while saving it to the mongodb.

I want to show that user's image as profile pic when user will login and will be redirected to its profile page.

I have found many links on saving image on mongodb but couldn't get any help and i'm also attaching the profile page screenshot.

How can i implement this ?

profile page

Answer 1

If you really want to save profile picture into MongoDB. I suggest you to go through When should I use GridFS?

And then decide what is the max size of the profile picture you are going to allow user to upload

MongoDB BSON documents are capped at 16MB. So if the total your entire document of the user is not exceeding 16MB, you may store them directly in your document using the BinData data type.

Images/Videos/PDF/Ppt/spreadsheets etc - it never matters, they can be stored the same way. It's up to your application to return an appropriate content type in the header to display properly in your web app.

Happy coding.. :)

---

Update: To do that you need to base64 encode the image data as follows:

var base64Image = new Buffer(uploadedFilesData, 'binary').toString('base64');

Then store it using Mongo's BinData type, it will then save it as a BSON bit array, not actually store the base64 string, so the size won't grow larger than your original binary image. And when you read from MongoDB and want to serve as image, you can do as follow:

app.get('/getimage', function(req, res) {
  db.collection.find({'imgId':req.params.id}, function(err,data) {
      var base64Image = var img = new Buffer(data.imgDataField, 'base64');
      res.writeHead(200, {
        'Content-Type': 'image/jpeg',
        'Content-Length': base64Image.buffer.length
      });
      res.end(base64Image.buffer);
  }
}

Client side you should show base64Image data something like:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAAB50RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNS4xqx9I6wAAAVBJREFUOI2tlLFKA0EQhr+9i2J1kBDFYG91gYRA0ngpJELQ2KSwlFjYKIidlZVvIFgEXyBYaBH0ESysLATBPiRYWFgEye7eWkSimL1wyg1MM//Mx87O7ghjjCEhc5ICJQ5LRQm9/oDLqzsenl4QgAHK/ir7O5us5JatNcJ2Z73+gKOzCz6kQjguQoAxYELNwlyK89NDK9DaZrvTZTiS4LggBAYBQoDjMhxJ2p1u/DbvH59xU/MYrac0Y8Z6bJgJDaEF9FOPDdNKMev1hVrFh2XTHq9v75GwpYxnjVsH0GrW0UqhtZ52pWg16/FhjVpANu2Ngb88m/Zo1IL4MICg5FthQcmPKomGVSsFpJQopSYupaRaKUTCIr9TuZhnq76O47iTWBhqysX832EA1ze3COf78LnFDBzvRebP3BrbG2tfUx23eXKwOyvd/tH/a4nus083fKdxIODDXwAAAABJRU5ErkJggg==" />