Instead of image weird characters are being received on API

Question

I have an endpoint as /images/upload and it's responsible for uploading photos to our s3 bucket, using multer and multer-s3. When I send the photo from postman everything works fine and the photo gets uploaded to s3 bucket, but when I try to upload photo from my react-native frontend the photo appears as weird characters in the body of the request.

I don't know what am I doing incorrectly. my request is like

   const formData = new FormData();
   formData.append('file', {
       uri: 'some uri',
       name: 'name',
       type: 'image/jpeg',
       });
   try {
       const responseAxios = await axios({
          url: 'http://127.0.0.1:8080/api/v1/images/upload',
          headers: {
             Authorization: 'my token',
             'Content-Type': 'multipart/form-data',
            },
          method: 'POST',
          data: formData,
          });
    } catch (error) {
        console.log('the error -> ', error.message)
    }

and my endpoint code is as bellow.

/images/router.js

const { Router } = require('express');
const passport = require('passport');

const router = new Router();
const controller = require('./controller');
const multer = require('multer');
const multers3 = require('multer-s3');

const AWS = require('aws-sdk');
const config = require('../../config');

AWS.config.update({
  accessKeyId: config.s3.accessKey,
  secretAccessKey: config.s3.secretKey,
  region: config.s3.bucketRegion,
});
const s3 = new AWS.S3();

const upload = multer({
  storage: multers3({
    s3: s3,
    bucket: (process.env.S3_BUCKET),
    acl: 'public-read',
    metadata: function (req, file, cb) {
      cb(null, { fieldName: file.fieldname });
    },
    key: function (req, file, cb) {
      cb(null,  file.originalname);
    },
  }),
});

router
  .route('/upload')
  .post(
    passport.authenticate('token', { session: false }),
    upload.single('file'),
    (...args) => controller.uploadToS3(...args),
  );

module.exports = router;

/images/controller.js

const imageFacade = require('./facade');

class ImageController {  
  uploadToS3(req, res, next) {
    imageFacade.uploadToS3(req)
      .then((result) => {
        res.send({ success: true, result });
      }).
      catch((err) => {
        res.status(400).send({ success: false, message: err })
      });
  }
}

module.exports = new ImageController(imageFacade);

/images/facade.js

const Promise = require('promise');

class ImageFacade {
  uploadToS3(req) {
    return new Promise((resolve, reject) => {
      console.log('body file is ', req.body.file)
      resolve({
        url: req.file.location,
        name: req.file.key,
        type: req.file.mimetype,
        size: req.file.size,
      });
    });
  }
}

module.exports = new ImageFacade();

Instead of image weird characters are being received on API

0 Answers0