Search code examples
node.jsexpressamazon-s3multerform-data

NodeJs upload file to AWS S3 - corrupted file


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.


Solution

  • 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