[Bug] Upload with HTML file input does not work in Chrome > 73

[narinepoghosyan]

Current behavior:

File upload does not gets triggered when using Chrome v73 and higher.

Steps to reproduce: (app code and test code)

For file upload I am using function like this

command.js
 Cypress.Commands.add('uploadFile', (fileName, fileType = ' ', selector) => {
    return cy.get(selector).then(subject => {
        cy.fixture(fileName, 'base64')
            .then(Cypress.Blob.base64StringToBlob)
            .then(blob => {
                const el = subject[0];
                const testFile = new File([blob], fileName, {
                    type: fileType
                });
                const dataTransfer = new DataTransfer();
                dataTransfer.items.add(testFile);
                el.files = dataTransfer.files;
            });
    });
 })

in my test file.
cy.uploadFile(fileName, fileType, fileInput);

It's working fine in chrome < 72

Now I am using chrome 80 and want to upload file with cypress-file-upload plugin.

• First install plugin
  npm install --save-dev cypress-file-uploa
  my version: cypress-file-upload@3.5.3

• in commands.js I am import this line
  import 'cypress-file-upload';

• In my test file

        const fileName = 'GIF.gif';
        cy.fixture(fileName).then(fileContent => {
            cy.get('[type="file"]').upload({ fileContent, fileName, mimeType: 'image/gif' });
        });

Actual result: In cypress all steps shown, but in browser don't shown uploaded file.
See attached file

[abramenal]

Hi @narinepoghosyan
Thanks for submitting the issue!

I see you've posted also into the recipe issue. Please check out my latest comment there.
#34 (comment)

[abramenal]

I've tested locally Chrome v79, 80 and both works as expected, auto detection mechanism under the hood enforces the change event triggering.

Anyways please try enforcing it, as I posted in mentioned comment.

I also see possible issue in the specific element selection you drop image into. Can you please share more about your application setup? What lib do you use for input? Isn't it a drag-n-drop element? What exact element do you select when using cy.get?

Looking forward your reply and apologies for long response 🌴

[narinepoghosyan]

Tanks a lot for answer @abramenal.
I am trying the same code in other project and its working, but in my project I can't find any solution, Pls help me.
This is my html code
<input type="file" title="" id="testing" name="files" class="t-file-uploader-input">

        <input
            type="file"
            title=""
            class="t-file-uploader-input"
            name="files"
            ref="fileInput"
            :multiple="multipleFiles"
            :processing="processing"
            @input="uploadFiles"
        >

Is it drag-n-drop element.
I am trying Your code too.
Now I am using selected code.

`

const fileName = 'PNG.png';       
cy.fixture(fileName, 'base64').then(fileContent => {
    cy.get('#testing').upload(
       { fileContent, fileName, mimeType: 'image/jpg' },
       { subjectType: "drag-n-drop", force: true }
    );
});

`

[narinepoghosyan]

This is my project the same code in chrome 70 version. There are working fine and my image is uploaded

[narinepoghosyan]

And the same test in Chrome 80. This my image is not uploading.

Please help my to find the problem
And with subjectType: "drag-n-drop",

[benowenssonos]

@abramenal I am also running into this issue. It only appears when trying to upload an SVG (since you added this functionality yesterday).

[abramenal]

@narinepoghosyan can you please also try setting subjectType: "input"?
I think will have some time to debug this

[narinepoghosyan]

@abramenal Thanks to answer.
Result is the same. Chrome 80 - failed, Chrome 70 - pass
Code

        const fileName = 'PNG.png';
        cy.fixture(fileName, 'base64').then(fileContent => {
            cy.get('.t-file-uploader-input').upload(
               { fileContent, fileName, mimeType: 'image/png' },
              { subjectType: 'input', force: true },
         //      { subjectType: 'drag-n-drop'},
              );
       });

See attached files
Chrome 80

Chrome 70

[artemisclyde]

Any news on this? I'm struggling with the same issue.

[abramenal]

Hey @narinepoghosyan @benowenssonos @artemisclyde @olibanjoli can someone provide a sample repo containing some code snippet and failing test? I cannot reproduce the issue locally using any of the tests for the recipes.

I am working on v4 upgrade and Firefox support so tested all setups (headed Chrome and Firefox, headless Electron and Chrome).

[narinepoghosyan]

Sorry @abramenal , I can't to send You. Our project is private and my manager don't let me to send. Sorry again. :(
I will wait in new release, and try again my tests, because it's so much priority for me

[abramenal]

@narinepoghosyan it's fine. I actually meant that you could create a small project where you just use that dropzone component (is it open source one?) and test it with same code.

I expect the new release to come in the following 2 days, so if it's non-prio for you let's just wait a bit.

[narinepoghosyan]

@abramenal Okay I will wait and thanks a lot

[abramenal]

@narinepoghosyan @artemisclyde @benowenssonos finally got it done with v4.
Please check out and feel free to reopen if the issue persists.

Cheers!

[narinepoghosyan]

Thanks @abramenal,
I tried it, I still have the same issue

[flignac]

I have the same issue too and all page where i need to upload a file for a test is impossible with this issue.