fullstorydev / grpcui

An interactive web UI for gRPC, along the lines of postman
MIT License
5.24k stars 388 forks source link

fix(frontend): bytes decode when load file finished #338

Open GoldenSheep402 opened 2 months ago

GoldenSheep402 commented 2 months ago

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;
image

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 commented 1 month ago

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

GoldenSheep402 commented 2 weeks ago

@dragonsinth Is there any progress?