File Question - Irrelevant message is displayed within a drop area pl… (

#6771)

* File Question - Irrelevant message is displayed within a drop area placeholder for read-only mode fix #6652

* Fix snap tess #6652

* Fix markup tests

packages/survey-angular-ui/src/questions/file.component.html

@@ -33,7 +33,7 @@
     <div
       [class]="model.getFileDecoratorCss()"
     >
-      <span [class]="model.cssClasses.dragAreaPlaceholder">{{ model.dragAreaPlaceholder }}</span>
+      <span [class]="model.cssClasses.dragAreaPlaceholder">{{ model.renderedPlaceholder }}</span>
       <div [class]="model.cssClasses.wrapper">
         <label
           *ngIf="!model.isReadOnly"

packages/survey-vue3-ui/src/File.vue

@@ -35,7 +35,7 @@
     >
       <div :class="question.getFileDecoratorCss()">
         <span :class="question.cssClasses.dragAreaPlaceholder">{{
-          question.dragAreaPlaceholder
+          question.renderedPlaceholder
         }}</span>
         <div :class="question.cssClasses.wrapper">
           <label

src/knockout/templates/question-file.html

@@ -8,7 +8,7 @@
       <!-- /ko -->
       <div data-bind="css: question.cssClasses.dragArea, event: { dragenter: question.ondragenter, dragover: question.ondragover, drop: question.ondrop, dragleave: question.ondragleave }">     
         <div data-bind="css: question.getFileDecoratorCss()">
-          <span data-bind="css: question.cssClasses.dragAreaPlaceholder, text: question.dragAreaPlaceholder"></span>
+          <span data-bind="css: question.cssClasses.dragAreaPlaceholder, text: question.renderedPlaceholder"></span>
           <div data-bind="css: question.cssClasses.wrapper">
             <!-- ko ifnot: isReadOnly -->
             <label tabindex="0" role="button" data-bind="css: question.koChooseFileCss, key2click, attr: { for: question.inputId, 'aria-label': question.koGetChooseButtonText() }">

src/question_file.ts

@@ -1,7 +1,7 @@
 import { Question } from "./question";
 import { property, propertyArray, Serializer } from "./jsonobject";
 import { QuestionFactory } from "./questionfactory";
-import { EventBase } from "./base";
+import { EventBase, ComputedUpdater } from "./base";
 import { UploadingFileError, ExceedSizeError } from "./error";
 import { SurveyError } from "./survey-error";
 import { CssClassBuilder } from "./utils/cssClassBuilder";
@@ -227,6 +227,18 @@ export class QuestionFileModel extends Question {
   @property({ localizable: { defaultStr: "chooseFile" } }) chooseFileTitle: string;
   @property({ localizable: { defaultStr: "fileDragAreaPlaceholder" } }) dragAreaPlaceholder: string;
 
+  @property() renderedPlaceholderValue: string;
+  public get renderedPlaceholder(): string {
+    if(this.renderedPlaceholderValue === undefined) {
+      this.renderedPlaceholderValue = <string><unknown>(new ComputedUpdater<string>(() => {
+        const dragAreaText = this.dragAreaPlaceholder;
+        const readOnlyText = this.noFileChosenCaption;
+        return this.isReadOnly ? readOnlyText : dragAreaText;
+      }));
+    }
+    return this.renderedPlaceholderValue;
+  }
+
   get inputTitle(): string {
     if (this.isUploading) return this.loadingFileTitle;
     if (this.isEmpty()) return this.chooseFileTitle;

src/react/reactquestion_file.tsx

@@ -105,7 +105,7 @@ export class SurveyQuestionFile extends SurveyQuestionElementBase {
       <div
         className={this.question.getFileDecoratorCss()}
       >
-        <span className={this.question.cssClasses.dragAreaPlaceholder}>{this.question.dragAreaPlaceholder}</span>
+        <span className={this.question.cssClasses.dragAreaPlaceholder}>{this.question.renderedPlaceholder}</span>
         <div className={this.question.cssClasses.wrapper}>
           {chooseFile}
           {noFileChosen}

src/vue/file.vue

@@ -36,7 +36,7 @@
       <div
         :class="question.getFileDecoratorCss()"
       >
-        <span :class="question.cssClasses.dragAreaPlaceholder">{{ question.dragAreaPlaceholder }}</span>
+        <span :class="question.cssClasses.dragAreaPlaceholder">{{ question.renderedPlaceholder }}</span>
         <div :class="question.cssClasses.wrapper">
           <label
             v-if="!question.isReadOnly"

tests/markup/snapshots/file-2-zip-png-ro.snap.html

@@ -2,7 +2,7 @@
 	<input class="form-control sd-visuallyhidden" disabled="" id="testid0i" multiple="" placeholder="Question title" style="color:transparent;" type="file">
 	<div class="sd-file__drag-area">
 		<div class="sd-file__decorator">
-			<span class="sd-file__drag-area-placeholder">Drag and drop a file here or click the button below and choose a file to upload.</span>
+			<span class="sd-file__drag-area-placeholder">No file chosen</span>
 			<div class="sd-file__wrapper">
 			</div>
 		</div>

tests/markup/snapshots/file-mob2-zip-png-ro.snap.html

@@ -2,7 +2,7 @@
 	<input class="form-control sd-visuallyhidden" disabled="" id="testid0i" multiple="" placeholder="Question title" style="color:transparent;" type="file">
 	<div class="sd-file__drag-area">
 		<div class="sd-file__decorator">
-			<span class="sd-file__drag-area-placeholder">Drag and drop a file here or click the button below and choose a file to upload.</span>
+			<span class="sd-file__drag-area-placeholder">No file chosen</span>
 			<div class="sd-file__wrapper">
 			</div>
 		</div>

tests/markup/snapshots/file-modern-zip-png-ro.snap.html

@@ -2,7 +2,7 @@
 	<input class="form-control sv-visuallyhidden" disabled="" id="testid0i" multiple="" placeholder="Question title" style="color:transparent;" type="file">
 	<div>
 		<div class="sv-file__decorator">
-			<span class="sv-hidden">Drag and drop a file here or click the button below and choose a file to upload.</span>
+			<span class="sv-hidden">No file chosen</span>
 			<div class="sv-file__wrapper">
 			</div>
 		</div>

tests/markup/snapshots/file-single-zip-ro.snap.html

@@ -2,7 +2,7 @@
 	<input class="form-control sv-visuallyhidden" disabled="" id="testid0i" placeholder="Question title" style="color:transparent;" type="file">
 	<div>
 		<div class="sv-file__decorator">
-			<span class="sv-hidden">Drag and drop a file here or click the button below and choose a file to upload.</span>
+			<span class="sv-hidden">No file chosen</span>
 			<div>
 			</div>
 		</div>

tests/markup/snapshots/file-zip-png-ro.snap.html

@@ -2,7 +2,7 @@
 	<input class="form-control sv-visuallyhidden" disabled="" id="testid0i" multiple="" placeholder="Question title" style="color:transparent;" type="file">
 	<div>
 		<div class="sv-file__decorator">
-			<span class="sv-hidden">Drag and drop a file here or click the button below and choose a file to upload.</span>
+			<span class="sv-hidden">No file chosen</span>
 			<div>
 			</div>
 		</div>

tests/questionFileTests.ts

@@ -1227,4 +1227,20 @@ QUnit.test("File Question on Smaller Screens: navigation bar doesn't appear when
     assert.equal(question.mobileFileNavigatorVisible, true);
     done();
   }, 100);
+});
+QUnit.test("QuestionFile download file content on preview", function(assert) {
+  const survey = new SurveyModel({
+    elements: [
+      { type: "file", name: "q1" },
+      { type: "file", name: "q2", readOnly: true }
+    ]
+  });
+  const q1 = <QuestionFileModel>survey.getQuestionByName("q1");
+  const q2 = <QuestionFileModel>survey.getQuestionByName("q2");
+  assert.equal(q1.renderedPlaceholder.substring(0, 4), "Drag", "q1 => drag");
+  assert.equal(q2.renderedPlaceholder.substring(0, 2), "No", "q2 => no file");
+  q1.readOnly = true;
+  q2.readOnly = false;
+  assert.equal(q1.renderedPlaceholder.substring(0, 2), "No", "q1, readOnly => no file");
+  assert.equal(q2.renderedPlaceholder.substring(0, 4), "Drag", "q2, not readOnly=> drag");
 });