convert nested json object to formdata javascript for Multer

Question

Previously I was sending my Javascript object via post to the node backend. which was working alright. The problem is I have to move to form data because I'm changing avatar in our json to s3 url instead of base64. so I installed multer and multer-s3. I am not able to either upload the avatar or to update other Javascript Object properties.

My Javascript object is of the same structure as

{
info: {
  name: 'abc',
  avatar: Blob Instance
},
address: {},
education: {}
}

My multier code is

const multer = require('multer');
const aws = require('aws-sdk');
const BUCKET_NAME = 'myBucket';

var multerS3 = require('multer-s3');
aws.config.accessKeyId = 'someId';
aws.config.secretAccessKey = 'someKey';
aws.config.region = 'us-east-2';

var upload = multer({
  storage: multerS3({
    s3: new aws.S3(),
    bucket: BUCKET_NAME,
    acl: 'public-read',
    contentType: multerS3.AUTO_CONTENT_TYPE,
    metadata: function(req, file, cb) {
      console.log(file);
      cb(null, { fieldName: file.fieldname });
    },
    key: function(req, file, cb) {
      let id = req.user._id;
      cb(null, id + '/' + Date.now().toString() + '_' + file.originalname);
    },
  }),
});

My route is

router.post(
  '/',
  authorizeUser,
  upload.single('avatar'),
  controller.updateWithAsscociations
);

In my controller func updateWithAsscociations I get nothing. Neither the logoURL nor the rest

score 1 · Accepted Answer · answered Aug 03 '21 at 07:51

Looks like you just need to change the request structure a little bit and send the avatar image form field along with the text fields. Something like:

curl --request POST 'http://localhost:3000/test-upload' \
--form 'info[name]="someName"' \
--form 'address[street]="someStreet"' \
--form 'address[number]="123"' \
--form 'avatar=@"/path/to/your/image"'

Here's how you can then access the data on the nodejs side:

const multer = require('multer');
const upload = multer({dest: 'uploads/'})


app.post('/test-upload', upload.single('avatar'), (req, res, next) => {
    // req.file is the `avatar` file
    // req.body will hold the text fields (converted to an object)
    console.log("avatar file is", req.file);
    console.log("body is", JSON.stringify(req.body));

    res.status(201).end();
})

So when performing a "test-upload" request the following will be logged to the console:

avatar file is {
  fieldname: 'avatar',
  originalname: '<name-of-file>',
  ...
  destination: 'uploads/',
  path: 'uploads\\2d907155c413320252e8fce04c266840',
  size: 477
}
body is {"info":{"name":"someName"},"address":{"street":"someStreet","number":"123"}}

convert nested json object to formdata javascript for Multer

1 Answers1