Styjun

Cause of continuous spectral lines

What are the words for people who cause trouble believing they know better?

How many times can you cast a card exiled by Release to the Wind?

How is it possible that Gollum speaks Westron?

Avoiding cliches when writing gods

What's up with this leaf?

What can cause the front wheel to lock up when going over a small bump?

How did students remember what to practise between lessons without any sheet music?

When conversion from Integer to Single may lose precision

Orange material in grout lines - need help to identify

Select items in a list that contain criteria #2

How to translate “Me doing X” like in online posts?

Strange symbol for two functions

siunitx error: Invalid numerical input

Is it possible to (7 day) schedule sleep time of a hard drive?

Implement Homestuck's Catenative Doomsday Dice Cascader

Are "living" organ banks practical?

Turing patterns

Does there exist a word to express a male who behaves as a female?

How bad would a partial hash leak be, realistically?

Does an ice chest packed full of frozen food need ice?

How to generate random points without duplication?

Question about JavaScript Math.random() and basic logic

Building a road to escape Earth's gravity by making a pyramid on Antartica

Zip File downloaded from ReactJs/Axios is corrupted

Download multiple files as a zip-file using phpdownloaded zip file corruptedBitBucket - download source as ZIPDownloaded zip file is corruptedHow to download files using axiosFileSaver downloading corrupted ZIP fileDownload an epub file through axios & react-file-download lbraries in reactjsUnable to download zip file using axiosDownload and zip files in React?Download zip files using axios

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

3

I'm trying to download a zip file from a Django api and have the user download it. There are two .csv files in the zip.

I am able to download a single .csv files individually, but when I try to download the zip and unzip, I get errors that the zip is corrupted. For sanity check, I am able to send the request via Postman. I am able to successfully download and unzip the file using that.

