Convert axios response to Blob url image to display/download it in website

Question

I'm using the Egnyte API

I don't understand how the response object works, I tried to convert the data to Blob object and URL.createObjectURL but this doesn't work for me. I don't know if I can display this images to my website.

DOCS Egnyte API: LIST FILE OR FOLDER

This problem also happens to me when I want to download the image, because the api response returns plain encrypted text and I don't know how I can convert it into an object to download it with javascript/html

DOCS Egnyte API: DOWNLOAD FILE

Axios get images from Egnyte API

const getImages = () => {
    axios.get(`${API}/${params.id}/images/`, config).then(res => {
        setImagesList(res.data.files)
    }).catch((error) => {
        console.log(error)
    })
}

The response looks like this:

Convert item to Blob object and URL.createObjectURL

const displayImg = (list_images) => {
    return list_images.map(img => {
        const url = URL.createObjectURL(new Blob([img]))
        return (
            <div className='div_img' key={img.name}>
                <img src={url} />
            </div>
        )
    })
}

The URL object looks like this:

But the website looks:

Response from API DOWNLOAD FILE:

I would be very grateful if someone could explain to me how I can convert the API response into an image object to be able to show it and download it (and files to download).

Thank you very much!

Answer 1

Use the FileReader to turn the blob into a base64 string that can be used as an image source (something like data:image/png;base64,...) - this post shows you how:

function blobToBase64(blob) {
  return new Promise((resolve, _) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result);
    reader.readAsDataURL(blob);
  });
}

https://stackoverflow.com/a/18650249/1143126

This function can be used to process the result that axios gives you, somewhat like this:

axios.get(...) 
    .then(blobToBase64)
    .then(base64 => {
        // I'm assuming there is a variable 'imageSource' that is bound to the 'src' attribute of an HTML '<img>' somewhere
        imageSource = base64; 
    })
    .catch((error) => {
        // do error handling
    });