I am working with React Js and Axios to make requests to an API. I am trying to download files via API with ReactJs, but when they download and try to open, I get an error message: 'the file is damaged or damaged'.
The files are obtained through a GET request and can be of type pdf, xlxs, docx and others), and the mime is obtained through props that es from a parent ponent
This is my code (a part of my ponent)
fetchFile(){
axios
.get(`/someurl/thefiles/${this.props.file.id}`, { headers })
.then(response => {
let url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement("a");
link.href = url;
link.setAttribute("download",
`${this.props.file.name}.${this.props.file.mime}`);
document.body.appendChild(link);
link.click();
});
}
render(){
return(
<button onClick={this.fetchFile}> Download file </button>
)
}<script src=".6.1/umd/react.production.min.js"></script>
<script src=".6.1/umd/react-dom.production.min.js"></script>I am working with React Js and Axios to make requests to an API. I am trying to download files via API with ReactJs, but when they download and try to open, I get an error message: 'the file is damaged or damaged'.
The files are obtained through a GET request and can be of type pdf, xlxs, docx and others), and the mime is obtained through props that es from a parent ponent
This is my code (a part of my ponent)
fetchFile(){
axios
.get(`/someurl/thefiles/${this.props.file.id}`, { headers })
.then(response => {
let url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement("a");
link.href = url;
link.setAttribute("download",
`${this.props.file.name}.${this.props.file.mime}`);
document.body.appendChild(link);
link.click();
});
}
render(){
return(
<button onClick={this.fetchFile}> Download file </button>
)
}<script src="https://cdnjs.cloudflare./ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>The mime and filename e from a parent ponent.
The problem I have is that I download a file, xlsx for example, and when I open it I get an error box with the message 'The file is damaged', if I download a pdf file, it downloads without problem and when I open the pdf is pletely blank: the same number of sheets as the original but all white.
I am trying from chrome, firefox and brave and the error is the same
Share Improve this question asked Oct 7, 2020 at 20:13 WalWal 431 silver badge6 bronze badges 2- 2 Have you looked at this: gist.github./javilobo8/097c30a233786be52070986d8cdb1743? – hexbioc Commented Oct 7, 2020 at 20:41
- You're the best! Why didn't you put it as an answer? – Wal Commented Oct 7, 2020 at 21:12
1 Answer
Reset to default 6This answer is by @hexebioc
fetchFile(){
axios({
url: `/someurl/thefiles/${this.props.file.id}`,
method: "GET",
headers: headers,
responseType: "blob" // important
}).then(response => {
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement("a");
link.href = url;
link.setAttribute(
"download",
`${this.props.file.name}.${this.props.file.mime}`
);
document.body.appendChild(link);
link.click();
});
}
render(){
return(
<button onClick={this.fetchFile}> Download file </button>
)
}<script src="https://cdnjs.cloudflare./ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>