How to read a .bin file and display the extact content of it in a table cell?

Question

I want to read a .bin file via file chooser and I'm using below code, which works fine.

var inp2 = document.createElement("input");
inp2.type = "file";
inp2.accept = ".bin";
inp2.setAttribute("id", "myFile");
                    
function readSingleFile(e) {
     var file = e.target.files[0];
     if (!file) {
         return;
     }
     var reader = new FileReader();
     reader.onload = function(event) {
        var fileResult = reader.result;
        binaryContent = fileResult.slice(fileResult.indexOf(",")+1);  // It is in base64 format
     };                 
     reader.readAsDataURL(file);
}

inp2.addEventListener('change', readSingleFile, false);

This is working fine and I'm able to store this binaryContent in the base64 format in the Oracle Nosql database.

But, I'm stuck at how to get back the original content of the file and display it to the users in one of the columns(cells) of a table.

I'm attaching the sample file contents for the reference.

<95>Eù^F½^N^K:Ã<8c>k5(^G,<89>^U0 Ã<9d>I¶.hâòªÃ<96>@w=<<8c>n$9S^Vòöön<8e>²Ã<8f>íBae&ã#s\âv6<8a>]¼\<88>±<80>y<9f>3¬<9c>^Dø¡=^S<90>aÃ<97><97>Ã<83>Ã<86>®DÃ<92>^OÃ<9b><9a>^\CÃ<99>ºf<90>ùBæöÃ<89>*<82>á£^X<8c>Ã<9c> +e<92>Ã<8e>Ã¥<84><90>\®      F
^O<¡^@Ã<86>Ã<8a>Ã<8e>J^Tò9<84>T<85>¤Ã<99><9d>^VJDÃ<91>1 ^F<87> <8f>îoÃ<81>Ã<94>4-Q=ç^Hf¨¤ä2<96>­6¤ï<8b>äKzMkëYPÃ<9d><94>áaOµü+42«ë^X^PHÃ<8d>¹±<84><8d>óO<95>ã5L¼/<96>³½±Nª<93>P<8b>Ã<99><86><81><98>©ý^Ar^\Záµ^Z<9a>V)Ã<93>/^[²<92>Ã<8d>YC¾^MwT^L^Sõ<97>Ã<9c>ïÃ<8c>ï'¾^LRf>2C/Ã<97>Ã<84>®<9a>Ã¥^DýdVz#tb.\<8f>^E"<97><96>U^X:CI<8a>=<2Uu<86>Ã<8b>Ã<8a>^EîÃ<9d>^B^P^^G^Q^Uö{  6^_Ã<9c>ZJl^Y^CÂ¥^^6'Ã<9f>^Z<80>ïÃ<84>Ã<82>Ã<84>æ0L<8c>Ã<9b>¾Ã<96> eÃ<89>>^N[<95>¸çÃ<80>(<9f>Ã<94><8c>®B^^iÃ<93>9u,Ã<8d>^<9b>aò¸'Ã<99>^O­^S7^_s<îê¸e<9e>^\Ã<97>^Tal0 Ã<85><9b><85>^X<8a>^Gý<83>%Ã<88>læNÃ<96>^Qh­Ã<97>^ZWï:M\·¾<87>ñ<8c>Ã<8a>^XnÃ<9d>^ByBkY·^QÃ<94>^T¤^R:øs¨a^As<92><98>n^ZÃ<86>qÃ<90>7Ã<94>ªÃ<84><82>¤P^Uè)Ã<9d> 1¾Z¯Xíû¦:deï^@Ã<82>â%+Ã<83>¨Jfw°        ø)ähzyáù<9d>n³h^^·0zá<90>k<8a>~<9e>qÃ<96>^NíÃ<91>Ã<8b><88>ué^A]Ã<90>Ã<8f><8d>ý¼Ã<9f>Ã<9a>ì^Ã<98><88>®ë4t¸<81>@Ã¥ei      Ã<87>øÃ<91>lªq³<8b>³Ã<97>^Y^DÃ<85><99>mÃ<99>Ã<81>FÃ<9c>N<98>ð¤Ã<91>Ã<8a><96>\¬Ã<9d>^_|Ã<9c>»CGÃ<8f>^L'¹<83>^Oe^X¨ä÷<8b>ªRÃ<9d><8f><83>9^D¡i®+.:NìRÃ<82>CÃ<88><87>ì(¦U^S¯<86>Ã<83>>äB^V;Ã<96><8b>H<91>,AX:ugB^FV<9d>{lÃ<89>Hò<92>Ã<9c><8c><83>,î=t2"^OUf^G^WRc÷<93><96>²jF)<8a>6^g'$Y^[<86><8a>BN    Ã<82>^PzNë¸<9f>a4Ã<8b>^F°^VÃ<87>;ì­Ã<89>·o^F^GG|PÃ<9a>^BKH§sÃ<8b>yý Ã<9a>F^X$ò^Cº°<91>íÃ<83>^Q0Ã<9c>apÃ<9d><96>mY¯~ö

Answer 1

try to check if the file is img or text so that you know if you can show it to the user otherwise you can try to trigger a download of the file very vague example:

var base64Content = /* your base64 string from the database */;

// Attempt to determine if the base64 string is likely to be an image or text
// This is a very basic and not completely reliable method
var likelyImage = base64Content.match(/^data:image\/[a-zA-Z]+;base64,/);

var blob;
if (likelyImage) {
    var contentType = likelyImage[0].replace(/^data:(.*);base64,/, '$1');
    blob = base64ToBlob(base64Content.replace(/^data:image\/[a-zA-Z]+;base64,/, ''), contentType);
} else {
    // Attempt to treat as text
    var textContent = atob(base64Content);
    // Check if the text seems to be human-readable - very rudimentary check
    var isTextReadable = /^[\x20-\x7E\s]+$/.test(textContent);
    if (isTextReadable) {
        blob = new Blob([textContent], { type: 'text/plain' });
        displayText(blob);
    } else {
        // Fallback to binary type, triggering download
        blob = base64ToBlob(base64Content, 'application/octet-stream');
        triggerDownload(blob);
    }
}

function base64ToBlob(base64, contentType) {
    var binaryString = atob(base64);
    var length = binaryString.length;
    var bytes = new Uint8Array(length);
    for (var i = 0; i < length; i++) {
        bytes[i] = binaryString.charCodeAt(i);
    }
    return new Blob([bytes], { type: contentType });
}

function displayText(blob) {
    var reader = new FileReader();
    reader.onload = function(e) {
        var textElement = document.createElement('p');
        textElement.textContent = e.target.result;
        document.body.appendChild(textElement); // Adjust as needed
    };
    reader.readAsText(blob);
}

function triggerDownload(blob) {
    var blobUrl = URL.createObjectURL(blob);
    var downloadLink = document.createElement('a');
    downloadLink.href = blobUrl;
    downloadLink.download = "unknownFile"; // You might want to name it based on context
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
}