Turning image response from server into downloadable file

Question

I'm making an ajax POST call to my server, generating an ugly remote download URL, passing that to nginx with proxy_pass and then serving the file to the client. See here for process. The image seems to make it to the client, I just can't get it to download.

As seen in screenshots, the chrome response preview shows the jpeg, the headers look good (content-disposition attachment).

How can I turn this response into a downloadable file for the user?

I've tried https://stackoverflow.com/a/23797348/5697126, however, the file that gets downloaded is corrupted and 150% size of the real image. Here's my attempt, it does download a file, but the file is corrupted with the message - Error interpreting JPEG image file (Not a JPEG file: starts with 0xef 0xbf)

const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
  const matches       = filenameRegex.exec(_responseHeaders['content-disposition']);
  let fileName        = '';
  if (matches != null && matches[1])
  {
    fileName = matches[1].replace(/['"]/g, '');
  }

  let fileType = _responseHeaders['content-type'];
  let blob     = new Blob([_response], {type: fileType});

  let URL         = window.URL || window.webkitURL;
  let downloadUrl = URL.createObjectURL(blob);

  if (fileName)
  {
    // use HTML5 a[download] attribute to specify filename
    let a = document.createElement('a');
    // safari doesn't support this yet
    if (typeof a.download === 'undefined')
    {
      window.location = downloadUrl;
    }
    else
    {
      a.href     = downloadUrl;
      a.download = fileName;
      document.body.appendChild(a);
      a.click();
    }
  }
  else
  {
    window.location = downloadUrl;
  }

  setTimeout(function ()
  {
    URL.revokeObjectURL(downloadUrl);
  }, 100); // cleanup

you can my download tool, it detects a lot of conditions and environs and input formats (blob, url, etc) to make the download happen as broadly as possible: https://github.com/rndme/download — dandavis, Sep 27 '18 at 20:28
what do you mean by "turn into a downloadable file for the user" ? like add button "Download" or what ? — kerrytazi, Sep 27 '18 at 20:41
I found the simplest way to force the browser to download a file is to change the `Content-Type` to `application/octet-stream`. — Richard Smith, Sep 27 '18 at 20:42
@kerrytazi I mean I want the file to download, like it should since I set the content-disposition as attachment — Micheal C Wallas, Sep 27 '18 at 20:46

score 0 · Accepted Answer · answered Sep 28 '18 at 14:02

Solved!

I had to set the ajax (axios) response type to 'blob' as the default is json. See - https://github.com/axios/axios/issues/448

Once the response was blob, I just piped the _response to URL.createObjectURL and then rest of the code I posted worked like a charm

Turning image response from server into downloadable file

1 Answers1