Merge pull request #35041 from dimagi/ml/broadcast-filename-bug

Fill in missing filename after broadcast within same question tile
dimagi · Sep 4, 2024 · 259b765 · 259b765
2 parents ae2145f + c4d308b
commit 259b765
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 6 deletions.
diff --git a/corehq/apps/cloudcare/static/cloudcare/js/form_entry/entries.js b/corehq/apps/cloudcare/static/cloudcare/js/form_entry/entries.js
@@ -931,26 +931,35 @@ hqDefine("cloudcare/js/form_entry/entries", [
         // Tracks whether file entry has already been cleared, preventing an additional failing request to Formplayer
         self.cleared = false;
         self.buildBroadcastTopics(options);
+        self.uploadFile = function () {
+            document.getElementById(self.entryId).click();
+        };
+        self.fileNameDisplay = ko.observable(gettext("No file selected."));
     }
     FileEntry.prototype = Object.create(EntrySingleAnswer.prototype);
     FileEntry.prototype.constructor = EntrySingleAnswer;
     FileEntry.prototype.onPreProcess = function (newValue) {
         var self = this;
-        if (newValue !== constants.NO_ANSWER && newValue !== "") {
+        if (newValue === "" && self.question.filename()) {
+            self.question.hasAnswered = true;
+            self.fileNameDisplay(self.question.filename());
+        } else if (newValue !== constants.NO_ANSWER && newValue !== "") {
             // Input has changed and validation will be checked
             if (newValue !== self.answer()) {
                 self.question.formplayerMediaRequest = $.Deferred();
                 self.cleared = false;
             }
-            self.answer(newValue.replace(constants.FILE_PREFIX, ""));
+            var fixedNewValue = newValue.replace(constants.FILE_PREFIX, "");
+            self.fileNameDisplay(fixedNewValue);
+            self.answer(fixedNewValue);
         } else {
             self.onClear();
         }
     };
     FileEntry.prototype.onAnswerChange = function (newValue) {
         var self = this;
         // file has already been validated and assigned a unique id. another request should not be sent to formplayer
-        if (self.question.formplayerMediaRequest.state() === "resolved") {
+        if (newValue === constants.NO_ANSWER || self.question.formplayerMediaRequest.state() === "resolved") {
             return;
         }
         if (newValue !== constants.NO_ANSWER && newValue !== "") {
@@ -1004,6 +1013,7 @@ hqDefine("cloudcare/js/form_entry/entries", [
         self.question.error(null);
         self.question.onClear();
         self.broadcastMessages(self.question, constants.NO_ANSWER);
+        self.fileNameDisplay(gettext("No file selected."));
     };
 
     /**

diff --git a/corehq/apps/cloudcare/static/cloudcare/js/form_entry/form_ui.js b/corehq/apps/cloudcare/static/cloudcare/js/form_entry/form_ui.js
@@ -690,6 +690,14 @@ hqDefine("cloudcare/js/form_entry/form_ui", [
                 if (element.serverError) {
                     element.serverError(null);
                 }
+
+                if (allChildren) {
+                    for (let i = 0; i < allChildren.length; i++) {
+                        if (allChildren[i].control >= constants.CONTROL_IMAGE_CHOOSE) {
+                            allChildren[i].filename = element.answer();
+                        }
+                    }
+                }
                 response.children = allChildren;
                 self.fromJS(response);
             }

diff --git a/corehq/apps/cloudcare/templates/cloudcare/partials/form_entry/entry_file.html b/corehq/apps/cloudcare/templates/cloudcare/partials/form_entry/entry_file.html
@@ -1,16 +1,22 @@
 {% load hq_shared_tags %}
 
 <script type="text/html" id="file-entry-ko-template">
-  <div class="d-flex">
-    <input type="file" data-bind="
+  <div class="d-flex align-items-center">
+    <input type="file" class="d-none" data-bind="
           value: $data.rawAnswer,
-          css: { 'is-invalid': $parent.hasError() },
           attr: {
               id: entryId,
               'aria-required': $parent.required() ? 'true' : 'false',
               accept: accept,
           },
       "/>
+    <button id="input-button-alt" class="btn btn-outline-primary" data-bind="
+          click: uploadFile,
+          css: { 'is-invalid': $parent.hasError() },
+      ">
+      Browse...
+    </button>
+    <p data-bind="text: fileNameDisplay" style="margin-left: 7px; margin-right: auto;"></p>
     <button class="btn btn-outline-primary btn-sm" data-bind="
       click: onClear,
       text: $root.getTranslation('upload.clear.title', '{% trans_html_attr 'Clear' %}'),