Building a BLOB from Base64 string in React

Question

I have a function which pings my server and tries to download a file from a DB

  const handleDownloadFileData = async (id) => {
    const res = await downloadServiceFileData(id)

    console.log(res.data)
  }

the output of res.data looks as so:

/9j/4AAQSkZJRgABAQAASABIAAD/4QCKRXhpZgAATU0AKgAAAAgAAgESAAMAAAABAAEAAIdpAAQAAAABAAAAJgAAAAAABJADAAIAAAAUAAAAXJKGAAcAAAASAAAAcKACAAQAAAABAAAC7qADAAQAAAABAAAFNgAAAAAyMDIxOjAyOjE2IDAxOjE0OjA3AEFTQ0lJAAAAU2NyZWVuc2hvdP/tADhQaG90b3Nob3AgMy4wADhCSU0EBAAAAAAAADhCSU0EJQAAAAAAENQdjNmPALIE6YAJmOz4Qn7/4nYwSUNDX1BST0ZJTEUAAQ...

I assume this is some kind of decoded Base64??

Can I build the file from this data and display the file in a new tab perhaps? and if so how? Sorry for the ignorance but I have never done this type of development before.

downloadServiceFileData

export async function downloadServiceFileData(fileDataId) {

  try {
    return await awsApiRequest({
      method: 'GET',
      path: `/file-data/${fileDataId}`,

    });
  } catch (error) {
    return error;
  }
}

Answer 1

You can do it with simple fetch api

const decodedString = "/9j/4AAQSkZJRgABAQAASABIAAD/4QCKRXhpZgAATU0AKgAAAAgAAgESAAMAAAABAAEAAIdpAAQAAAABAAAAJgAAAAAABJADAAIAAAAUAAAAXJKGAAcAAAASAAAAcKACAAQAAAABAAAC7qADAAQAAAABAAAFNgAAAAAyMDIxOjAyOjE2IDAxOjE0OjA3AEFTQ0lJAAAAU2NyZWVuc2hvdP/tADhQaG90b3Nob3AgMy4wADhCSU0EBAAAAAAAADhCSU0EJQAAAAAAENQdjNmPALIE6YAJmOz4Qn7/4nYwSUNDX1BST0ZJTEUAAQ..."

let type = 'application/octet-stream'
let blob = null;

fetch(`data:${type};base64,${decodedString}`).then(res=>blob =res.blob())
//File constructor
var file = new File([blob], "name");