Add ability to pick a file to populate bytes fields (#168)

Co-authored-by: Madhav Bhagat <madhav89@gmail.com>
fullstorydev · Feb 15, 2022 · 9a512fe · 9a512fe
1 parent e458831
commit 9a512fe
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 8 deletions.
diff --git a/internal/resources/webform/bindata.go b/internal/resources/webform/bindata.go
diff --git a/internal/resources/webform/webform-sample.css b/internal/resources/webform/webform-sample.css
@@ -345,6 +345,28 @@ table#grpc-request-metadata-form {
     font-size: 120%;
 }
 
+#grpc-request-form .grpc-bytes-container {
+    display: flex;
+    align-items: center;
+}
+
+#grpc-request-form .grpc-bytes-container label.grpc-file-button {
+    border-radius: 2px;
+    background: #f0f0f0;
+    border-top: 1px solid #ccc;
+    border-right: 1px solid #bbb;
+    border-bottom: 1px solid #aaa;
+    border-left: 1px solid #ccc;
+    padding: 4px 8px;
+    font-size: 90%;
+}
+
+#grpc-request-form .grpc-bytes-container label.grpc-file-button.disabled {
+    border: 1px solid #ddd;
+    color: #ccc;
+    background: #f8f8f8;
+}
+
 .ui-tooltip.grpc-field-description {
     white-space: pre;
     font-family: "Courier New", Courier, monospace;

diff --git a/internal/resources/webform/webform.js b/internal/resources/webform/webform.js
@@ -374,10 +374,10 @@ window.initGRPCForm = function(services, svcDescs, mtdDescs, invokeURI, metadata
             return addDoubleToForm(container, parent, value, fld);
 
             case "string": case "google.protobuf.StringValue":
-            return addStringToForm(container, parent, value, fld, false);
+            return addStringToForm(container, parent, value, fld);
 
             case "bytes": case "google.protobuf.BytesValue":
-            return addStringToForm(container, parent, value, fld, true);
+            return addBytesToForm(container, parent, value, fld);
 
             case "bool": case "google.protobuf.BoolValue":
             return addBoolToForm(container, parent, value, fld);
@@ -1400,7 +1400,7 @@ window.initGRPCForm = function(services, svcDescs, mtdDescs, invokeURI, metadata
         return input;
     }
 
-    function addStringToForm(container, parent, value, fld, base64) {
+    function addStringToForm(container, parent, value, fld) {
         var disabled = false;
         if (isUnset(value)) {
             value = fld.defaultVal;
@@ -1409,25 +1409,80 @@ window.initGRPCForm = function(services, svcDescs, mtdDescs, invokeURI, metadata
         if (typeof value !== 'string') {
             throw typeError(fld.type, value, "string");
         }
-        if (base64 && !isBase64(value)) {
+
+        var inp = $('<textarea>');
+        inp.attr('cols', 40);
+        inp.attr('rows', 1);
+        inp.text(value);
+        if (disabled) {
+            inp.prop('disabled', true);
+        }
+        container.append(inp);
+
+        var input = new Input(parent, [], value);
+        inp.focus(function() {
+            var inp = this;
+            setValidation(inp, function() {
+                var str = $(inp).val();
+                input.setValue(str);
+            });
+        });
+        return input;
+    }
+
+    function addBytesToForm(container, parent, value, fld) {
+        var disabled = false;
+        if (isUnset(value)) {
+            value = fld.defaultVal;
+            disabled = true;
+        }
+        if (typeof value !== 'string') {
+            throw typeError(fld.type, value, "string");
+        }
+        if (!isBase64(value)) {
             throw new Error("value for type " + fld.type + " is not a valid base64-encoded string: " + JSON.stringify(value));
         }
 
+        var box = $('<div>');
+        box.addClass('grpc-bytes-container')
         var inp = $('<textarea>');
         inp.attr('cols', 40);
         inp.attr('rows', 1);
         inp.text(value);
         if (disabled) {
             inp.prop('disabled', true);
         }
-        container.append(inp);
+        var lbl = $('<label>')
+        lbl.addClass('grpc-file-button');
+        lbl.text('Choose File');
+        if (disabled) {
+            lbl.addClass('disabled');
+        }
+        var fileInput = $('<input>');
+        fileInput.attr('type', 'file');
+        fileInput.attr('style', 'display:none');
+        if (disabled) {
+            fileInput.prop('disabled', true);
+        }
+        lbl.append(fileInput);
+        box.append(inp);
+        box.append(lbl);
+        container.append(box);
+
+        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 (base64 && !isBase64(str)) {
+                if (!isBase64(str)) {
                     throw new Error("value for type " + fld.type + " is not a valid base64-encoded string: " + JSON.stringify(value));
                 }
                 input.setValue(str);