cypress-file-upload do not attach a file to one of the fields

Question

I'm using cypress-file-upload for attaching files to input fields. Using the same approach for all of these inputs in different places (in different modal windows in my case). But in one place files do not attach for some reason, in executed steps file is attached but in modal it isn't shown (red zone).

What I need to do:

1. open modal
2. attach a file
3. fill all fields
4. click on the Submit button, but it's disabled because fails isn't attached

And how it looks in code:

addUpdates(name, family, version, notes, file) {
  cy.get(this.topMenu_addButton).click()
  cy.get('.upload-field').should('be.visible')
  cy.get('input[type=file]').attachFile(file)
  cy.get(this.modal_field).should('be.visible').fill(name)
  cy.get(this.modal_familyField).fill(family)
  cy.get(this.modal_versionField).fill(version)
  cy.get(this.modal_notesField).fill(notes)
  cy.get(this.modal_proceedButton).should('be.enabled').click()
}

All fields successfully filled, but file not attached. Any ideas?

Answer 1

The log is telling you the file is actually attached. (Inspect also in dev console, the input element will have a non-empty files array).

It looks like you need to trigger a change or input event to tell the app something has been attached

cy.get('input[type=file]').attachFile(file)
  .trigger('change')

or

cy.get('input[type=file]').attachFile(file)
  .trigger('input')

Failing that, try to force the button click

cy.get(this.modal_proceedButton).click({force:true})