Download and zip files in React?

reactjs react-redux zip zipfile jszip
Arturo Aguila picture Arturo Aguila · Dec 11, 2018 · Viewed 7.2k times · Source

I have an application that stores consultations for users. The consultation has data about the user and has documents attached to the consultation. My goal is to return all documents that were attached to a consultation in a zip to the user. Pretty straight forward.

We have a 5 second timeout restriction. Originally I was thinking we could just download the files and zip them on the server side. That way I could just make a new endpoint that returned the zip to the user. But because of the 5 second time out that may not work.

So I'm looking into downloading and zipping the files on the client side. The front end is built in React and I've been looking into using JSZip. Although almost everything I've found that uses JSZip is using it on the server side.

Is it possible to download and zip files on the client side using React? Is there a library that I could use? Or should this all be on the server side?

Answer

Sinane picture Sinane · Dec 11, 2018

You can use JsZip on Client Side. For example, if you want to download an image, you need its url. Then, do a request with axios. Like this:

request = (currentUrl: string): Promise<void> => axios({
    url: currentUrl,
    method: 'GET',
    responseType: 'blob',
}).then((response) => {
    const url: string = window.URL.createObjectURL(new Blob([response.data]));
});

then use the url that axios gave you in response to download your file

Related questions

axios post request to send form data

axios POST request is hitting the url on the controller but setting null values to my POJO class, when I go through developer tools in chrome, the payload contains data. What am I doing wrong? Axios POST Request: var body = { …

Read More
What is mapDispatchToProps?

I was reading the documentation for the Redux library and it has this example: In addition to reading the state, container components can dispatch actions. In a similar fashion, you can define a function called mapDispatchToProps() that receives the dispatch() …

Read More
Re-render React component when prop changes

I'm trying to separate a presentational component from a container component. I have a SitesTable and a SitesTableContainer. The container is responsible for triggering redux actions to fetch the appropriate sites based on the current user. The problem is the …

Read More