Problem downloading documents from package with rest API

Hi Guillaume,

Thanks for your post! Few questions to help understand the issue better:

-By "a preview of what type of content my front-end is receiving", do you mean the response your back end sends back to your front end, or what you saw when you opened the downloaded zip in notepad? Or are these two results the same?

-If the former - meaning probably your backend sends incorrectly encoded file - what if you directly hit the backend link in browser, or any other way to separately test your backend response?

Behind the scene, I've tested with Java Spring MVC backend + Fetch API to reproduce a similar flow, and it works for me. Below are the codes I used:

Java end:

    @RequestMapping(value="/zip", produces="application/zip")
    @CrossOrigin
    public void zipFiles(HttpServletResponse response) throws IOException {
        response.setStatus(HttpServletResponse.SC_OK);
        response.addHeader("Content-Disposition", "attachment; filename=\"attachment.zip\"");
        response.addHeader("Content-Type", "application/zip");

        String API_KEY = "YkJmxxxZ3NBUg==";
        String API_URL = "https://sandbox.esignlive.com/api";
        EslClient eslClient = new EslClient(API_KEY, API_URL);

        byte[] documentZip = eslClient.downloadZippedDocuments(new PackageId("Xs-rVmDCCHqiVLMyoaxwnceO8tI="));
        
        response.setContentLength(documentZip.length);
        OutputStream os = response.getOutputStream();

        try {
           os.write(documentZip , 0, documentZip.length);
        } catch (Exception excp) {
           //handle error
        } finally {
            os.close();
        }
    }

Front end:

fetch('http://localhost:8080/oss/zip')
 .then(resp => {
     const blob = resp.blob()
     console.log(resp)
     console.log(blob)
     return blob
 })
  .then(blob => {
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    // the filename you want
    a.download = 'attachment.zip';
    document.body.appendChild(a);
    a.click();
    window.URL.revokeObjectURL(url);
    alert('your file has downloaded!'); 
  })
  .catch(() => alert('oh no!'));
 

During the test, I found only "const blob = resp.blob()" works for me, not "const blob = new Blob([resp],{type:'application/octet-stream'})". But I doubt it's the cause of issue for you.

Duo

Update:

Below Node JS code as backend also works for me:

var request = require('request');

var eslFunctions = module.exports = 
{

    downloadZip: function(req, res){

        var options = 
        { 
            method: 'GET',
            url: 'https://sandbox.esignlive.com/api/packages/Xs-rVmDCCHqiVLMyoaxwnceO8tI=/documents/zip',
            headers: 
            { 
                accept: 'application/zip',
                authorization: 'Basic xxxxxxxx'
            }
        };

          request(options).on('response', function(response) {
            res.set({
                "Content-Type": "application/zip",
                  "Content-Disposition" : "attachment; filename=download.zip"
            });
        })
        .pipe(res);
    }

};

I also tried the code around "res.end(response.body)", but I found the downloaded zip can't be opened in winRAR and the downloaded size is larger than the actual size - not sure if it's the same behavior at your end.

Duo

Hi,

It worked! Apparently my front-end was not the problem, I used your NodeJs code with pipe(res). I guess the zip was not able to open because of the res.end..

Thank you so much again for your fast answer! :)

- Guillaume

Glad it works for you!

Duo