CODEWITHSUNDEEP
javascriptfilexmlhttprequestbufferbinary-data
StackMatch
StackMatch

Reputation: 99

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

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();
    }
};

Upvotes: 3

Views: 12281

Answers (1)

Vishnu Shenoy
Vishnu Shenoy

Reputation: 872

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);
      }

Upvotes: 5

Related Questions