1

I am fetching a base64 image from my s3 bucket using the following code.The first fetch method returns an s3 presgined url. The fetch the presigned url and convert response to blob. When I check the response type it is an octet-stream. My question is how can I convert it to base64 image and display it in the img tag 

const profilePicFetchResult = await fetch('http://localhost/getUrl', {
    method: "POST",
    body: key,
    headers: {
        'Content-Type': 'application/json'
    }


})
const result = await profilePicFetchResult.text()
const fetched = await fetch(result, {
    method: "GET",
    mode: "cors",
    headers: {
        'Access-Control-Allow-Origin': '*',
    },
})
const imageBlob = await fetched.blob();

The imageBlob variable is equal

Blob {size: 66026, type: "binary/octet-stream"}
size: 66026
type: "binary/octet-stream"
__proto__: Blob

The img tag html 

<img id="profile-image" src="https://trainerprofilepictures.s3.me-south-1.amazonaws.com/5e90603e7f0d251cab9253c6/1d70a21e-7c0e-4f12-92ae-84b3c85ecf1e" alt="">

The src is loading because the s3 bucket is private. I have to fetch it using presigned urls

The backend code is 

function readObjectSignedUrl(req) {
return new Promise(function (resolve, reject) {
    s3.getSignedUrl('getObject', {
        Bucket: "pictures",
        Key: req,
        Expires: 6000
    }, (err, url) => {
        if (err) {
            reject(err);
        }
        else {

            resolve(url);
        }
    })
})

}

The router file

router.post('/getUrl',routerFunction.routerStatusFunction,trainerController.getObject)
Ahmed
  • 1,229
  • 2
  • 20
  • 45
  • Please provide an example of the results and your HTML. – Twisty Apr 19 '20 at 18:06
  • Also, this might help: https://stackoverflow.com/questions/8499633/how-to-display-base64-images-in-html – Twisty Apr 19 '20 at 18:08
  • this my html tag but it doesnt work because the sre is s3 url which in not accessible publicly I have to submit a post request through my server to get access using presigned urls then fetch this presigned url to recieve the data. I am asking how convert octer-stream to base64 – Ahmed Apr 19 '20 at 21:42
  • This is not really helpful without a proper example. Please provide a Minimal, Reproducible Example: https://stackoverflow.com/help/minimal-reproducible-example – Twisty Apr 19 '20 at 22:08
  • Can i ask you what part of the code you want exactly ? – Ahmed Apr 19 '20 at 22:10
  • I already asked, an example of the response and the HTML that is relevant to your code. – Twisty Apr 19 '20 at 22:15

0 Answers0