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?

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?

• javascript
• cypress
• e2e-testing
• cypress-file-upload

• What file type are you trying to attach ? – ItsNotAndy Commented Sep 10, 2021 at 12:13
• @ItsNotAndy .apk – Art Olshansky Commented Sep 10, 2021 at 12:14

2 Answers 2

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})

This is a custom mand that I use to upload files and it has never failed me :)

Cypress.Commands.add("UploadFile", function () {
  cy.fixture("somefile", "binary")
  .then(Cypress.Blob.binaryStringToBlob)
  .then((fileContent) => {
  cy.get('someelement').attachFile({
    fileContent,
    filePath: "somefile",
    fileName: "somefile",
  do more stuff here
   });
  });
 });

Think this should work for you

addUpdates(name, family, version, notes, file) {
 cy.get(this.topMenu_addButton).click()
 cy.get('.upload-field').should('be.visible')
  cy.fixture("somefile", "binary")
  .then(Cypress.Blob.binaryStringToBlob)
  .then((fileContent) => {
  cy.get('input[type=file]').attachFile({
    fileContent,
    filePath: "somefile",
    fileName: "somefile",
 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()
} 

Or you can just use the first example I gave as a custom mand and do:

addUpdates(name, family, version, notes, file) {
  cy.get(this.topMenu_addButton).click()
  cy.get('.upload-field').should('be.visible')
  cy.UploadFile();
  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()
 }