I'm trying to implement file upload/download in my website.
When I'm doing the download part, I send Content-Type: 'application/octet-stream;charset=UTF-8' as a part of the request's headers.
When I get it, I can see the blob file in the Networks tab of my dev tools. When I see the response of what is supposed to be a .png file, I can see some stuff related to png, or an image file, and when it's supposed to be an .xlsx file (my primary objective to get it working), I can see stuff related to xml so I'm pretty sure the blob is correct. However, when I download it as such:
//when the GET request sends a successful response
blob = new Blob([dataDownload.value]);
//when the download button is clicked (only visible if blob is present)
if (blob) {
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = `my-file-name.xlsx`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
console.log('download complete');
}
I can't open the file. Same with if I upload and try to download a .png file and change the file extensions either in code or manually by overwriting the file extension.
When the same request is tested locally on insomnia/postman, it works fine. What am I doing wrong?
