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:

open modal
attach a file
fill all fields
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?

What file type are you trying to attach ? – ItsNotAndy Sep 10 '21 at 12:13 — ItsNotAndy, Sep 10 '21 at 12:13

score 5 · Accepted Answer · answered Sep 10 '21 at 22:12

5

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

answered Sep 10 '21 at 22:12

Michael Hines

928
1
7

1

Thank you, option with `.trigger('input')` forks in my case – Art Olshansky Sep 12 '21 at 06:58
In my case `cy.get('input[type=file]').attachFile('test.txt').trigger('input', {force: true});` worked - since the input was hidden – Giannis Smirnios Sep 30 '21 at 12:22
This worked for me! cy.get('input[type=file]').attachFile(file).trigger('change') – Avishka Perera Jun 08 '22 at 21:27

ItsNotAndy · Answer 2 · 2021-09-10T12:24:32.383

This is a custom command 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 command 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()
 }

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

2 Answers2