How do I convert a data buffer in JavaScript into a file?

Question

I am receiving a data buffer from an node/express endpoint on my client side and I want to convert the buffer into a file.

The file may be a pdf, text document, or image. The only information the endpoint tells me is that it's sending an octet stream.

How do I go about doing this?

This is the code I have so far on my client side

const xhr = new XMLHttpRequest();
xhr.open("POST", "MY_URL", true);
xhr.responseType = "arraybuffer";

// I need to send some data for the request
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");

// send request
xhr.send(`identifier=${myIdentifier}`);

xhr.onload = function (xEvent)
{
    const arrayBuffer = xhr.response;
    if (arrayBuffer)
    {
        const byteArray = new Uint8Array(arrayBuffer);

        const url = window.URL.createObjectURL(new Blob([byteArray]));

        const link = document.createElement("a");
        link.href = url;
        link.setAttribute("download", "file.pdf"); //or any other extension
        document.body.appendChild(link);
        link.click();
    }
};

are you getting type of the file or is there any possibility to get file type? — Vishnu Shenoy
– Vishnu Shenoy, Commented Nov 11, 2020 at 5:08
@VishnuShenoy Thank you for replying. The endpoint on my server actually gets the data from an external private endpoint and forwards it to my client. I'm mostly sure the private endpoint sends file type, but I don't know how to get the file type from the response and send it to my client. On the private endpoint the file downloads and opens correctly. — StackMatch
– StackMatch, Commented Nov 11, 2020 at 5:36
i have done this but it need file type then only it will work.... wait ill share you the code — Vishnu Shenoy
– Vishnu Shenoy, Commented Nov 11, 2020 at 5:42

Vishnu Shenoy · Accepted Answer · 2020-11-11 06:06:43Z

5

convert arraybuffer to base64 and then to url, generate fileUrl for view

arrayBufferToBase64(Arraybuffer, Filetype, fileName) {
        let binary = '';
        const bytes = new Uint8Array(Arraybuffer);
        const len = bytes.byteLength;
        for (let i = 0; i < len; i++) {
          binary += String.fromCharCode(bytes[i]);
        }
        const file = window.btoa(binary);
        const mimType = Filetype === 'pdf' ? 'application/pdf' : Filetype === 'xlsx' ? 'application/xlsx' :
          Filetype === 'pptx' ? 'application/pptx' : Filetype === 'csv' ? 'application/csv' : Filetype === 'docx' ? 'application/docx' :
            Filetype === 'jpg' ? 'application/jpg' : Filetype === 'png' ? 'application/png' : '';
        const url = `data:${mimType};base64,` + file;
    
        // url for the file
        this.fileUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);
    
        // download the file
          const a = document.createElement('a');
          a.href = url;
          a.download = fileName;
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
          window.URL.revokeObjectURL(url);
      }

edited Nov 11, 2020 at 6:06

answered Nov 11, 2020 at 5:49

Vishnu Shenoy

8726 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

StackMatch Over a year ago

I tried to use this but when the file downloads, my local PDF reader shows File type unknown (application/octet-stream) is not supported. I am only working with PDF files right now. Also, what is this in your answer?

Vishnu Shenoy Over a year ago

this is a public variable been accessed.. declare it on top as public fileUrl: any; if ur working only with pdf then use declare Filetype = pdf before calling fucntion

StackMatch Over a year ago

Yes, I did set the type as pdf. It just doesn't seem to work. I am just setting up a basic ad hoc proxy service for protected binary streams. Not really sure how I can do this. Thank you for sharing though!

zukethenuke Over a year ago

@StackMatch Did you find a solution for this? I have the same problem.

Vishnu Shenoy Over a year ago

I have shared the answer, pls chk the answer section

Collectives™ on Stack Overflow

How do I convert a data buffer in JavaScript into a file?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related