9.3.0: selectFile: missing mimeType

Current behavior

Switching from cypress-file-upload currently not possible. We’re using attachFile to put a PNG file (test.png) in a hidden input[type="file"]. The application uses:

<input type="file" hidden (change)="onImageChange($event)" #fileInput />

/* template */ onImageChange(event) {
    if (event.target.files && event.target.files.length > 0) {
        const selLogoFile: File = event.target.files[0];
        console.log('XX: ' + selLogoFile.type);
    ....

The output when actually filling the file input (triggered using fileInput.click()) with a PNG file is XX: image/png. Using cypress-file-upload we specified this mimeType also in the test:

cy.get('input[type="file"]').attachFile({ filePath: 'test.png', mimeType: 'image/png' });

This also yielded the same console output (XX: image/png).

Now, reworking to selectFile, the code no longer supports mime type, and we need to explicitly force on invisible input:

cy.get('input[type="file"]').selectFile({ contents: 'cypress/fixtures/test.png' }, { force: true });

After this, the output is now only XX: - no mime type is present. According to the documentation manual setting of mime type should not be necessary due to improved binary handling (or so tails tell) xD

Desired behavior

Cypress should detect the mime type and encoding of files used from fixtures directory in selectFile as documented

Test code to reproduce

Unfortunately cypress-test-tiny does not provide a way to host a simple HTML page to test, and I cannot find any good example online of such an input field where the mime type of the file is shown somewhere …

Cypress Version

9.3.0

Other

No response

[perglervitek]

Hey, just to be sure - I have a problem when my input has accept=“image/png” - the command passes but nothing is uploaded. When I have accept=“.png” in my input, everything is ok.

Yes, you either have accept parameter on check file.type in your app. That’s the reason, why it’s refusing the uploaded file.

[BlueWinds]

You’re absolutely right, and this is an oversight on our part; I could give a long explanation of how it happened, but short version is ‘whoops’.

Starting work on this today, prioritized this for the next minor release.