"Unexpected end of multipart data" while using Cypress and cypress-file-upload

Viewed 275

I am using the recommended plugin cypress-file-upload to attach and upload image files from my fixtures folder. This file upload works perfectly when done by a user, but the server is sending back the following error when Cypress attempts this process (even though it's mimicking the same actions a user would take):

Error: Unexpected end of multipart data
api_1       |     at /app/node_modules/dicer/lib/Dicer.js:62:28
api_1       |     at processTicksAndRejections (internal/process/task_queues.js:75:11) {
api_1       |   storageErrors: []
api_1       | }

The bizarre thing is I've closely inspected the request coming from Cypress and compared it to the one sent by the browser, and I don't see any notable differences. Here is the Cypress snippet that uploads the file:

// attach file through cypress-file-upload
cy.getBySel('avatar-modal-input').attachFile('images/quinoa.png') // <- this method is from cypress-file-upload
cy.getBySel('avatar-modal-button').click() // submits the request to the server
cy.wait('@updateUser')

On the backend it hits this endpoint:

// Endpoint to upload image
router.post('/upload', upload.single('image'), ensureAuthorized, (req, res) => res.status(200).json({ file: req.file.location }));

And the upload function utility:

const aws = require('aws-sdk');
const multer = require('multer');
const multerS3 = require('multer-s3');

aws.config.update({
  secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
  accessKeyId: process.env.AWS_ACCESS_KEY_ID,
  region: process.env.AWS_REGION,
});

const s3 = new aws.S3();

const fileFilter = (req, file, cb) => {
  if (req.body.gif === 'true' && (file.mimetype === 'image/jpeg' || file.mimetype === 'image/png' || file.mimetype === 'image/gif')) {
    cb(null, true);
  } else if (file.mimetype === 'image/jpeg' || file.mimetype === 'image/png') {
    cb(null, true);
  } else {
    cb(new Error('Invalid file type, only JPEG and PNG are allowed!'), false);
  }
};

const upload = multer({
  fileFilter,
  storage: multerS3({
    acl: 'public-read',
    s3,
    bucket: process.env.AWS_BUCKET,
    key(req, file, cb) {
      cb(null, Date.now().toString());
    },
  }),
});

module.exports = upload;
1 Answers

I am facing a similar issue. I wonder if this may have resolve the problem:

6.2.1 6 months ago

"multipart/form-data is no longer wrongly encoded when using cy.intercept(). This should prevent Unexpected end of multipart data errors on the back end service where the request was pointing to. Fixes #9359."

https://openbase.com/js/cypress/versions

Related