Cypress-file-upload: [Bug] - Trying to upload a `video/mp4` with `binary` encoding fails

[teophilus]

Current behavior:

$ file -I test_asset_02.mp4

test_asset_02.mp4: video/mp4; charset=binary

Desired behavior:

Trying to upload a video/mp4 with binary encoding fails, I used the same command for Jpegs and such and they work perfect.

Steps to reproduce: (app code and test code)

Upload an video/mp4 with binary encoding

Versions

Cypress: 3.5.0 , operating system: locally OSX but running against a production server (Unix), browser: Electron

[abramenal]

Hi @teophilus

Thanks for submitting the issue!
Can you please provide the code snippet? It seems it should work, as binary is one of the supported encodings:
https://github.com/abramenal/cypress-file-upload/blob/master/src/constants.js#L29

[jackguoAtJogg]

I have same issue, here's my code snippet:

.fixture('sample_video.mp4')
            .then(fileContent => {
                cy.get('#upload-video').upload({
                    fileContent,
                    fileName: 'sample_video.mp4',
                    mimeType: 'video/mp4',
                    encoding: 'binary'
                })
            })

[jackguoAtJogg]

But I'm getting different error.

[jackguoAtJogg]

I got it fixed by setting encoding to 'utf8'.

.fixture('bear.mp4')
            .then(fileContent => {
                cy.get('#upload-video').upload({
                    fileContent,
                    fileName: 'bear.mp4',
                    mimeType: 'video/mp4',
                    encoding: 'utf8'
                })
            })

[abramenal]

@jackguoAtJogg
Thanks for this!

@all-contributors add @jackguoAtJogg for question

[allcontributors[bot]]

@abramenal

I've put up a pull request to add @jackguoAtJogg! :tada:

[abramenal]

Mentioned the workaround in 97e2f46d426bc57d1befc51072cea384161cba69

[jackguoAtJogg]

Wow~ is my honor to be part the contributor~ 😁

[inovramadani]

Hello, in my case where I used mp4box library to have a check on video metadata before sending a video, the above workaround does not work. It produces wrong video metadata. The below workaround works:

• set encoding to base64 in cy.fixture()
• set encoding in cypress-file-upload .attachFile to base64.

[jackguoAtJogg]

I got it fixed by setting encoding to 'utf8'.

.fixture('bear.mp4')
            .then(fileContent => {
                cy.get('#upload-video').upload({
                    fileContent,
                    fileName: 'bear.mp4',
                    mimeType: 'video/mp4',
                    encoding: 'utf8'
                })
            })

The upload not longer work with Cypress 7.3.0 and cypress-file-upload 5.0.7, all you need to do is to change from upload to attachFile.

[HindyB]

Hello, in my case where I used mp4box library to have a check on video metadata before sending a video, the above workaround does not work. It produces wrong video metadata. The below workaround works:

• set encoding to base64 in cy.fixture()
• set encoding in cypress-file-upload .attachFile to base64.

Hello,
Thank you for this, however, I'm trying to upload large or small video files then accepted, in order to test the right error message. The following result is obtained:

[pmerwin]

Hello, in my case where I used mp4box library to have a check on video metadata before sending a video, the above workaround does not work. It produces wrong video metadata. The below workaround works:

• set encoding to base64 in cy.fixture()
• set encoding in cypress-file-upload .attachFile to base64.

for others this is what worked for me:

cy.fixture('vidtest.mp4', { encoding: 'base64' }).then((fileContent) => { cy.get('[data-testid="video-component-upload-dropzone-input"]').attachFile({ fileContent, fileName: 'vidtest.mp4', mimeType: 'video/mp4', encoding: 'base64' }); });

[HindyB]

Hello, in my case where I used mp4box library to have a check on video metadata before sending a video, the above workaround does not work. It produces wrong video metadata. The below workaround works:

• set encoding to base64 in cy.fixture()
• set encoding in cypress-file-upload .attachFile to base64.

for others this is what worked for me:

cy.fixture('vidtest.mp4', { encoding: 'base64' }).then((fileContent) => {
            cy.get('[data-testid="video-component-upload-dropzone-input"]').attachFile({
                fileContent,
                fileName: 'vidtest.mp4',
                mimeType: 'video/mp4',
                encoding: 'base64'
            });
        }); ```

This works great for me, excluding uploading large video files

[dgarofalo]

I'm not getting any errors when following the above, but I am however still seeing issues with the video encoding and the output is not playable by the browser. Any suggestions would be helpful.

Versions:
"cypress-file-upload": "^5.0.7", "cypress": "8.0.0",