work for the #8209

surveyjs · May 20, 2024 · 757c9e4 · 757c9e4
1 parent 963c6fb
commit 757c9e4
Show file tree

Hide file tree

Showing 12 changed files with 138 additions and 42 deletions.
diff --git a/packages/survey-angular-ui/src/questions/file.component.html b/packages/survey-angular-ui/src/questions/file.component.html
@@ -1,10 +1,12 @@
 <div [class]="model.fileRootCss" #contentElement>
-  <input [class]="model.cssClasses.fileInput" *ngIf="!model.isReadOnly && model.hasFileUI" tabindex="-1" type="file"
+  <input [class]="model.cssClasses.fileInput" *ngIf="!model.isReadOnlyAttr && !model.isDisabledAttr && model.hasFileUI" tabindex="-1" type="file"
     [attr.id]="model.inputId" [attr.aria-required]="model.ariaRequired"
     [attr.aria-label]="model.ariaLabel" [attr.aria-invalid]="model.ariaInvalid"
     [attr.aria-errormessage]="model.ariaErrormessage" [attr.multiple]="model.multipleRendered"
     [attr.title]="model.inputTitle" [attr.accept]="model.acceptedTypes" [attr.capture]="model.renderCapture" />
-  <input *ngIf="model.isReadOnly" type="file" disabled [class]="model.getReadOnlyFileCss()" [attr.id]="model.inputId"
+  <input *ngIf="model.isReadOnlyAttr" type="file" readonly [class]="model.getReadOnlyFileCss()" [attr.id]="model.inputId"
+    [attr.multiple]="model.multipleRendered" [attr.placeholder]="model.title" style="color: transparent" />
+  <input *ngIf="model.isDisabledAttr" type="file" disabled [class]="model.getReadOnlyFileCss()" [attr.id]="model.inputId"
     [attr.multiple]="model.multipleRendered" [attr.placeholder]="model.title" style="color: transparent" />
   <div [class]="model.cssClasses.dragArea" (dragenter)="model.onDragEnter($event)" (drop)="model.onDrop($event)"
     (dragover)="model.onDragOver($event)" (dragleave)="model.onDragLeave($event)">

diff --git a/packages/survey-vue3-ui/src/File.vue b/packages/survey-vue3-ui/src/File.vue
@@ -2,7 +2,7 @@
   <div :class="question.fileRootCss" ref="root">
     <input
       :class="question.cssClasses.fileInput"
-      v-if="!question.isReadOnly && question.hasFileUI"
+      v-if="(!question.isReadOnlyAttr && !question.isDisabledAttr) && question.hasFileUI"
       tabindex="-1"
       type="file"
       :id="question.inputId"
@@ -15,6 +15,16 @@
       v-bind:accept="question.acceptedTypes"
       :capture="(question.renderCapture as any)"
     />
+    <input
+      v-if="question.isReadOnly"
+      type="file"
+      readonly
+      :id="question.inputId"
+      :class="question.getReadOnlyFileCss()"
+      :multiple="question.allowMultiple"
+      :placeholder="question.title"
+      style="color: transparent"
+    />
     <input
       v-if="question.isReadOnly"
       type="file"

diff --git a/src/knockout/templates/question-file.html b/src/knockout/templates/question-file.html
@@ -5,7 +5,10 @@
           <input type="file" tabindex="-1" data-bind="css: question.cssClasses.fileInput, attr: { id: question.inputId, 'aria-required': question.ariaRequired, 'aria-label': question.ariaLabel, 'aria-invalid': question.ariaInvalid, 'aria-errormessage': question.ariaErrormessage, multiple: question.allowMultiple ? 'multiple' : undefined, title: koInputTitle, accept: question.acceptedTypes, capture: question.renderCapture }">
           <!-- /ko -->
         <!-- /ko -->
-        <!-- ko if: question.isReadOnly -->
+        <!-- ko if: question.isReadOnlyAttr -->
+        <input type="file" readonly data-bind="css: question.getReadOnlyFileCss(), attr: { id: question.inputId, placeholder: question.title, multiple: question.allowMultiple ? 'multiple' : undefined }" style="color: transparent;"/>
+        <!-- /ko -->
+        <!-- ko if: question.isDisabledAttr -->
         <input type="file" disabled data-bind="css: question.getReadOnlyFileCss(), attr: { id: question.inputId, placeholder: question.title, multiple: question.allowMultiple ? 'multiple' : undefined }" style="color: transparent;"/>
         <!-- /ko -->
         <div data-bind="css: question.cssClasses.dragArea, event: { dragenter: question.ondragenter, dragover: question.ondragover, drop: question.ondrop, dragleave: question.ondragleave }">     

diff --git a/src/react/reactquestion_file.tsx b/src/react/reactquestion_file.tsx
@@ -28,36 +28,53 @@ export class SurveyQuestionFile extends SurveyQuestionElementBase {
       this.question.cssClasses.removeButtonBottom
     ): null;
     const fileNavigator = this.question.fileNavigatorVisible?(<SurveyActionBar model = {this.question.fileNavigator}></SurveyActionBar>) : null;
