node.jstypescriptreact-nativeaxiosbackblaze

BackBlaze images corrupt when posting buffer from NodeJS


I am trying to capture an image on a React Native app and post the image to my NodeJS server. I then am trying to post that image to BackBlaze after converting it to a Buffer. All the images are corrupt after succesfully uploading.

I am posting an image by converting the base64 string value into a Buffer using Buffer.from(). The image is corrupt and cannot be opened after successfully being uploaded.

NodeJS Upload File Function

async function GetFileBlob(url: string, callback: any) {
    let data: Blob;
    await fetch(url)
      .then(response => response.blob())
      .then(blob => {
        let reader = new FileReader();
        reader.readAsDataURL(blob);
        reader.onloadend = function (e) {
          callback(e.target!.result.toString());
        };
      });
  }

NodeJS Upload File Function

export async function UploadFile(req: any, res: any, next: any) {
    let image: any = req.body.FrontImage;
    let data: any = await GetUploadUrl(async (data) => {
        try {
            var arrayBufferView = new Uint8Array(Buffer.from(image));
            var blob = new Blob([arrayBufferView], { type: "image/jpeg" });
            var imgSource = URL.createObjectURL(blob);

            let fileContent = Buffer.from(image, 'base64');
            // Create a SHA-1 hash of the content as a hex string
            const hashBuffer = await crypto.subtle.digest('SHA-1', fileContent);
            const hashArray = Array.from(new Uint8Array(hashBuffer));
            const hashHex = hashArray
                .map((b) => b.toString(16).padStart(2, "0"))
                .join("");

            // Upload the file content with the filename, hash and auth token
            let msg: string, detail: string;
            try {
                const response = await fetch(data.uploadUrl, {
                    method: "POST",
                    mode: "cors",
                    body: fileContent,
                    headers: {
                        "Content-Type": "b2/x-auto",
                        "Authorization": data.authorizationToken,
                        "X-Bz-File-Name": 'testfile10.jpeg',
                        "X-Bz-Content-Sha1": hashHex,
                    },
                });

                // Report on the outcome
                if (response.status >= 200 && response.status < 300) {
                    msg = `${response.status} response from B2 API. Success!`;
                } else if (response.status >= 400) {
                    msg = `${response.status} error from B2 API.`;
                } else {
                    msg = `Unknown error.`;
                }

                detail = await response.text();
            } catch (error) {
                console.error("Fetch threw an error:", error)
                msg = `Fetch threw "${error}" - see the console and/or network tab for more details`
                detail = error.stack;
            }
            next();
        } catch (err) {
            console.log('Error getting bucket:', err);
        }
    });
}

Solution

  • The file description data needed to be removed from the base64 string.

    let fileContent = Buffer.from(image.replace(/^data:image\/\w+;base64,/, ""), 'base64');