Multiple Image Uploads in React JS with NodeJs And MongoDB

In this blog we will discuss Multiple Image Uploads in React JS with NodeJs And MongoDB.

For the frontend we will have an Input tag with multiple attribute to take multiple inputs in React JS

example -

  <input

        onChange={(e) => {

          setImage(e.target.files)

        }}

        multiple

        type="file"

      />

We will the bind the onChange method with the state to save the e.target.files (FileList Array)

const [image, setImage] = useState([])

We will create a button to handle API submit

   <button onClick={handleSubmit}> SUBMIT</button>

So the code on App.js Becomes :

import { useState } from "react"

import axios from 'axios'

function App() {

  const [image, setImage] = useState([])

  const [category, setCategory] = useState('electronics')

  console.log(image)

  const handleSubmit = () => {

    let formData = new FormData()

    formData.append('category', category)

    Array.from(image).forEach(item => {

      formData.append('products', item)

    })

    const url = 'http://localhost:5000/image'

    axios.post(url, formData).then(result => {

      console.log(result)

    }).catch(err => {

      console.log(err)

    })

  }

  return (

    <div>

      {

        Array.from(image).map(item => {

          return (

            <span>

              <img

                style={{ padding: '10px' }}

                width={150} height={100}

                src={item ? URL.createObjectURL(item) : null} />

            </span>

          )

        })

      }

      <input

        onChange={(e) => {

          setImage(e.target.files)

        }}

        multiple

        type="file"

      />

      <input

        onChange={(e) => setCategory(e.target.value)}

        type="text" value={category}

      />

      <button onClick={handleSubmit}> SUBMIT</button>

    </div>

  )

}

export default App

Note -  Axios should be installed.

This is frontend part now we will discuss backend.

In the Node JS Part, we will use following packages :

const express = require('express')

const bodyParser = require('body-parser')

const mongoose = require('mongoose');

const cors = require('cors')

const multer = require('multer')

var path = require('path')

And use them with configs like : 

In the last the index.js file becomes : 

const express = require('express')

const bodyParser = require('body-parser')

const mongoose = require('mongoose');

const cors = require('cors')

const multer = require('multer')

var path = require('path')

var storage = multer.diskStorage({

    destination: (req, file, cb) => {

        cb(null, 'public/')

    },

    filename: (req, file, cb) => {

        cb(null, file.originalname)

    }

})

var upload = multer({ storage: storage });

// const upload = multer({ dest: 'uploads/' })

const app = express()

app.use(cors())

app.use(bodyParser.urlencoded({ extended: false }))

app.use(bodyParser.json())

app.use(express.static('public'))

mongoose.connect('mongodb://localhost:27017/test', (err) => {

    if (err) {

        console.log('DB Err.')

    } else {

        console.log('DB Connected.')

    }

});

const ProductModel = mongoose.model('prod', {

    category: { type: String },

    images: { type: Array, },

});

app.post('/image', upload.array('products', 12), (req, res) => {

    console.log(req.body, 21)

    console.log(req.files, 21)

    let result = ProductModel.create({

        category: req.body.category,

        images: req.files

    })

    if (result) {

        res.send({ code: 200, message: 'Upload Success' })

    } else {

        res.send({ code: 500, message: 'Upload Err' })

    }

})

app.get('/image', async (req, res) => {

    let products = await ProductModel.find({})

    if (products.length > 0) {

        res.send({ code: 200, data: products })

    } else {

        res.send({ code: 500, message: 'Server Err' })

    }

})

app.listen(5000, () => {

    console.log(`Backend Running At Port 5000`)

})

we created a simple modal to save the category and images in the products array.

In this way we can set and get images using node js.

Follow my youtube channel for detailed video on this topic.

Thank you and let me know any issues you face.