fix(frontend): bytes decode when load file finished

[GoldenSheep402]

Problem

When use bytes to take the data, if I didn't click on the input, it will not decode the base64 string.

  fileInput.on('change', function() {
      var reader = new FileReader();
      reader.addEventListener("load", function () {
          inp.text(btoa(this.result));
      }, false);
      reader.readAsBinaryString(fileInput[0].files[0]);
  })
  
  var input = new Input(parent, [], value);
  inp.focus(function() {
      var inp = this;
      setValidation(inp, function() {
          var str = $(inp).val();
          if (!isBase64(str)) {
              throw new Error("value for type " + fld.type + " is not a valid base64-encoded string: " + JSON.stringify(value));
          }
          input.setValue(str);
      });
  });
  return input;

Fix

I added a Base64 decode step once the file upload is complete. Additionally, when the input field is manually focused and modified, the decode process will be triggered again.

        fileInput.on('change', function() {
            var reader = new FileReader();
            reader.addEventListener("load", function () {
                var base64Str = btoa(this.result);
                inp.text(base64Str);

                // when file is loaded, decode the base64 string and set the value
                var str = base64Str;
                if (!isBase64(str)) {
                    throw new Error("value for type " + fld.type + " is not a valid base64-encoded string: " + JSON.stringify(value));
                }
                input.setValue(str);
            }, false);
            reader.readAsBinaryString(fileInput[0].files[0]);
        });

        var input = new Input(parent, [], value);
        inp.focus(function() {
            var inp = this;
            setValidation(inp, function() {
                var str = $(inp).val();
                if (!isBase64(str)) {
                    throw new Error("value for type " + fld.type + " is not a valid base64-encoded string: " + JSON.stringify(value));
                }
                input.setValue(str);
            });
        });
        return input;

[dragonsinth]

@jhump would you mind eyeballing this? I'm not very familiar with the frontend code.

[GoldenSheep402]

@dragonsinth Is there any progress?

[dragonsinth]

@GoldenSheep402 I pushed you a commit that I think should handle the ArrayBuffer case and avoid the need to call isBase64... could you test this out and let me know if it works?

[GoldenSheep402]

It works!