Here is my code fragment:

 axios
 .post('http://0.0.0.0:8000/sheets/', data,
 
 headers: 
 'Content-Type': 'multipart/form-data',
 'responseType': 'arraybuffer'
 
 )
 .then(res => {
 console.log(res.data)
 const disposition = res.request.getResponseHeader('Content-Disposition')
 var fileName = "";
 var filenameRegex = /filename[^;=n]*=((['"]).*?2|[^;n]*)/;
 var matches = filenameRegex.exec(disposition);
 if (matches != null && matches[1]) 
 fileName = matches[1].replace(/['"]/g, '');
 
 let blob = new Blob([res.data], type: 'application/zip' )

 const downloadUrl = URL.createObjectURL(blob)
 let a = document.createElement("a"); 
 a.href = downloadUrl;
 a.download = fileName;
 document.body.appendChild(a);
 a.click();

django reactjs zip axios zipfile

share|improve this question

asked Jan 29 at 4:53

btbam91btbam91

67211

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Did you find a solution? I'm struggling with the same issue :(
  
  – Tomer
  Mar 24 at 11:55
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Posted the answer below!
  
  – btbam91
  Mar 24 at 15:31
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  The file shows corrupted in my case, without the headers also. Am executing the same code as above. Does anyone solved the issue? Any lead will be helpful.
  
  – Vishnu
  Apr 2 at 18:31
  

  
  
  
  

add a comment | 

3

I'm trying to download a zip file from a Django api and have the user download it. There are two .csv files in the zip.

I am able to download a single .csv files individually, but when I try to download the zip and unzip, I get errors that the zip is corrupted. For sanity check, I am able to send the request via Postman. I am able to successfully download and unzip the file using that.

Here is my code fragment:

 axios
 .post('http://0.0.0.0:8000/sheets/', data,
 
 headers: 
 'Content-Type': 'multipart/form-data',
 'responseType': 'arraybuffer'
 
 )
 .then(res => {
 console.log(res.data)
 const disposition = res.request.getResponseHeader('Content-Disposition')
 var fileName = "";
 var filenameRegex = /filename[^;=n]*=((['"]).*?2|[^;n]*)/;
 var matches = filenameRegex.exec(disposition);
 if (matches != null && matches[1]) 
 fileName = matches[1].replace(/['"]/g, '');
 
 let blob = new Blob([res.data], type: 'application/zip' )

 const downloadUrl = URL.createObjectURL(blob)
 let a = document.createElement("a"); 
 a.href = downloadUrl;
 a.download = fileName;
 document.body.appendChild(a);
 a.click();

django reactjs zip axios zipfile

share|improve this question

asked Jan 29 at 4:53

btbam91btbam91

67211

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Did you find a solution? I'm struggling with the same issue :(
  
  – Tomer
  Mar 24 at 11:55
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Posted the answer below!
  
  – btbam91
  Mar 24 at 15:31
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  The file shows corrupted in my case, without the headers also. Am executing the same code as above. Does anyone solved the issue? Any lead will be helpful.
  
  – Vishnu
  Apr 2 at 18:31
  

  
  
  
  

add a comment | 

I'm trying to download a zip file from a Django api and have the user download it. There are two .csv files in the zip.

I am able to download a single .csv files individually, but when I try to download the zip and unzip, I get errors that the zip is corrupted. For sanity check, I am able to send the request via Postman. I am able to successfully download and unzip the file using that.

Here is my code fragment:

 axios
 .post('http://0.0.0.0:8000/sheets/', data,
 
 headers: 
 'Content-Type': 'multipart/form-data',
 'responseType': 'arraybuffer'
 
 )
 .then(res => {
 console.log(res.data)
 const disposition = res.request.getResponseHeader('Content-Disposition')
 var fileName = "";
 var filenameRegex = /filename[^;=n]*=((['"]).*?2|[^;n]*)/;
 var matches = filenameRegex.exec(disposition);
 if (matches != null && matches[1]) 
 fileName = matches[1].replace(/['"]/g, '');
 
 let blob = new Blob([res.data], type: 'application/zip' )

 const downloadUrl = URL.createObjectURL(blob)
 let a = document.createElement("a"); 
 a.href = downloadUrl;
 a.download = fileName;
 document.body.appendChild(a);
 a.click();

django reactjs zip axios zipfile

share|improve this question

asked Jan 29 at 4:53

btbam91btbam91

67211

 axios
 .post('http://0.0.0.0:8000/sheets/', data,
 
 headers: 
 'Content-Type': 'multipart/form-data',
 'responseType': 'arraybuffer'
 
 )
 .then(res => {
 console.log(res.data)
 const disposition = res.request.getResponseHeader('Content-Disposition')
 var fileName = "";
 var filenameRegex = /filename[^;=n]*=((['"]).*?2|[^;n]*)/;
 var matches = filenameRegex.exec(disposition);
 if (matches != null && matches[1]) 
 fileName = matches[1].replace(/['"]/g, '');
 
 let blob = new Blob([res.data], type: 'application/zip' )

 const downloadUrl = URL.createObjectURL(blob)
 let a = document.createElement("a"); 
 a.href = downloadUrl;
 a.download = fileName;
 document.body.appendChild(a);
 a.click();

share|improve this question

asked Jan 29 at 4:53

btbam91btbam91

67211

share|improve this question

asked Jan 29 at 4:53

btbam91btbam91

67211

asked Jan 29 at 4:53

btbam91btbam91

67211

asked Jan 29 at 4:53

btbam91btbam91

67211

1 Answer
1

active

oldest

votes

0

The problem was that 'responseType': 'arraybuffer' should not be in "headers."

share|improve this answer

answered Mar 24 at 15:30

btbam91btbam91

67211

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Then where should it be?
  
  – Tomer
  Mar 25 at 10:42
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54414054%2fzip-file-downloaded-from-reactjs-axios-is-corrupted%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

The problem was that 'responseType': 'arraybuffer' should not be in "headers."

share|improve this answer

answered Mar 24 at 15:30

btbam91btbam91

67211

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Then where should it be?
  
  – Tomer
  Mar 25 at 10:42
  

  
  
  
  

add a comment | 

0

The problem was that 'responseType': 'arraybuffer' should not be in "headers."

share|improve this answer

answered Mar 24 at 15:30

btbam91btbam91

67211

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Then where should it be?
  
  – Tomer
  Mar 25 at 10:42
  

  
  
  
  

add a comment | 

The problem was that 'responseType': 'arraybuffer' should not be in "headers."

share|improve this answer

answered Mar 24 at 15:30

btbam91btbam91

67211

share|improve this answer

answered Mar 24 at 15:30

btbam91btbam91

67211

answered Mar 24 at 15:30

btbam91btbam91

67211

answered Mar 24 at 15:30

btbam91btbam91

67211