I'm uploading a file to S3 Bucket with nodejs express. This is my code:
HTML Here i upload the file using Jquery formData
<form id="form" action="" method="post" enctype="multipart/form-data">
<input type="file" name="image" id="image" />
<input class='submit-input' type="submit" value="Submit" />
</form>
<script src="/js/jquery.js"></script>
<script>
$(document).ready(function(e){
$("#form").on('submit', function(e){
e.preventDefault();
$.ajax({
type: 'POST',
url: '/api/upload-image',
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
beforeSend: function(){
$('.submit-input').attr("disabled","disabled");
},
success: function(response){ //console.log(response);
$(".submit-input").removeAttr("disabled");
}
});
});
});
</script>
BACKEND NODEJS
In the backend I use multer to manage the file, and upload to s3 following the aws-sdk doc.
var express = require('express');
const router = express.Router();
const AWS = require('aws-sdk');
const fs = require('fs');
//multer
const multer = require('multer')
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, '/tmp/')
},
filename: function (req, file, cb) {
cb(null, file.fieldname + '-' + Date.now())
}
})
const upload = multer({ storage: storage })
router.post('/api/upload-image', upload.single('image'), async (req, res) => {
var file = req.file;
AWS.config.update({
accessKeyId: process.env.AWS_PUBLIC,
secretAccessKey: process.env.AWS_SECRET,
region: process.env.AWS_REGION
});
var re = /(?:\.([^.]+))?$/;
var ext = re.exec(file.originalname)[1]
const uniqueKey = 'testDir/'+uuidv4()+'.'+ext;
var buffer = fs.readFileSync(file.path, null)
let params = {
Bucket: process.env.AWS_S3_BUCKET,
Key: uniqueKey,
Body: buffer,
ContentType: file.mimetype
};
let uploadPromise = await new AWS.S3().putObject(params).promise();
return res.status(201).json({});
});
All this works well, the backend receive the file, I can print this in console (and see name, mime type, size, etc) and the file is upload to s3 bucket. But the file is unreadable (maybe corrupted) and I can't see this. The unreadable file's size is the same as the original file. (with no-image file all looks correct).
I've tried to upload to s3 a file from my public dir, and all works well. So I presume my error is beetween jquery upload and backend retrieve.
Passing by AWS API Gateway I need to enable multipart/form-data. Resolved following this guide https://docs.aws.amazon.com/apigateway/latest/developerguide/api-gateway-payload-encodings-configure-with-console.html