JSFiddle - React, Tailwind, and code Playground

HTML

<html>

<head>
    <meta charset="UTF-8">
</head>

<body>
    <style>
  .thumb {
    height: 75px;
    border: 1px solid #000;
    margin: 10px 5px 0 0;
  }
</style>

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
<br />
<img id="imgTag" src="" />
</body>

</html>

JavaScript

function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }

        var reader = new FileReader();
        reader.onload = function(){

            var blob = ArrayBufferToString(reader.result);
            // split
            var list = metadata.splitChunk(blob);
            // append
            var iend = list.pop(); // remove IEND
						
            var txt = {sample:'@à$'};
            //var newchunk = metadata.createChunk("tEXt", "Comment"+String.fromCharCode(0x00)+"heremycommentl"); // works but not conform
            var newchunk = metadata.createChunk("tEXt", "Comment"+String.fromCharCode(0x00)+"heremycommentl"); // result invalid png
            //var newchunk = metadata.createChunk("iTXt", "Source"+String.fromCharCode(0x00)+"00fr"+String.fromCharCode(0x00)+"Source"+String.fromCharCode(0x00)+""+JSON.stringify(txt));// works but not conform
            list.push(newchunk);
            list.push(iend);
            // join
            var newpng = metadata.joinChunk(list);

            blob = new Blob([StringToArrayBuffer(newpng)], {type: "image/png"});
            var objectUrl = URL.createObjectURL(blob);
            //window.open(objectUrl, 'popup','menubar=no, scrollbars=no, top=100, left=100, width=300, height=200');
            document.getElementById('imgTag').src = objectUrl;
            return;

        };
        reader.readAsArrayBuffer(f);
    }
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);


function ArrayBufferToString(buffer) {
    return BinaryToString(String.fromCharCode.apply(null, Array.prototype.slice.apply(new Uint8Array(buffer))));
}

function StringToArrayBuffer(string) {
    return StringToUint8Array(string).buffer;
}

function...