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);
}
});
}
The file description data needed to be removed from the base64 string.
let fileContent = Buffer.from(image.replace(/^data:image\/\w+;base64,/, ""), 'base64');