-    const fileInput = (
-      this.isDisplayMode ?
-        <input
-          type="file"
-          disabled={this.isDisplayMode}
-          className={!this.isDisplayMode ? this.question.cssClasses.fileInput : this.question.getReadOnlyFileCss()}
-          id={this.question.inputId}
-          ref={input => (this.setControl(input))}
-          style={!this.isDisplayMode ? {} : { color: "transparent" }}
-          multiple={this.question.allowMultiple}
-          placeholder={this.question.title}
-          accept={this.question.acceptedTypes}
-        /> : this.question.hasFileUI ?
-          <input
-            type="file"
-            disabled={this.isDisplayMode}
-            tabIndex={-1}
-            className={!this.isDisplayMode ? this.question.cssClasses.fileInput : this.question.getReadOnlyFileCss()}
-            id={this.question.inputId}
-            ref={input => (this.setControl(input))}
-            style={!this.isDisplayMode ? {} : { color: "transparent" }}
-            aria-required={this.question.ariaRequired}
-            aria-label={this.question.ariaLabel}
-            aria-invalid={this.question.ariaInvalid}
-            aria-errormessage={this.question.ariaErrormessage}
-            multiple={this.question.allowMultiple}
-            title={this.question.inputTitle}
-            accept={this.question.acceptedTypes}
-            capture={this.question.renderCapture}
-          /> : null);
+    let fileInput;
+    if (this.question.isReadOnlyAttr) {
+      fileInput = <input
+        readOnly
+        type="file"
+        className={!this.isDisplayMode ? this.question.cssClasses.fileInput : this.question.getReadOnlyFileCss()}
+        id={this.question.inputId}
+        ref={input => (this.setControl(input))}
+        style={!this.isDisplayMode ? {} : { color: "transparent" }}
+        multiple={this.question.allowMultiple}
+        placeholder={this.question.title}
+        accept={this.question.acceptedTypes}
+      />;
+    } else if (this.question.isDisabledAttr) {
+      fileInput = <input
+        disabled
+        type="file"
+        className={!this.isDisplayMode ? this.question.cssClasses.fileInput : this.question.getReadOnlyFileCss()}
+        id={this.question.inputId}
+        ref={input => (this.setControl(input))}
+        style={!this.isDisplayMode ? {} : { color: "transparent" }}
+        multiple={this.question.allowMultiple}
+        placeholder={this.question.title}
+        accept={this.question.acceptedTypes}
+      />;
+    } else if (this.question.hasFileUI) {
+      fileInput = <input
+        type="file"
+        disabled={this.isDisplayMode}
+        tabIndex={-1}
+        className={!this.isDisplayMode ? this.question.cssClasses.fileInput : this.question.getReadOnlyFileCss()}
+        id={this.question.inputId}
+        ref={input => (this.setControl(input))}
+        style={!this.isDisplayMode ? {} : { color: "transparent" }}
+        aria-required={this.question.ariaRequired}
+        aria-label={this.question.ariaLabel}
+        aria-invalid={this.question.ariaInvalid}
+        aria-errormessage={this.question.ariaErrormessage}
+        multiple={this.question.allowMultiple}
+        title={this.question.inputTitle}
+        accept={this.question.acceptedTypes}
+        capture={this.question.renderCapture}
+      />;
+    } else {
+      fileInput = null;
+    }
+
     return (
       <div className={this.question.fileRootCss}>
         {fileInput}

diff --git a/src/vue/file.vue b/src/vue/file.vue
@@ -2,7 +2,7 @@
  <div :class="question.fileRootCss">
     <input
       :class="question.cssClasses.fileInput"
-      v-if="!question.isReadOnly && question.hasFileUI"
+      v-if="(!question.isReadOnlyAttr && !question.isDisabledAttr) && question.hasFileUI"
       tabindex="-1"
       type="file"
       :id="question.inputId"
@@ -16,7 +16,17 @@
       :capture="question.renderCapture"
     />
     <input
-      v-if="question.isReadOnly"
+      v-if="question.isReadOnlyAttr"
+      type="file"
+      readonly
+      :id="question.inputId"
+      :class="question.getReadOnlyFileCss()"
+      :multiple="question.allowMultiple"
+      :placeholder="question.title"
+      style="color: transparent"
+    />
+    <input
+      v-if="question.isDisabledAttr"
       type="file"
       disabled
       :id="question.inputId"

diff --git a/tests/markup/etalon_file.ts b/tests/markup/etalon_file.ts
@@ -1,4 +1,4 @@
-import { StylesManager } from "survey-core";
+import { StylesManager, settings } from "survey-core";
 import { registerMarkupTests } from "./helper";
 
 registerMarkupTests(
@@ -136,6 +136,30 @@ registerMarkupTests(
     },
     snapshot: "file-single-zip-ro",
   },
+  {
+    name: "Test single file question disabled (default)",
+    json: {
+      questions: [
+        {
+          name: "name",
+          type: "file",
+          title: "Question title",
+          titleLocation: "hidden",
+          defaultValue: [
+            {
+              "name": "item1.zip",
+              "type": "application/x-zip-compressed",
+              "content": "#item1.zip"
+            },
+          ],
+        }
+      ]
+    },
+    initSurvey: (survey) => survey.setDesignMode(true),
+    before: () => { settings.supportCreatorV2 = true; },
+    after: () => { settings.supportCreatorV2 = false; },
+    snapshot: "file-single-zip-disabled",
+  },
   // defaultV2
   {
     name: "Test file question empty (defaultV2)",

diff --git a/tests/markup/snapshots/file-2-zip-png-ro.snap.html b/tests/markup/snapshots/file-2-zip-png-ro.snap.html
@@ -1,5 +1,5 @@
 <div class="sd-file sd-file--answered sd-file--readonly">
-	<input class="form-control sd-visuallyhidden" disabled="" id="testid0i" multiple="" placeholder="Question title" style="color:transparent;" type="file">
+	<input class="form-control sd-visuallyhidden" id="testid0i" multiple="" placeholder="Question title" readonly="" style="color:transparent;" type="file">
 	<div class="sd-file__drag-area">
 		<div class="sd-file__decorator">
 			<span class="sd-file__drag-area-placeholder">

diff --git a/tests/markup/snapshots/file-mob2-zip-png-ro.snap.html b/tests/markup/snapshots/file-mob2-zip-png-ro.snap.html
@@ -1,5 +1,5 @@
 <div class="sd-file sd-file--answered sd-file--mobile sd-file--readonly">
-	<input class="form-control sd-visuallyhidden" disabled="" id="testid0i" multiple="" placeholder="Question title" style="color:transparent;" type="file">
+	<input class="form-control sd-visuallyhidden" id="testid0i" multiple="" placeholder="Question title" readonly="" style="color:transparent;" type="file">
 	<div class="sd-file__drag-area">
 		<div class="sd-file__decorator">
 			<span class="sd-file__drag-area-placeholder">

diff --git a/tests/markup/snapshots/file-modern-zip-png-ro.snap.html b/tests/markup/snapshots/file-modern-zip-png-ro.snap.html
@@ -1,5 +1,5 @@
 <div class="sv-file">
-	<input class="form-control sv-visuallyhidden" disabled="" id="testid0i" multiple="" placeholder="Question title" style="color:transparent;" type="file">
+	<input class="form-control sv-visuallyhidden" id="testid0i" multiple="" placeholder="Question title" readonly="" style="color:transparent;" type="file">
 	<div>
 		<div class="sv-file__decorator">
 			<span class="sv-hidden">

diff --git a/tests/markup/snapshots/file-single-zip-disabled.snap.html b/tests/markup/snapshots/file-single-zip-disabled.snap.html
@@ -0,0 +1,30 @@
+<div class="sv_q_file">
+	<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">
+				<span class="sv-string-editor" contenteditable="true">Drag and drop a file here or click the button below to select a file to upload.</span>
+			</span>
+			<div>
+				<label aria-label="Replace file" class="sv_q_file_choose_button" for="testid0i" tabindex="0">
+					<span>Replace file</span>
+				</label>
+			</div>
+		</div>
+		<button class="sv_q_file_remove_button" type="button">
+			<span>Clear</span>
+		</button>
+		<div>
+			<span class="sv_q_file_preview">
+				<div class="sv_q_file_sign">
+					<a download="item1.zip" href="#item1.zip" title="item1.zip">item1.zip</a>
+				</div>
+				<div>
+					<div>
+						<span class="sv_q_file_remove">Remove this file</span>
+					</div>
+				</div>
+			</span>
+		</div>
+	</div>
+</div>
diff --git a/tests/markup/snapshots/file-single-zip-ro.snap.html b/tests/markup/snapshots/file-single-zip-ro.snap.html
@@ -1,5 +1,5 @@
 <div class="sv_q_file">
-	<input class="form-control sv-visuallyhidden" disabled="" id="testid0i" placeholder="Question title" style="color:transparent;" type="file">
+	<input class="form-control sv-visuallyhidden" id="testid0i" placeholder="Question title" readonly="" style="color:transparent;" type="file">
 	<div>
 		<div class="sv-file__decorator">
 			<span class="sv-hidden">

diff --git a/tests/markup/snapshots/file-zip-png-ro.snap.html b/tests/markup/snapshots/file-zip-png-ro.snap.html
@@ -1,5 +1,5 @@
 <div class="sv_q_file">
-	<input class="form-control sv-visuallyhidden" disabled="" id="testid0i" multiple="" placeholder="Question title" style="color:transparent;" type="file">
+	<input class="form-control sv-visuallyhidden" id="testid0i" multiple="" placeholder="Question title" readonly="" style="color:transparent;" type="file">
 	<div>
 		<div class="sv-file__decorator">
 			<span class="sv-hidden">