Cypress is not uploading the image

Question

I am automating one of the use cases in cypress and I am unable to upload the image using attach file function. Below is the code and the snippets from HTML tags

UI Upload Image

HTML tags

VS code

Answer 1

I think you want to attach the file to the <input> as a first step. Then click the button, or you may not even have to do the click().

From the docs,

// start watching the POST requests
cy.intercept({ method: 'POST', url: /upload_endpoint/ }).as('upload');

const myFilePath = 'product.jpeg'; // file is in "/cypress/fixtures/" folder

cy.fixture(myFilePath, 'binary')
  .then(Cypress.Blob.binaryStringToBlob)
  .then(fileContent => {
    cy.get('input#productImageUpload').attachFile({
      fileContent,
      fileName: myFilePath,
      mimeType: 'application/octet-stream',
      encoding:'utf8',
      lastModified: new Date().getTime(
    })
  })

cy.get('.label-side').click()   // may not need to do this

// wait for the 'upload_endpoint' request, and leave a 2 minutes delay before throwing an error
cy.wait('@upload', { requestTimeout: 120000 });