After attempting various alternatives to solve this issue, I discovered that many of them are outdated. Even though the code below runs without any errors and successfully uploads the image while setting the mimetype correctly, it fails to render as an image. The base64 content is present within the file but does not display in any image editor or browser.
This is a snippet of what the image data looks like upon uploading:
{
type: 'Buffer',
data: [
137, 80, 78, 71, 13, 10, 26, 10, 0, 0, 0, 13,
73, 72, 68, 82, 0, 0, 4, 56, 0, 0, 3, 96,
8, 6, 0, 0, 0, 201, 106, 216, 155, 0, 0, 0,
9, 112, 72, 89, 115, 0, 0, 11, 19, 0, 0, 11,
19, 1, 0, 154, 156, 24, 0, 15, 227, 3, 73, 68,
65, 84, 120, 156, 204, 253, 119, 184, 157, 85, 181, 254,
15, 223, 171, 239, 222, 83, 8, 189, 10, 130, 224, 1,
81, 144, 42, 136, 132, 162, 71, 81, 241, 128, 128, 160,
210, 148, 46, 82,
... 1041133 more items
]
}
Below is the code snippet I am using:
const data = req.files?.file.data.toString('base64');
const uploadBlobResponse = await blockBlobClient.upload(data, data.length, { blobHTTPHeaders: { blobContentType: body.mimeType }});
I also attempted to use uploadData, but encountered the following error:
Error uploading file TypeError [ERR_INVALID_ARG_TYPE]: The first argument must be of type string or an instance of Buffer, ArrayBuffer, or Array or an Array-like Object. Received undefined
It's quite amusing because when I check the type of data using typeof data, it indeed returns a type of string.
Your assistance would be greatly appreciated as I have been struggling with this for hours on end.