Is it possible to directly parse a multipart/mixed response without needing to first convert it into a string?

Question

Is it possible to directly parse a multipart/mixed response without needing to first convert it into a string?

My current challenge involves receiving a multipart/mixed response over HTTP that includes JSON data and PDFs in byte format. Due to Angular's limitations with handling such responses, I have resorted to converting the response into a string using the responseType: 'text' option.

To work with this data, I break down the response, extract the JSON, and transform the PDF data into a Blob as shown below:

let pdf: Blob = new Blob([new TextEncoder().encode(bytestring)], { type: 'application/pdf' });

The issue arises when attempting to create a download link for the PDF using window.URL.createObjectURL(pdf), resulting in a damaged file that cannot be opened.

I have verified that Angular utilizes UTF-8 encoding when turning the response into a string. Additionally, setting up a separate route allows me to request a single PDF independently with responseType: 'blob' which successfully downloads a functional PDF. Comparison between the original PDF and the damaged one at a byte level in VS Code reveals no noticeable differences.

Given my ability to transfer a working PDF separately but facing challenges within the multipart request, it appears that the conversion of a PDF to a string and back may be causing issues. Is there a solution that avoids transforming the PDF into a string?

angular typescript parsing pdf multipart

Answer 1

Answer №1

After much exploration, I've cracked the code. The key lies in using responseType: 'blob' for the entire response and then converting it into both text and bytes. This allows you to parse JSON data, PDF headers, and build PDF files efficiently. Below is my functional Typescript implementation.

public async processMultipartData(multipartBody: Blob): Promise<MyMultipartResponse> {

    let bodyData: Uint8Array = new Uint8Array(await multipartBody.arrayBuffer());
    let bodyText: string = await multipartBody.text();
    
    // Extract file names from Content-Disposition Header.
    let filenames: RegExpMatchArray = bodyText.match(/filename.*\.pdf/gi)!; 
    let boundary: string = bodyText.substring(0, bodyText.indexOf('\n')).trim();
    
    let responseDataJson: string = bodyText.split(boundary)[1];
    // Parse the extracted JSON data into a JavaScript object.
    let responseData: MyJsonRepresentation = JSON.parse(responseDataJson.substring(responseDataJson.indexOf('{')));

    let encoder: TextEncoder = new TextEncoder();
    let startOfFile: Uint8Array = encoder.encode("%PDF");
    let endOfFile: Uint8Array = encoder.encode("%%EOF");

    let pdfData: Blob;
    let filename: string;
    let pdfFiles: MyPDFFile[] = [];
    let foundStart: Boolean = false;
    let filecontentStart: number = 2 * boundary.length + responseDataJson.length;

    scan: for(let i = filecontentStart; i < bodyData.length - endOfFile.length; i++) {

        if (!foundStart) {

            for (let j = 0; j < startOfFile.length; j++) {
                if (bodyData[i + j] != startOfFile[j])
                    continue scan;
            }

            filecontentStart = i;
            foundStart = true;
        }

        for (let j = 0; j < endOfFile.length; j++) {
            if (bodyData[i + j] != endOfFile[j])
                continue scan;
        }

        pdfData = multipartBody.slice(filecontentStart, i + endOfFile.length, 'application/pdf');
        filename = filenames.shift()!;

        // Store binary data, filename, and download link in a custom class.
        pdfFiles.push(new MyPDFFile(filename.substring(filename.indexOf('"') + 1), pdfData, window.URL.createObjectURL(pdfData)));
        foundStart = false;             
    }

    return new MyMultipartResponse(responseData, pdfFiles);
}

Answer 2

After much exploration, I've cracked the code. The key lies in using responseType: 'blob' for the entire response and then converting it into both text and bytes. This allows you to parse JSON data, PDF headers, and build PDF files efficiently. Below is my functional Typescript implementation.

public async processMultipartData(multipartBody: Blob): Promise<MyMultipartResponse> {

    let bodyData: Uint8Array = new Uint8Array(await multipartBody.arrayBuffer());
    let bodyText: string = await multipartBody.text();
    
    // Extract file names from Content-Disposition Header.
    let filenames: RegExpMatchArray = bodyText.match(/filename.*\.pdf/gi)!; 
    let boundary: string = bodyText.substring(0, bodyText.indexOf('\n')).trim();
    
    let responseDataJson: string = bodyText.split(boundary)[1];
    // Parse the extracted JSON data into a JavaScript object.
    let responseData: MyJsonRepresentation = JSON.parse(responseDataJson.substring(responseDataJson.indexOf('{')));

    let encoder: TextEncoder = new TextEncoder();
    let startOfFile: Uint8Array = encoder.encode("%PDF");
    let endOfFile: Uint8Array = encoder.encode("%%EOF");

    let pdfData: Blob;
    let filename: string;
    let pdfFiles: MyPDFFile[] = [];
    let foundStart: Boolean = false;
    let filecontentStart: number = 2 * boundary.length + responseDataJson.length;

    scan: for(let i = filecontentStart; i < bodyData.length - endOfFile.length; i++) {

        if (!foundStart) {

            for (let j = 0; j < startOfFile.length; j++) {
                if (bodyData[i + j] != startOfFile[j])
                    continue scan;
            }

            filecontentStart = i;
            foundStart = true;
        }

        for (let j = 0; j < endOfFile.length; j++) {
            if (bodyData[i + j] != endOfFile[j])
                continue scan;
        }

        pdfData = multipartBody.slice(filecontentStart, i + endOfFile.length, 'application/pdf');
        filename = filenames.shift()!;

        // Store binary data, filename, and download link in a custom class.
        pdfFiles.push(new MyPDFFile(filename.substring(filename.indexOf('"') + 1), pdfData, window.URL.createObjectURL(pdfData)));
        foundStart = false;             
    }

    return new MyMultipartResponse(responseData, pdfFiles);
}

Is it possible to directly parse a multipart/mixed response without needing to first convert it into a string?

Answer №1

Similar questions

Encountered a hiccup during the installation of ssh2-sftp-client on Next.js

Utilize AngularJS directives within an Angular component for enhanced functionality

Encountered an issue while saving a blob in NativeScript: "Unable to convert object to [B at index

The component is unable to access the injected service from a separate module due to its null

A guide to accessing an ngModel element within a reusable component

Double Calling of Angular Subscription

It appears that Stackblitz may have an outdated package.json file for older Angular projects, causing compatibility issues when running the project locally

After upgrading from angular-cli version 4 to version 7, the npm installation process stops working

Retrieving the previous and current URL in Angular 8

Passing an event from onSubmit in React without using lambdas

What is the best way to include text or a label on my Angular map without using a marker?

Unlock specific elements within the "sub-category" of a combined collection

Avoid running multiple YouTube views simultaneously within an AngularJS application

Fetching User Details Including Cart Content Upon User Login

implementing a function to execute after making a successful $http.get request

Incorporated iframe covering the entire browser window

Unable to set intricate information to array variable in Angular 6

The zip() operator in RxJS is not functioning as intended. It consistently finishes execution without emitting any values

What is the best way to showcase a standalone JSON object within the template?

Challenges of implementing dark mode with a checkbox and local storage