0

I have tried every other "dupe" to this issue but it seems many of them are out of date. The following code runs "successfully" and uploads the image and sets the mimetype correctly however it does not render as an image. The base64 content is within the file but doesn't render in any image editor or browser.

Here is what the image data looks like upon upload:

{
  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
  ]
}

Here is the code I have:

const data = req.files?.file.data.toString('base64');
const uploadBlobResponse = await blockBlobClient.upload(data, data.length, { blobHTTPHeaders: { blobContentType: body.mimeType }});

I've also tried using uploadData but it fails with 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

Which I find hilarious because if I do typeof data it returns a type of string

Thanks in advance as I've been banging my head against the wall for hours at this point.

gregwhitworth
  • 2,136
  • 4
  • 22
  • 33
  • what about using uploadData with req.files?.file.data (without base64) and use req.files?file.mimetype instead of body.mimeType – user7994388 Aug 07 '23 at 00:38

1 Answers1

0

Azure Blob Storage does not work that way. Essentially blob content is the data that you uploaded. In your case, you are converting the binary data to base64 string and uploading that string so blob stored is string.

You can do a few things:

  • Store binary data. Instead of converting the data to base64 encoded string, you can simply store that data as byte array. You would then be able to display the image using something like <img src="your-blob-url" />.
  • Read data in your application. If you want to store the data as base64 encoded string, then in order to display that data, you would need to read the contents of the blob and then use something like <img src="data:blob-content-type;base64,your-base64-encoded-content" />.
Gaurav Mantri
  • 128,066
  • 12
  • 206
  • 241
  • I've now tried uploading it as all of the types that Azure JS SDK allows (Buffer, Array Buffer, String, blob) and when going directly to the url eg: `/foo.webp` it results in nothing. What I'm trying to avoid is having to build a new view solely to render the image as I'm making the blobs public as they're meant for download but currently upon download the images are broken. The browser by default when opening the url does your first option but still doesn't work so I must be making the "binary data" incorrectly. – gregwhitworth Aug 06 '23 at 15:35
  • Note that I edited the post to show the original image content that I'm working with so if you're able to show how this would be adjusted to achieve your first option "store binary data" since that is what the browser does when opening an image url I'd appreciate it. – gregwhitworth Aug 06 '23 at 15:38
  • Can you share the blob URL? req.files?.file.data should work. – Gaurav Mantri Aug 06 '23 at 16:20
  • here is the blob URL: https://printfiles.blob.core.windows.net/images/11x14-t-Mendenhall-Glacier-Framed-Alaskan-Landscape-Painting-on-Canvas-Print-by-Karen-Whitworth_1080x.webp – gregwhitworth Aug 06 '23 at 21:37
  • Thanks. I downloaded the image and saw that its contents are still base64 encoded. Have you tried uploading using just `req.files?.file.data`? Something like `const data = req.files?.file.data; const uploadBlobResponse = await blockBlobClient.upload(data, data.length, { blobHTTPHeaders: { blobContentType: body.mimeType }});`? – Gaurav Mantri Aug 07 '23 at 00:26
  • Apologies, that must have been an older one; yes I have done that which is why printed the data object above. If I just pass in the data array I get the following error: `Error uploading file Error: body must be a string, Blob, ArrayBuffer, ArrayBufferView, or a function returning NodeJS.ReadableStream.` – gregwhitworth Aug 07 '23 at 03:07
  • Can you please try the following code: `const data = Buffer.from(req.files?.file.data); const uploadBlobResponse = await blockBlobClient.upload(data, data.length, { blobHTTPHeaders: { blobContentType: body.mimeType }});`? – Gaurav Mantri Aug 07 '23 at 13:06