I am receiving json file and image from backend with multipart/form-data and I have to parse it to frontend.

--47f5d03f-8473-428e-a4e7-11e2a0710dc2

�PNG

gAMA���\@�!:����O-Z�h���c�}�Յ��+.���* (etc with this data)

--47f5d03f-8473-428e-a4e7-11e2a0710dc2

{"CustomerId":"123","Title":"This is title","Name":"This is name"}
--47f5d03f-8473-428e-a4e7-11e2a0710dc2--

Json is parsed perfectly, but I have a problem with creating image. But Blob is always giving me an error when I try to use it for creating image element. This is how i tried to do this.

 API.post(`api/endpoint`, data).then((resp) => {
    const boundIndex = resp.headers['content-type'].indexOf('boundary="') + 'boundary='.length;
    const contentType = resp.headers['content-type']
    const bound = contentType.slice(boundIndex,contentType.length);
    const boundary = '--' + bound.slice(1, bound.length - 1);
    const splitedResponseData = resp.data.split(boundary);
    const jsonResponse = JSON.parse(splitedResponseData[2]);

    const blob = new Blob([splitedResponseData[1]], { type: 'image/png' });
    const blob1 = new Blob([stringToUint(splitedResponseData[1])], { type: 'image/png' });

Blob1 is using function stringToUint() to convert string to Uint8Array.

function stringToUint(stringData) {
  const string1 = btoa(unescape(encodeURIComponent(stringData))),
  charList = string1.split(''),
  uintArray = [];
  for (let i = 0; i < charList.length; i++) 
  {
      uintArray.push(charList[i].charCodeAt(0));  
  }
  return new Uint8Array(uintArray);
}

Am I doing something wrong or is there another way I can take a picture based on the data I get?