0

I'm getting some troubles passing an groupId via post to my function to process it, basically I'm uploading a picture but I need to pass groupId to rename it picture on my other function, I'm using react and express to do this:

  onFormSubmit = async (event) => {
    event.preventDefault();
    const { imageFile, currentGroupId } = this.state;
    var formData = new FormData();
    formData.append('groupImage', imageFile);
    const config = {
      headers: {
        'content-type': 'multipart/form-data'
      }
    };
    await api.post('/fileUpload/group', { currentGroupId }, formData, config );
  }

My route: 

router.post('/group', (req, res) => {
  fileuploadmanager.uploadFile(req, res);
});

And the backend side:

uploadFile(req, res) {
    const { uploadsPath } = this.porperties;
    const { currentGroupId } = req.body;//it prints but formData and config never comes here
    console.log("GROUP: ", currentGroupId);
    const storage = multer.diskStorage({
      destination: uploadsPath,
      filename: (req, file, cb) => {
        cb(null, `${file.fieldname}-${Date.now()}${path.extname(file.originalname)}`);
      },
    });

    const upload = multer({
      storage,
      limits: {
        fileSize: 1000000,
      },
      fileFilter: (req, file, cb) => {
        this.checkFileType(file, cb);
      },
    }).single('groupImage');

    upload(req, res, (err) => {
      if (err) {
        console.log(err);
      }
    });
  }

Sending just formData and config works but it doesn't work if I add groupId to the endpoint. I tried appending it value in formData but I can't get it on the backend side, so now I trying passing it as a req.body, it works fine but my other paramters is not passing to the backend.

How can I pass my groupId, formData and config to my backend side?

EDIT: api is a wrapper to specify my backend URL. I'm using axios

import axios from 'axios';

export default axios.create({
  baseURL: process.env.REACT_APP_API_URL  
});

References:

Francis Rodrigues
  • 1,470
  • 4
  • 25
  • 61
maudev
  • 974
  • 1
  • 14
  • 32

1 Answers1

0

Try sending all the data in one object await api.post('/fileUpload/group', { currentGroupId, formData, config }); Then get the data in uploadFile(req, res) { const postData = req.body;; This should fix the issue.

Subhendu Kundu
  • 3,618
  • 6
  • 26
  • 57
  • I tried but I got `POST /api/v1/fileUpload/group 500 56.009 ms - 2320 TypeError: Cannot read property 'transfer-encoding' of undefined ` – maudev Mar 04 '19 at 07:57
  • `router.post('/group', (req, res) => {` this route and `api.post('/fileUpload/group'` are same? – Subhendu Kundu Mar 04 '19 at 08:00
  • Actually yes, because I have another file that prefix `fileUpload` to all my endpoints on this class, that's not the problem all data sends fine to my uploadFile function, the only problem is to sending an extra param in this case `currentGroupId` – maudev Mar 04 '19 at 08:02
  • Cool, `await api.post('/fileUpload/group', { currentGroupId, formData }, config);` I put the config in the data too. Try this now. – Subhendu Kundu Mar 04 '19 at 08:05
  • Also do a `console.log(req.body)` – Subhendu Kundu Mar 04 '19 at 08:07
  • Alright I got this: `POST /api/v1/fileUpload/group - - ms - - REQ: {} Error: Multipart: Boundary not found at new Multipart (/home/maudev/Escritorio/daily-tracking/backend/node_modules/busboy/lib/types/multipart.js:58:11) ` – maudev Mar 04 '19 at 08:13
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/189377/discussion-between-subhendu-kundu-and-maudev). – Subhendu Kundu Mar 04 '19 at 08:54