Wrong API on file-upload using Cypress.io for E2E testing - node.js

Question

I am testing a portal with Cypress.io, which has a file upload functionality.
But my file always failed to upload because the API call is going wrong.
Correct API Call:
**
POST 200 /etl/v1.0.0/datauploaderetl/spaces/etl_jyddc0tx/data-files
**
But when uploading through Cypress, the following is the URL:
**
POST 404 /etl/v1.0.0/datauploaderetl/data-files
**
As you can clearly see, the API is incorrect. I added the wait here, still, it doesn't work.
Following is the piece of code:
cy.fixture(fileName1).then(fileContent => {
cy.get('input[type="file"]').attachFile({
fileContent: fileContent.toString(),
fileName: fileName1,
mimeType: fileType
})
});
cy.waitUntil(() => cy.get(":nth-child(98) > .modal > .modal-lg > .modal-content > .modal-body")
.should('contain.text', 'Status: completed')
);
Please help!

Answer 1

At Command.js, add below code:
let LOCAL_STORAGE_MEMORY = {};
Cypress.Commands.add("saveLocalStorage", () => {
Object.keys(localStorage).forEach(key => {
LOCAL_STORAGE_MEMORY[key] = localStorage[key];
});
});
Cypress.Commands.add("restoreLocalStorage", () => {
Object.keys(LOCAL_STORAGE_MEMORY).forEach(key => {
localStorage.setItem(key, LOCAL_STORAGE_MEMORY[key]);
});
});
Then at the test case file, add below beforeEach and afterEach block respectively:
beforeEach(() => {
cy.restoreLocalStorage();
})
afterEach(() => {
cy.saveLocalStorage();
})
This will solve the issue where Cypress clears the "local storage" at the browser.

Answer 2

As per documentation this is the way to upload file :
cy.fixture('filepath').as('filetoupload')
cy.get('input[type=file]').then(function($input) {
// convert the logo base64 string to a blob
const blob = Cypress.Blob.base64StringToBlob(this.filetoupload, fileType)
$input.fileupload('add', { files: blob })
})
or
cy.fixture('filepath').as('filetoupload')
cy.get('input[type=file]').then(function(el) {
// convert the logo base64 string to a blob
const blob = Cypress.Blob.base64StringToBlob(this.filetoupload,fileType )
const file = new File([blob], '<path>', { type: fileType })
const list = new DataTransfer()
list.items.add(file)
const myFileList = list.files
el[0].files = myFileList
el[0].dispatchEvent(new Event('change', { bubbles: true }))
})
https://docs.cypress.io/api/utilities/blob.html#Image-Fixture