Typescript convert base64 to image file and upload

Question

I am learning Typescript and I want to convert a base64 string to an image file and upload it.

Here is the function for converting it.

dataURLtoFile(dataurl, filename) {
 
    var arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
       
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
   
    return new File([u8arr], filename, {type:mime});
}

Using this function, I am setting the image text field's value as follows.

var file = this.dataURLtoFile('data:image/png;base64,'+loopVarCnt[i].NIDA_PHOTO,loopVarCnt[i].NIN+'.png');
                          var loopDataVarCnt = [];
                          var tempObj = {};
                                tempObj['imageTypePSICOB'] = "P"
                                tempObj['imageDatePSICOB'] = file.lastModified
                                tempObj['fileUploadPSICOB'] = file
                                tempObj['imageEfftFrmDatePSICOB'] = "04-01-2023"
                                tempObj['imageExpDatePSICOB'] = "04-01-2029"
                                tempObj['remarksPSICOB'] = "file.text"
                                loopDataVarCnt.push(tempObj);
                                this.FieldId_3.photoSigGridPSICOB.setValue(loopDataVarCnt);
                          console.log(file);

Here is how it been set in html element as fileObject not png.

<a _ngcontent-qam-c21="" style="display:none;" href="http://xxxxxx/my/api/document/[object File]">Click here</a>

it seems the file object is what it has been returned, but I want an image of how I can get it from the file object.

I am unable to preview the image in tempObj['fileUploadPSICOB'] field as if it has not been set. Please accept my apology for my English, as I am using a translator