I have two separate projects. Client: React, Server: NodeJS
I create excel on the NodeJS side by submitting a form by React.
I want to download this excel from React side. However, I couldn't download it.
NodeJS code
res.setHeader('Content-Type', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
res.setHeader("Content-Disposition", "attachment; filename=" + "Report.xlsx");
workbook.xlsx.write(res)
.then(function(){
res.end();
});
NodeJS return network layer
First try React.js code
startDownload(response,"resobyte.xlsx")
function startDownload(file, fileName) {
const url = window.URL.createObjectURL(new Blob([file]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', fileName);
document.body.appendChild(link);
link.click();
link.parentNode.removeChild(link);
}
Second try React.js code
let blob = new Blob([response], {type: 'vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'});
FileSaver.saveAs(blob, 'fileName.xlsx");
The file has been downloaded.
My React Service Call
export const createExcel = async (model) => {
let response = () => {
return new Promise(function(resolve, reject) {
fetch(API_URL + '/api/excel/create', {
method: 'POST',
responseType: 'arrayBuffer',
headers: {
'Content-Type': 'application/json',
'x-access-token' : TokenService.getToken()
},
body: JSON.stringify(model),
}).then(response => {
resolve(response);
});
});
};
let responseData = await response();
return responseData;
}
Error open excel file
Related
I have a nodeJs server and react app. and in my NodeJs I am returning an excel file and I was able to download it in postman when clicking send and download. But in react the file is download but give error when openning that it is corrupt
Here is my implementation in ReactJS (Thats making the issue)
export const exportUsersToExcel = async (token) => {
try {
axios
.get(
`${process.env.REACT_APP_SERVER}/api/dashboard/users/excel`,
{
headers: { "auth-token": token },
},
{ responseType: "blob" }
)
.then((response) => {
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement("a");
link.href = url;
link.setAttribute("download", "Users.xlsx");
document.body.appendChild(link);
link.click();
});
} catch (error) {
console.log("Error Exporting Users");
return error;
}
};
and I am sending the file in NodeJS like this
res.set({
"Content-disposition": `attachment; filename=Users.xlsx`,
"Content-Type":
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
});
return workbook.xlsx.write(res).then(() => {
res.status(200).end();
});
I had a similar problem, and I solved it with the following (React) code:
Axios
export const getFile = async () => {
return await api.get<any>(`${PATH_API}`, {
responseType: 'arraybuffer',
headers: {'Content-Type': 'blob'},
});
};
Function in .tsx file
const downloadFile = async () => {
const resp = await getFile();
const link = document.createElement('a');
const fileName = 'file.extension';
link.setAttribute('download', fileName);
link.href = URL.createObjectURL(new Blob([resp.data]));
document.body.appendChild(link);
link.click();
link.remove();
};
Render function
<a onClick={() => downloadExceptionFile()} href="#" download>
download
</a>
The ploblem with this is that URL.createObjectURL() is deprecated. I don't know how to resolve this at this point.
I have a simple function to return a pdf file on my server which works as expected but not the first time the page loads. The first time I try to download the file, the server console log shows me it's there, but the React page console has null. If I click on the download link again, the file contents are returned. Can someone help me please?
React function that calls getDocByLoc (which is itself called by a button click)
async function fetchInvoice(fileLocation) {
setInvoiceStatus('loading');
setInvoice(await invoiceService.getDocByLoc({ location: fileLocation }));
setInvoiceStatus('succeeded');
downloadFile(invoice);
}
// download file
function downloadFile(invoice) {
if (invoiceStatus === 'succeeded') {
let url = window.URL.createObjectURL(invoice);
let a = document.createElement('a');
a.href = url;
a.download = 'test.pdf';
a.click();
}
}
React fetch code
function getDocByLoc(location) {
return fetchWrapper.getDocument(`/invoices/document`, location);
}
fetchWrapper code
function getDocument(url, location) {
const requestOptions = {
method: 'POST',
headers: {
Accept: 'application/json, application/x-www-form-urlencoded',
'Content-Type': 'application/json',
...authHeader(url),
},
credentials: 'include',
body: JSON.stringify(location),
};
return fetch(`${AppSettings.serverEndpoint}${url}`, requestOptions).then(
handleResponseForDocuments
);
}
Node file reader code
function getDocumentByLocation(req, res, next) {
const { location } = req.body;
fs.readFile(location, (err, data) => {
if (err) res.status(500).send(err);
console.log('data: ', data);
res
.contentType('application/pdf')
.send(
`data:application/pdf;base64,${new Buffer.from(data).toString(
'base64'
)}`
);
});
}
I have code that just downloads a file that exists in my backend. I can see the pdf on the backend is created properly and in the right place, but when I send and download the file to the frontend and open it I get the error "Failed to load pdf document" no matter which browser I use. I think this must mean there is something wrong with my blob downloading code since I can open and see the file on the backend, but I can't figure it out. I have tried following many examples online and I get the same issue regardless of what I have tried.
server.js (node backend file)
app.get('/api/v1/getPdf', function(req, res) {
let resolve = require('path').resolve
res.sendFile(resolve('./tickets/tickets.pdf'));
});
PrintDetails.js (React js code for downloading pdf) - Note: I only included the relevant parts
class PrintDetails extends React.Component {
async printTickets() {
let file = await getTicketsPdf();
console.log(file);
const blob = new Blob([file], {type: 'application/pdf'});
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = 'tickets.pdf';
document.body.appendChild(link);
link.click();
setTimeout(function() {
document.body.removeChild(link);
}, 100);
}
render() {
return (
<div>
<button className="download-button-icon" onClick={this.printTickets}>Download</button>
</div>
)
}
async function getTicketsPdf() {
let data = {};
await (async () => {
const rawResponse = await fetch('/api/v1/getPdf', {
method: 'get',
headers: {
'responseType': 'blob',
'Content-Type': 'application/json'
},
});
data = await rawResponse;
})();
return data;
}
Here's my implementation using axios and file-saver.
Node.js backend
app.get('/api/v1/getPdf', function(req, res) {
res.download('./tickets/tickets.pdf');
});
React frontend
import { saveAs } from 'file-saver'
.
.
.
async function printTickets() {
const { data } = await getTicketsPdf()
const blob = new Blob([data], { type: 'application/pdf' })
saveAs(blob, "tickets.pdf")
}
async function getTicketsPdf() {
return axios.get('/api/v1/getPdf', {
headers: {
'Content-Type': 'multipart/form-data'
},
responseType: 'arraybuffer'
})
}
In my node application, I want to get a file from one server, and then upload it into another server. I have the following code:
const axios = require("axios");
const FormData = require("form-data");
const { createWriteStream, createReadStream } = require("fs");
const response = await axios({
url: "https://first-server/image.png",
method: "GET",
responseType: "stream",
});
await new Promise((res) => {
response.data.pipe(
createWriteStream("someFile.png").on("finish", () => {
res();
})
);
});
const form = new FormData();
form.append("file", createReadStream("./someFile.png"));
const postHeaders = {
headers: {
Authorization: "Bearer " + env("APY_KEY"),
...form.getHeaders(),
},
data: form,
};
axios.post("https://second-server.com/api", form, postHeaders)
.then((response) => {
console.log(JSON.stringify(response.data));
})
This code works, but I think it's not the right way to do this, since it writes the retrieved file into the local disc before posting it again into the second server. I need to be able to upload the file without writing it into the local disc. Is there any way?
Just replace form.append("file", createReadStream("./someFile.png")); with
form.append("file", response.data);
Both response.data and createReadStream("./someFile.png") are readable stream.
Note: You can directly transfer returned stream data without any need to create temporary file.
const axios = require("axios");
const FormData = require("form-data");
axios({
url: "http://localhost:3000/temp.png",
method: "GET",
responseType: "stream",
}).then(response => {
response.data.on("data", function(data) {
const form = new FormData();
form.append("file", data);
const postHeaders = {
headers: {
// Authorization: "Bearer " + env("APY_KEY"),
...form.getHeaders(),
},
data: form,
};
axios.post("http://localhost:8000/api", form, postHeaders)
.then((response) => {
// console.log(JSON.stringify(response.data));
})
.catch(function(error){
console.log(error)
});
});
})
.catch(function(error){
console.log(error)
});
I am able to succesfully upload a blob with proper contents from my web browser, but when I do it from react-native, the upload file is empty. Here is the code:
async function doit() {
const data = new FormData();
data.append('str', 'strvalue');
data.append(
'f',
new File(['foo'], 'foo.txt', {type: 'text/plain'}),
);
await fetch('http://localhost:3002/upload', {
method: 'POST',
body: data
});
}
However doing this same code from react-native, it uploads, but the file is empty.
Here is the node.js server I am using to test this. Loading http://localhost:3002 gives you a button called "upload it". Clicking it does the upload from the web. Screenshots of results are below.
var multiparty = require('multiparty');
var http = require('http');
http
.createServer(function (req, res) {
if (req.url === '/upload' && req.method === 'POST') {
console.log('multipart here');
var form = new multiparty.Form();
form.parse(req, function (err, fields, files) {
console.log(require('util').inspect({ fields, files }, false, null, true));
res.setHeader('Content-Type', 'application/json');
res.end(JSON.stringify({ bar: true }));
});
return;
}
console.log('here');
// show a file upload form
res.writeHead(200, { 'content-type': 'text/html' });
res.end(
`
<script>
async function doit() {
const data = new FormData();
data.append('str', 'strvalue');
data.append(
'f',
// new File([new Blob(['asdf'], {type : 'text/plain'})], 'filename.txt'),
new File(['foo', 'what', 'the', 'hell'], 'foo.txt', {type: 'text/plain'}),
);
const res = await fetch('http://localhost:3002/upload', {
method: 'POST',
body: data
});
console.log(JSON.stringify(res, null, 4));
}
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('b').addEventListener('click', doit, false)
}, false);
</script>
<button type="button" id="b">upload it</button>
`
);
})
.listen(3002);
From web browser we see the node server logs this, notice file size is 14.
However from react-native we see file size is 0:
I faced the same problem recently while posting an image from a react-native app to a server. However, I was able to make it work by appending the name and type of the file to the formData instance.
Here, the uri argument to uploadImageAsync is passed as a route parameter from the previous screen.
const postShoutHandler = async () => {
setShoutUploadStatus("Started Upload");
const response = await uploadImageAsync(route.params.captures);
const uploadResult = await response.json();
if (uploadResult === "Upload successful") {
setShoutUploadStatus("Success");
navigation.navigate("Home");
} else {
setShoutUploadStatus("Failed");
}
};
/* <--Upload image function --> */
const uploadImageAsync = (uri: string) => {
const apiUrl = "https://www.yourserver.com/image";
let uriParts = uri.split(".");
let fileType = uriParts[uriParts.length - 1];
let formData = new FormData();
formData.append("img", {
uri,
name: `photo.${fileType}`,
type: `image/${fileType}`,
});
formData.append("description", "HEY");
let options = {
method: "POST",
body: formData,
headers: {
Accept: "application/json",
"Content-Type": "multipart/form-data",
Authorization: "Bearer " + accessToken,
},
};
return fetch(apiUrl, options);
};
/* <--Upload image function --> */
Here is the Image configuration.
const photoData = await camera.takePictureAsync({
base64: true,
exif: false,
});