Uploading image [Cypress]

Question

I'm trying to upload a jpeg image from local files to a webpage developed here in my job. The thing is, we need to click on the page to open the file explorer and then select the image (or drag and drop into the same spot that may be clicked). Here is a picture from the web page

I don't know how could i do that, i was trying some code that i've seen in "https://medium.com/@chrisbautistaaa/adding-image-fixtures-in-cypress-a88787daac9c". But don't worked. I actually don't know how it works exactly, could anyone help me?

Here is my code

After @brendan's help, I was able to solve the problem by finding an input that was "hidden" under an element. However, before that I tried drag-n-drop, and cypress returned me an error (despite the successful upload). The context was, immediately after the upload, the element re-renders and cypress told me that: .

Beside the success with input element, i was wondering how it would be possible to resolve this error, is it possible to do something internally to cypress to ignore or wait until the element re-renders back to normal? Solutions suggested by cypress:

Answer 1

We're doing this using cypress-file-upload

Here's an example from our code:

cy.fixture(fileName).then(fileContent => {
  cy.get(selectors.dropZoneInput).upload(
    { fileContent, fileName, mimeType: "application/pdf" },
    { subjectType: "drag-n-drop" }
  );
});

For your purpose, I think this will work:

cy.fixture(imagePath).then(fileContent => {
  cy.get(".upload-box").first().upload(
    { fileContent, fileName, mimeType: "image/jpeg" },
    { subjectType: "drag-n-drop" }
  );
});