Fixed #7927 - File Upload - The upload file button remains highlighte…

…d and clickble in read-only mode

src/defaultCss/defaultV2Css.ts

@@ -608,6 +608,7 @@ export var defaultV2Css = {
     chooseFileAsIcon: "sd-file__choose-btn--icon",
     chooseFileIconId: "icon-choosefile",
     disabled: "sd-file__choose-btn--disabled",
+    controlDisabled: "sd-file__choose-file-btn--disabled",
     //todo: remove it in v2
     removeButton: "sd-context-btn--negative",
     removeButtonBottom: "",

src/defaultV2-theme/blocks/sd-file.scss

@@ -1,12 +1,13 @@
 @import "../variables.scss";
+
 .sd-file {
   position: relative;
   font-size: calcFontSize(1);
   line-height: calcLineHeight(1.5);
   min-height: calcSize(36);
   box-sizing: border-box;
   padding: 0 calcSize(6);
-  
+
   .sv-action-bar {
     padding: calcSize(1) 0;
     justify-content: center;
@@ -58,6 +59,7 @@
     container-type: unset;
   }
 }
+
 .sd-file__decorator--drag {
   z-index: 1;
   border: 1px solid $primary;
@@ -89,6 +91,7 @@
   .sd-file__drag-area-placeholder {
     display: none;
   }
+
   .sd-file__decorator .sd-action {
     padding: calcSize(1);
 
@@ -404,4 +407,9 @@
     top: 50%;
     transform: translate(-50%, -50%);
   }
+}
+
+.sd-file__choose-file-btn--disabled {
+  opacity: 0.25;
+  cursor: default;
 }

src/question_file.ts

@@ -265,6 +265,7 @@ export class QuestionFileModel extends QuestionFileModelBase {
       id: "sv-file-choose-file",
       iconSize: "auto",
       data: { question: this },
+      enabledIf: () => !this.isInputReadOnly,
       component: "sv-file-choose-btn"
     });
     this.startCameraAction = new Action({

tests/questionFileTests.ts

@@ -1901,3 +1901,19 @@ QUnit.test("Acton takePhoto should be serialiazed", function (assert) {
   assert.equal(action.title, "Foto machen", "de");
 });
 
+QUnit.test("Choose file action should have disabled class", function (assert) {
+  const survey = new SurveyModel({
+    mode: "display",
+    elements: [
+      { type: "file", name: "q1", maxSize: 3 },
+    ]
+  });
+  survey.css = defaultV2Css;
+  const question = <QuestionFileModel>survey.getAllQuestions()[0];
+  assert.equal(question.getChooseFileCss(), "sd-file__choose-btn sd-file__choose-file-btn--disabled sd-action sd-file__choose-btn--text sd-action--disabled", "Disabled");
+  survey.mode = "edit";
+  assert.equal(question.getChooseFileCss(), "sd-file__choose-btn sd-action sd-file__choose-btn--text", "Enabled");
+  survey.mode = "display";
+  assert.equal(question.getChooseFileCss(), "sd-file__choose-btn sd-file__choose-file-btn--disabled sd-action sd-file__choose-btn--text sd-action--disabled", "Disabled");
+});
+