CODEWITHSUNDEEP
pythonreactjspython-2.7filedownload
Pratik
Pratik

Reputation: 1399

Download file functionality for react and python app

I have one button in my react code and when I click it I should be able to download a file. I am using Python for backend(Not any framework). For react part I think this link explains what should be done. On button click, I should do an API call and on its return, I can render this IFrame component. Also, one other answer recommends responseType: 'blob' in axios call. My question is what should the backend do if we want to send a file over.Let's assume it just creates a file and returns it. I am actually using one third-party product which has its own API interface but an example with requests library would do.

def function_called_From_endpoint():
    with open(path) as f:
        return {'data': f }

Is something like this right?

Upvotes: 2

Views: 3179

Answers (1)

Pratik
Pratik

Reputation: 1399

So, I made it work this way:

def function_called_From_endpoint():
   with open(file_path) as f:
      data = f.read()

   return {"data": data }

and on the front-end:

  axios({
        url: url, //your url
        method: 'GET',
        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', 'file.txt'); //or any other extension
         document.body.appendChild(link);
         link.click();
  });

As suggested by https://stackoverflow.com/a/53230807/5573241. It worked well.

Upvotes: 1

Related Questions