how can i upload multiple images to s3 using vuejs - node.js

Question

how can i upload multiple images to amazon s3
this is my middleware for image upload
const aws = require("aws-sdk");
const multer = require("multer");
const multerS3 = require("multer-s3");
aws.config.update({
secretAccessKey: process.env.AWSSecretKey,
accessKeyId: process.env.AWSAccessKeyId
});
const s3 = new aws.S3();
const upload = multer({
storage: multerS3({
s3: s3,
bucket: 'ajibade',
acl: 'public-read',
metadata: (req, file, cb) => {
cb(null, { fieldName: file.fieldname });
},
key: (req, file, cb) => {
cb(null, Date.now().toString())
}
})
})
module.exports = upload;
this is how i upload the file
<label class="choosefile-button">
<input
type="file"
#change="onFileSelected1"
>
<p style="margin-top: -70px">{{ fileName }}</p>
</label>
<label class="choosefile-button">
<input
type="file"
#change="onFileSelected2"
>
<p style="margin-top: -70px">{{ fileName }}</p>
</label>
how i call the function
methods: {
onFileSelected1(event) {
this.selectedFile = event.target.files[0]
console.log(this.selectedFile)
this.fileName = event.target.files[0].name
},
onFileSelected2(event) {
this.selectedFile = event.target.files[0]
console.log(this.selectedFile)
this.fileName = event.target.files[0].name
},
}
each time i click on either onFileSelected1 or onFileSeleted2 it uploads the same images for the both inputs
this is my post request
router.post(`/products`, upload.single("photo"), async (req, res) => {
console.log(res);
try {
let product = new Product();
product.photo = req.file.location;
await product.save();
} catch (error) {
console.log(error);
}
});
please how can i go about this

Answer 1

This blog post explains quite in depth how it's done.
Basically what you need to do is add a <input type="file" multiple /> and in your upload function turn it into multipart/form-data. Then when you upload it to your backend, you use multer and multer-s3 to send it to S3.
I think you've mixed up a few concepts here, your upload function looks like a route that is supposed to be in the backend of the application, where you then send the request to upload files using for example axios or the fetch API.