Download svg file with node server and React

JavaScript
1

I’d like to download to server and then work with svg image in my app using node server as backend and React as frontend. I’ve written the following function on the server side and it works downloading the file:

const https = require('https');
const fs = require('fs');

const downloader = (url, filename) => {
https.get(url, function(res){
    const fileStream = fs.createWriteStream(filename);
    res.pipe(fileStream);
    fileStream.on('finish', function() {
        fileStream.close();
        console.log('done');
                })
            })
};

downloader('https://www.humdes.com/local/tools/svg/?TYPE=calculation&KEY=proektor_1_3_b779c57622ad9891313a6046c1604cea', 'file.svg')

Thing is, I don’t now how to connect it to my React frontend. Say, I want to create a function that runs in ComponentDidUpdate:

downloader(this.state.imagesource, this.state.filename) {
//function that downloads file to server
}

This function must download the file using url and filename. But what must I write in downloader function to make it work with my node function?

2

Hey there,

I think the easiest solution is to listen to incoming get-requests from the frontend that hit a specific API route of your node server.

You can build this either in node directly or you can setup an expressjs server.

3

Can you plz explain how to do this? I’m relatively new to server stuff

4

Hey there,

this is not something you explain to someone in 5 minutes.

FreeCodeCamp has a dedicated certification for this:

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.