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

Share Improve this question Follow asked Sep 10, 2021 at 11:08 Art OlshanskyArt Olshansky 3,38611 gold badge2222 silver badges2727 bronze badges 2

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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