How to upload an PDF file with cypress.io - cypress

Question

I would like to upload a PDF file using cypress.
The idea will be to go and find the pdf file into my directory.
I didn't find some way yet.
This is the element used to upload

Answer 1

2022 Update
Since Cypress v9.3.0 you can use
.selectFile('fileName.pdf')
you can find more details about it in Cypress api docs

Answer 2

Cypress doesn't support file upload out of the box.
cypress-file-upload is a npm package which provides a custom cypress command to upload files easily.
But, it requires the file to be present in the fixtures folder.
Sample code for uploading pdf file:
const fileName = 'myfile.pdf';
cy.fixture(fileName).then(fileContent => {
cy.get('#filesToUpload').upload({ fileContent, fileName, mimeType: 'application/pdf' }, { subjectType: 'input' });
});
You can also find more workarounds here: https://github.com/cypress-io/cypress/issues/170

Answer 3

As mentioned by #bushra you need to install the 'cypress-file-upload' package and then you can do this :)
Cypress.Commands.add("UploadFile", function () {
cy.fixture("someFile", "binary")
.then(Cypress.Blob.binaryStringToBlob)
.then((fileContent) => {
cy.get('someElement').attachFile({
fileContent,
filePath: "someFile.pdf",
fileName: "someFile.pdf",
});
});