File is uploaded but the angular class ng-invalid is not changed to ng-valid after upload

[Nikeshbajra]

I have uploaded the image using the plugin but angular doesn't seem to change the class from ng-invalid to ng-valid

[abramenal]

Hi @Nikeshbajra
Thanks for submitting the issue!

Can you please describe your setup? Like:

1. which file upload component you are using
2. which event is required by its implementation to "consume" the file object
3. how you are selecting target element to upload your file into?

[StephaneColson]

I have a very close issue with an Angular popup and a file upload inside it.

Current behavior:

After selecting a file name with this cypress call cy.get('input[name=fichier]').attachFile(filename); the "Save/Enregistrer" button remains disabled when used in an Angular popup. According to front end code, the "Save/Enregistrer" button is disabled because the form is detected as still invalid, but why?

The same function used on a page and not in a popup works perfectly. @Nikeshbajra are you in a popup?

Desired behavior:

The "Save" button should be enabled after file selection.

Steps to reproduce: (app code and test code)

Open the popup with the file selection.
Use cy.get('input[name=fichier]').attachFile(filename);
Then try to programmatically click on the "Save" button of the popup
See the test fail with error

Timed out retrying after 10050ms: cy.click() failed because this element is disabled:

<button type="submit" mg-button="" _nghost-nuc-c529="" ng-reflect-type="submit" ng-reflect-size="SM" disabled="" data-style="mg-btn mg-btn-primary" data-size="SM">...</button>

Fix this problem, or use {force: true} to disable error checking.

Versions

Cypress 6.9.1
MacOS 11.3 (also in a Vagrant Debian 10.8à
Chrome 90.0.4430.93

[Nikeshbajra]

My Code:
cy.get('input[type="file"]').attachFile(['Images/mart_logo.png'])

I am using the cypress-file-upload plugin

I am using selectorshub to select target element.
Can you explain a bit more about "which event is required by its implementation to "consume" the file object". I didn't quite understand it

The blue color in the "Browse" button here is due to the hover effect
Cypress Version:
Cypress package version: 7.2.0
Cypress binary version: 7.2.0
Electron version: 12.0.0-beta.14
Bundled Node version:
14.15.1
Google Chrome
Version 90.0.4430.93 (Official Build) (64-bit)

@StephaneColson my problem isn't the save button being disabled, instead it is the image being uploaded but the front-end not recognizing it.

[StephaneColson]

@Nikeshbajra ok but maybe the same issue cause.

[0xbane]

I had a similar problem using Angular: the form was not validating even though the file upload control appeared to have been entered correctly. I was able to work around the issue by triggering the 'input' event.

cy.get('#fileUploadElement')
    .attachFile('file_name.pdf')
    .trigger('input');

I'm not sure if this is something that ought to be supported by cypress-file-upload or if it's just an Angular implementation detail. At any rate, hope that helps.

[juanan22]

Thank you @0xbane it solved the problem for me. I couldn't find the solution anywhere else
👍

[fahdilahady]

I face same issue, however i have my type=file element was hidden. so the trigger should be the button. is it possible to attach to the hidden element?