Cypress-file-upload: Can't upload file to custom file input.

[viengiang]

Current behavior:

Thanks for your work, this helps me a lot in e2e-testing.
When I tried to upload a file to a custom file input, I don't see anything happen.

So I change the CSS and try again

But the result doesn't like my expectations.

Desired behavior:

My expectations are:
When I upload the correct file:

When I upload the incorrect file:

Steps to reproduce: (app code and test code)

Here is my code, can anybody help my, please? Many thanks.
cy.get(MY_CONTENT.cssSelector.availableTypes.cmp_product_catalog.cmp_upload_pdf.btn_add_pdf_file) .attachFile(pdf_file_20mb, {force: true});

[abramenal]

Hi @viengiang
Thanks for submitting the issue!

That is great. I think what you're missing is the events part.
So, as you see, the file is actually gets attached to the input#fileInput element. So the difference you're facing when attaching file manually vs doing it with the plugin is events – in case of plain HTML5 input mode (which is default) only change event is triggered.

I suggest to check out your implementation and see, on which events do you trigger your logic of validating/uploading a file.
You might find one of these events used: https://github.com/abramenal/cypress-file-upload/blob/main/src/constants.js#L14
If it is so, I suggest to change your command to cy.get().attachFile(pdf_file_20mb, { subjectType: 'drag-n-drop' })

[viengiang]

Thanks for your sharing @abramenal

After reading the comment, I already tried to find out the event and the "click" event is what I need. So, when I trigger click event first and attach the file after. This actually works.

cy.get(MY_CONTENT.cssSelector.availableTypes.cmp_product_catalog.cmp_upload_pdf.btn_add_pdf_file).trigger('click', {force:true}).attachFile(pdf_file_20mb, { force: true });

Thank you again. Have a great day :)