CODEWITHSUNDEEP
node.jsreactjs
ASIF KAIF
ASIF KAIF

Reputation: 411

How to upload multiple images at once in react Node

I want to upload multiple images at once, I using Multer as a middleware, I am able successfully upload single image.

Client

  const {register,handleSubmit}=useForm() 
    const onSubmit = (images) => {
       let formData = new FormData()
       axios.post(`${url}/uploadMultiple`,formdata)
        }

using react-hook-form

<form onSubmit={handleSubmit(onSubmit)}>
    <input type='file' multiple {...register('multipleImages')} />
     <button type='submit' >Upload multiple images</button>
</form>        
    )

route

route.post('/uploadMultiple',upload.array('imagess'),(req,res)=>{
    console.log(req.files)
}

Upvotes: 0

Views: 1678

Answers (2)

ASIF KAIF
ASIF KAIF

Reputation: 411

simplest way to send images to server

  const onSubmit = async(e) => {
        const fd = new FormData();
            [...e.file].map(file => {
                fd.append('imagess',file)
            })

           await axios.post(`${url}/uploadMultiple`,fd)
    }

import multer from 'multer'

let upload
 const storage = multer.diskStorage({
    destination:(req, file, cb)=> {
      cb(null, 'images')
    },
    filename:  (req, file, cb)=> {
      cb(null, Date.now()+ '_' +file.originalname)
    }
  })
  
  export default  upload = multer({ storage: storage })

node server

route.post('/uploadMultiple',upload.array('imagess'),(req,res)=>{
    console.log(req.files)
}

Upvotes: 1

J_K
J_K

Reputation: 671

You need to use .array(selector,fileLimit) of Multer. Selector refers to name attribute in your input. fileLimit is used in case you want to limit the number of files

For example:

<input type='file' name='images' multiple />

route.post('/uploadImages',upload.array('images', 10),(req,res)=>{
    //your code here
}

Upvotes: 1

Related Questions