Download and manipulate svg file with Axios and React

user_15368485 0
Viewed 707

I'd like to download to server and then work with svg image in my app using axios 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) {
//???
}

This function must download the file using url and filename. But what must I write in downloader function to make it work with my axios function? And how can I access the downloaded file afterwards, say, delete some elements from svg and insert the rest as image to my component?

axios reactjs javascript
1 Answers

  downloadFile(){
    fetch('/yourrul')
    .then((res)=>res.blob())
    .then((blob)=>{
      let url=  URL.createObjectURL(blob);
      let pom = document.createElement('a');
      pom.setAttribute('href',url)
      pom.setAttribute('download', 'yourfilename.extention');
      pom.click(); // this will download the file
    })
  }

user_93581410
Related