vue express uploading multiple files to amazon s3 - node.js

Question

i need a help on how to upload multiple files image on amazon S3. i let's say that i have three input like this
<template lang="html">
<form enctype="multipart/form-data" #submit.prevent="sendFile">
<input type="file" ref="file1" #change="selectFile1">
<input type="file" ref="file2" #change="selectFile2">
<input type="file" ref="file3" #change="selectFile3">
<div class="field">
<button class="button is-info">Send</button>
</div>
</form>
</template>
and my frontend vue script looks like this
<script>
import _ from 'lodash'
export default {
name: 'BulkUpload',
data() {
return {
file: "",
message: "",
error: false,
sendFiles: []
}
},
methods: {
selectFile1() {
this.file = this.$refs.file1.files[0]
this.sendFiles.push(this.file)
console.log(this.sendFiles);
},
selectFile2() {
this.file = this.$refs.file2.files[0]
this.sendFiles.push(this.file)
console.log(this.sendFiles);
},
selectFile3() {
this.file = this.$refs.file3.files[0]
this.sendFiles.push(this.file)
console.log(this.sendFiles);
},
sendFile() {
let formData = new FormData()
_.forEach(this.uploadFiles, file => {
formData.append('file', file)
})
var self = this
axios.post('http://localhost:3000/image/bulkupload', formData)
.then(function(response) {
console.log(response);
self.message = "File has been uploaded"
self.file = ""
self.error = false
})
.catch(function(err) {
self.message = "Something went wrong"
self.error = true
console.log(err);
})
}
}
}
</script>
after sending it in using formData to the express server, my image route will handle it with this code
const sendingImage = require('../helper/sendingImage');
router.post('/bulkupload', sendingImage.upload.array("file"), (req, res) => {
var promises=[];
for(var i = 0; i < req.files.length; i++) {
var file = req.files[i];
promises.push(sendingImage.uploadLoadToS3(file));
}
Promise.all(promises).then(function(data){
res.send('Uploadedd');
console.log('success');
}).catch(function(err) {
console.log('failed');
res.send(err.stack);
})
})
and my helper looks like this
const multer = require('multer');
const aws = require('aws-sdk');
aws.config.update({
accessKeyId: <my access id>,
secretAccessKey: <my secret key>
})
const upload = multer({
dest: './uploads/'
})
function uploadLoadToS3(ObjFile){
var params = {
ACL :'public-read',
Body : new Buffer(ObjFile.buffer),
Bucket:'vue-express-upload',
ContentType:ObjFile.mimetype,
Key:ObjFile.originalname
}
return s3.upload(params).promise();
}
module.exports = {
upload,
uploadLoadToS3
}
to be honest, my code works without any problem. it send response status 200 without any error.
but the problem is, when i check my S3 bucket, it doesn't have any uploaded file in it. it's still empty.
is there anything wrong with my code ?

Answer 1

The solution I found for using aws-sdk. The good that I will also use this solution and my projects.
Credits: StackOver - Answer
Reference: Multer-s3
In your helper file you'll leave it like this:
const aws = require('aws-sdk')
const multer = require('multer')
const multerS3 = require('multer-s3')
aws.config = new aws.Config({
accessKeyId: <my access id>,
secretAccessKey: <my secret key>,
region: <my region>
})
const s3 = new aws.S3()
const upload = multer({
storage: multerS3({
s3: s3,
acl: 'public-read',
bucket: 'vue-express-upload',
contentType: function(req, file,cb){
cb(null, file.mimetype)
},
key: function (req, file, cb) {
cb(null, file.originalname)
}
})
})
module.exports = upload
The key of the file you can also change to something more unique, like the date / minutes / seconds. It is at your discretion, I used the filename as key.
In your router the route will look like this:
const upload = require('../helper/sendingImage')
router.post('/bulkupload', upload.array('files'), (req, res) => {
console.log('success')
//console.log(req.files)
res.send('Uploadedd')
//res.send(req.files)
})
To view upload data:
router.post('/bulkupload', upload.array('files'), (req, res) => {
res.send({
status: 200,
data: {
sucess: true,
file: req.files
}
})
})
If there is no middleware file, it simply will not send. Will not return error. The only errors that can return are those of AWS access information.
Note:I used the postman.