How to download .zip file that i recieve from a HTTP response (axios PUT request)

Question

So the API's response contains data property which should contain the .zip file that i need. Its written in a format i do not understand.

The format:

I tried using .blob() as referenced in similar questions here on Stackoverflow, but it doesn't seem to work.

The ideal solution is this: when client presses the button, he should be prompted to download said .zip file (the one from the HTTP response) locally. I'm using axios and the request type is PUT.

My code example so far:

  const exportCards = () => {
    axios
      .put(url, {
        ids: ids,
      })
      .then((res) => {
        return res.data.blob();
      })
      .then((blob) => {
        var file = window.URL.createObjectURL(blob);
        window.location.assign(file);
      })
      .catch((e) => console.log(e));
  };

The backend is sending you bad data. It looks like the server code reads a zip file into a Node `Buffer`, and then serializes it into a JSON by using `Buffer.toString()`. This corrupts the data as those � characters show. It should have used `Buffer.toJSON()`. — tromgy, Feb 03 '22 at 13:17

pi88a · Answer 1 · 2022-07-23T14:14:00.900

What I wanted:

send files of any formats from the back-end to the front-end

My tools:

axios, express, saveAs

The problem I faced with:

Nothing helped me, probably because I did something wrong. But here is a simple and quick solution that I came up with:

//BE
const filename = "my-file-name.json";

const zip = new AdmZip();
zip.addFile(filename, body);
const content = zip.toBuffer();

res.set({
            "Content-Length": Buffer.byteLength(content), //I'm not sure if this is necessary, but it's better to let it be :-)
            "Content-Type": "text/plain",
            "Content-Disposition": `attachment; filename=${filename}.${format}`,
          });
res.status(200).send(content.toString("hex")); //my solution to the problem

//FE
const { headers, data } = await axios.post(myEndpoint);
const headerLine = headers["content-disposition"];
const filename = headerLine.replace(/[\w; ]+filename=/g, "");

const content = Buffer.from(data, "hex");
const blob = new Blob([content], { type: "application/zip" });
saveAs(blob, filename); //file-saver npm package

score 1 · Answer 2 · answered Feb 03 '22 at 11:05

1

a tag has download attribute, in .then you can try something like that

const url = new Blob([response.data],{type:'application/zip'});
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'file.zip'); //set download attribute to link
document.body.appendChild(link);
link.click(); // this will download file.zip

answered Feb 03 '22 at 11:05

Guram Khasia

114
4

1

I tried this and it doesnt work Gurika – Marko Marchisio Feb 04 '22 at 07:30
1

this does not work when when downloading zip file – Mohamed Raza Feb 07 '23 at 21:55

score 0 · Accepted Answer · answered Jul 05 '22 at 10:35

I would suggest fetch over axios in concern of zip file because sometimes the response in axios request is not accurate and you might fall into currupted zip file while downloading, the best might be using a package called file-saver and fetch. I am posting this answer to help the developers to grab the concept only, the code is tested in React.

package file-saver:https://www.npmjs.com/package/file-saver

Now make any function according to your choice in react, I am assuming functional component so will write method according to functional component syntax. note before using saveAs function you need to import from the installed package file-saver.

import { saveAs } from 'file-saver';

const downloadZipFileFromLaravel=()=>{
 fetch(`your url`)
           
                    .then(res => res.blob())
                    .then(blob => saveAs(blob, 'Auto Photos.zip')) // saveAs is a function from the file-saver package. 
              .catch((err) => {
                console.log(err.message);
              });
}

at the end you need to connect the function with a button with onClick. example

<button onClick={()=>downloadZipFileFromLaravel()}> </button>

Note: usage of file saver in pure javascript, you can check this: How to use filesaver.js

For more information you can see the below discussion: Reference: https://github.com/eligrey/FileSaver.js/issues/156

score 0 · Answer 4 · answered Nov 17 '22 at 21:05

Your problem is that you didn't explicitly specify the response type in your PUT request. This should work:

const exportCards = () => {
  axios
    .put(url, {
      ids: ids,
    }, {
      responseType: 'blob'
    })
    .then((res) => { // Now 'res.data' is Blob, not a string
      var file = window.URL.createObjectURL(res.data);
      window.location.assign(file);
    })
    .catch((e) => console.log(e));
};

How to download .zip file that i recieve from a HTTP response (axios PUT request)

4 Answers4