Upload Image URL to Azure Blob SAS URL

Question

Here is my use case, I am creating a service that uploads a file to MediaValet (a multimedia organization system). Their documentation for uploading files is HERE. I have tried to use the Azure-Storage library but it doesn't seem to want to upload files to the blob but instead allows you to create new Blob systems (could and probably am wrong but it seems to be buried if so).

First step is to make a POST request to create a placeholder which returns back a SAS URL. Then you make a PUT request to the SAS URL with the body being the binary segments.

My issue, I'm making a GET request to the image URL and set the encoding to null which returns a buffer for the body. If I FS createWriteStream to a new PNG file it renders perfectly. If I encode it to base64 and then decode it on a different website it also can render. But when I perform the PUT request with the binary body, Azure accepts it and uploads the image but it never renders in MediaValet. It shows a Placeholder icon instead.

My guess is that Azure is expecting different headers or parameters but the MediaValet documentation does not provide any assistance on how to construct the request. I have been working with a few contacts there and they are doing some internal digging to figure it out but I thought I'd check with you all as well.

I do notice that when I inspect the binary of a PNG on my local machine, it appears differently then if I encode the image to binary in NodeJS.

Local Machine

âPNG

IHDRBÿ‘ÇÛ cHRMz%ÄɢˇÄÈu0Í:òoí_≈FgAMA±è¸a∆†IDATx⁄Ï›w|\’ùˇˇsÀîKñ%Àñ{ÔΩ˜ÇmåczB

Node Binary encoding

PNG

IHDRBԂ cHRMz%u0:o_FgAMAaƠIDATxw|\՝s̨K%˖{m

If I convert the Node Binary with data:image/png;base64, it creates a data image that when I upload to Image to Base64 website it renders correctly so I know that the encoding does allow for the image to stay intact.

Below is the code I am doing to GET the image and encode it to base64.

const request = require('request');

const uri = 'https://img2.pngio.com/stack-overflow-text-png-download-1024257-free-transparent-stack-overflow-png-900_240.jpg';

request.get({ uri, encoding: null }, (err, res, body) => {
    console.log(body.toString('base64'))
});

I've tried many other options like changing the encoding up from to be binary or to create a new Buffer.from() with encoding of base64 and binary. All the results allow me to upload but the image never renders in the App. Any help you can provide will be greatly appreciated.

UPDATE: Below is the payload for the Upload request to the SAS URL that is returned when you make a POST request to Azure Blob Service and returned back is the SAS URL.

    uri: 'https://OBFUSCATED.blob.core.windows.net/medialibrary-OBFUSCATED/OBFUSCATED/OBFUSCATED/Original/1571880311.png?sv=2017-04-17&sr=b&sig=KHCrukoT16oc0s%2Bjqt%2Fow3CGjIc0rxYPdvRMgbErUtw%3D&st=2020-06-09T22%3A13%3A48Z&se=2020-06-11T22%3A28%3A48Z&sp=rw',
    headers: {
      'Content-Length': 50965,
      'Content-Type': 'image/png; charset=UTF-8',
      'x-ms-blob-content-type': 'image/png',
      'x-ms-date': 'Tue, 09 Jun 2020 22:28:48 GMT',
      'x-ms-blob-type': 'BlockBlob'
    },
    body: 'data:image/png;base64,iVBO\NOBFUSCATED'
}```

Answer 1

If you want to upload image to Azure blob storage with rest API, please refer to the document. It is a put action.

For example

var request = require('request')
request.get({url:'https://img2.pngio.com/stack-overflow-text-png-download-1024257-free-transparent-stack-overflow-png-900_240.jpg', encoding: null}, function (error, response, body) {
    if (!error && response.statusCode == 200) {
       const options={uri: 'https://<>.blob.core.windows.net/image/image11.jpeg?<sas token>',
       headers: {
         'Content-Type':  response.headers["content-type"] +'; charset=UTF-8',
         'x-ms-blob-content-type': response.headers["content-type"],
         'x-ms-blob-type': 'BlockBlob'
       },
       body: body}

       request.put(options,  function (error, response, body){
        //if we successfully upload, we will get stauscode 201
        console.log(response.statusCode)
       })
    }
});