title: Download zip file from http api in react, Receiving error: "Unable to expand file.zip. It is an unsupported format"
body: <p>Thanks in advance for taking a look. I am working on being able to download a zip file from react through a django api request. I am able to click on my pop up that downloads the zip file, but when I double click on the zip file to open, I get this error: &quot;Unable to expand file_name.zip. It is an unsupported format&quot; My response with the zip file seems to be passing correctly to the front end, so I am thinking it may be something wrong with the react code when making the &quot;blob&quot;? Thanks again.</p>
  <p>Django code:</p>
  <pre><code>class DownloadZip(APIView):
      def post(self, request, format=None):
  
          # information to find file to create zip
          profile_name = request.data[&quot;profile&quot;]
          profile_year = request.data[&quot;year&quot;]
          
          # file path to create zips from
          path = str(Path(__file__).parent.resolve())
                  
          zip_dir = shutil.make_archive(profile_name + profile_year, &quot;zip&quot;, path + &quot;/&quot; + profile_name + profile_year)
  
          s = io.StringIO(zip_dir)
  
          response = HttpResponse(s, content_type = &quot;application/zip&quot;)
  
          zip_name = profile_name + profile_year + &quot;.zip&quot;
  
          response[&quot;Content-Disposition&quot;] = f&quot;attachment; filename={zip_name}&quot;
          
          return response
  </code></pre>
  <p>React code:</p>
  <pre><code>    downloadZip = async () =&gt; {
          const params = {
              profile: this.state.profileName,
              year: this.state.year,
          };
          axios({
              url: `${serverUrl}/download_zip`,
              method: &quot;post&quot;,
              data: params
          }).then(
              (res) =&gt; {
                  const url = window.URL.createObjectURL(new Blob([res.data],{type:'application/zip'}));
                  const link = document.createElement('a');
                  link.href = url;
                  link.setAttribute('download', 'file.zip');
                  document.body.appendChild(link);
                  link.click();
                  link.parentNode.removeChild(link);
              },
              (error) =&gt; {
                  console.log(error);
              });
          }
  
  </code></pre>
  <p>I did do a fellow commentor's suggestion, and updated to get route with query params, but am having the same issue. I can double click on the zip link on the web browser but a pop up appears &quot;Unable to expand filename.zip. It is an unsupported format&quot;</p>