How to handle image upload on node and express?

Question

Okay so this is exactly how it sounds but let me explain. Im creating a CRUD application with mern stack and im starting with the backend first. Its the first app im creating by myself so its pretty basic. It only has two models, the User model and the Product model. When i was creating the Product model, i added an image property and gave it a type of object. not even sure if that is correct. Im done with the authentication part so im starting with the 'create product' route. I know that handling image upload is different than handling other properties. so how would i handle the image upload when creating a product? I would post some code below for context.

my product model:

const mongoose = require('mongoose')

const ProductSchema = new mongoose.Schema({
    name:{
        type: String,
        required: [true, 'please provide a product name'],
        maxlength: 20,
        minlength: 3
    },
    category: {
        type: String,
        required: [true, 'please provide a category'],
        maxlength: 20,
        minlength: 3
    },
    quantity: {
        type: Number,
        required: [true, 'please provide the quantity']
    },
    price: {
        type: Number,
        required: [true, 'please provide the price']
    },
    description: {
        type: String,
        required: [true, 'please provide the description'],
        trim: true
    },
    image: {
        type: Object,
        default: {}
    },
    createdBy: {
        type: mongoose.Types.ObjectId,
        ref: 'User',
        required: [true, 'Please provide the user'],
      },
}, 
    { timestamps: true }
)

module.exports = mongoose.model('Product', ProductSchema)

my product controller:

const Product = require('../models/Product')

const getAllProducts = async (req, res) => {

    res.send('get All products')
}

const createProduct = async (req, res) => {
    
    res.send('create Product')   
}

const getProduct = async (req, res) => {
    res.send('get product')
}

const updateProduct = async (req, res) => {
    res.send('update product')
}

const deleteProduct = async (req, res) => {
    res.send('delete product')
}

module.exports = {
    getAllProducts, createProduct, getProduct, updateProduct, deleteProduct
}

FurtiveStranger · Answer 1 · 2022-12-12T10:41:07.533

MongoDB/Mongoose does not store images directly. If you want to store an image to a mongo database, I can provide you with 2 options:

Option A: Change your Image schema type to 'string' then convert your image to a "Base64 string" which can be used as src for the image as such:

<img src="INSERT_BASE64_STRING_HERE">

More info on how to convert an image to a base64 string can be found in here

Option B: Have a storage provider (buckets such as Google cloud storage/AWS S3 storage/ Azure Storage) then store the URL for the image in your mongo database. This will be much more complicated than option A. If you wanna look more into it, here is a useful guide you can check

Disclaimer: Option A is good for learning and seeing results faster. The downside is it could fill up your database with Mbs of string, hitting your db limits, and since it's a string it is not cached by the browser.

Option B is more future-proof especially if you plan to deploy your app online but also comes with more reading and learning

How to handle image upload on node and express?

1 Answers1