Merge pull request #6688 from surveyjs/feature/6474

Change choose button caption if file is going to be replaced
surveyjs · Aug 10, 2023 · e3964b0 · e3964b0
2 parents d8c60ca + 439ef50
commit e3964b0
Show file tree

Hide file tree

Showing 18 changed files with 223 additions and 185 deletions.
diff --git a/packages/survey-angular-ui/src/questions/file.component.html b/packages/survey-angular-ui/src/questions/file.component.html
@@ -41,11 +41,11 @@
           tabindex="0"
           [class]="model.getChooseFileCss()"
           [attr.for]="model.inputId"
-          [attr.aria-label]="model.chooseButtonCaption"
+          [attr.aria-label]="model.chooseButtonText"
           [key2click]
           >
-          <span>{{ model.chooseButtonCaption }}</span>
-          <svg *ngIf="model.cssClasses.chooseFileIconId" [title]="model.chooseButtonCaption" [iconName]="model.cssClasses.chooseFileIconId" [size]="'auto'" sv-ng-svg-icon></svg>
+          <span>{{ model.chooseButtonText }}</span>
+          <svg *ngIf="model.cssClasses.chooseFileIconId" [title]="model.chooseButtonText" [iconName]="model.cssClasses.chooseFileIconId" [size]="'auto'" sv-ng-svg-icon></svg>
         </label>
         <span
           [class]="model.cssClasses.noFileChosen"

diff --git a/packages/survey-vue3-ui/src/File.vue b/packages/survey-vue3-ui/src/File.vue
@@ -44,13 +44,13 @@
             tabindex="0"
             :class="question.getChooseFileCss()"
             :for="question.inputId"
-            v-bind:aria-label="question.chooseButtonCaption"
+            v-bind:aria-label="question.chooseButtonText"
             v-key2click
           >
-            <span>{{ question.chooseButtonCaption }}</span>
+            <span>{{ question.chooseButtonText }}</span>
             <sv-svg-icon
               v-if="question.cssClasses.chooseFileIconId"
-              :title="question.chooseButtonCaption"
+              :title="question.chooseButtonText"
               :iconName="question.cssClasses.chooseFileIconId"
               :size="'auto'"
             ></sv-svg-icon>

diff --git a/src/knockout/koquestion_file.ts b/src/knockout/koquestion_file.ts
@@ -27,7 +27,9 @@ class QuestionFileImplementor extends QuestionImplementor {
         return [];
       })
     );
+    this.setObservaleObj("ko", ko.observable<string>());
     this.setObservaleObj("koInputTitle", ko.observable<string>());
+    this.setObservaleObj("koChooseButtonText", ko.observable<string>());
     this.setObservaleObj(
       "koChooseFileCss",
       ko.pureComputed(() => {
@@ -66,6 +68,7 @@ export class QuestionFile extends QuestionFileModel {
   private _implementor: QuestionFileImplementor;
   private updateState = (sender: QuestionFileModel, options: any) => {
     this.koState(options.state);
+    this.koChooseButtonText(this.chooseButtonText);
     this.koInputTitle(this.inputTitle);
   };
   constructor(name: string) {

diff --git a/src/knockout/templates/question-file.html b/src/knockout/templates/question-file.html
@@ -11,10 +11,10 @@
           <span data-bind="css: question.cssClasses.dragAreaPlaceholder, text: question.dragAreaPlaceholder"></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.chooseButtonCaption }">
-              <span data-bind="text: question.chooseButtonCaption"></span>
+            <label tabindex="0" role="button" data-bind="css: question.koChooseFileCss, key2click, attr: { for: question.inputId, 'aria-label': question.koChooseButtonText }">
+              <span data-bind="text: question.koChooseButtonText"></span>
               <!-- ko if: question.cssClasses.chooseFileIconId -->
-                  <!-- ko component: { name: 'sv-svg-icon', params: { title: question.chooseButtonCaption, iconName: question.cssClasses.chooseFileIconId, size: 'auto' } } --><!-- /ko -->
+                  <!-- ko component: { name: 'sv-svg-icon', params: { title: question.chooseButtonText, iconName: question.cssClasses.chooseFileIconId, size: 'auto' } } --><!-- /ko -->
               <!-- /ko -->
             </label>
             <!-- /ko -->

diff --git a/src/localization/english.ts b/src/localization/english.ts
@@ -81,6 +81,7 @@ export var englishStrings = {
   clearCaption: "Clear",
   signaturePlaceHolder: "Sign here",
   chooseFileCaption: "Choose file",
+  replaceFileCaption: "Replace file",
   removeFileCaption: "Remove this file",
   booleanCheckedLabel: "Yes",
   booleanUncheckedLabel: "No",

diff --git a/src/question_file.ts b/src/question_file.ts
@@ -216,6 +216,7 @@ export class QuestionFileModel extends Question {
   @property({ localizable: { defaultStr: "confirmRemoveAllFiles" } }) confirmRemoveAllMessage: string;
   @property({ localizable: { defaultStr: "noFileChosen" } }) noFileChosenCaption: string;
   @property({ localizable: { defaultStr: "chooseFileCaption" } }) chooseButtonCaption: string;
+  @property({ localizable: { defaultStr: "replaceFileCaption" } }) replaceButtonCaption: string;
   @property({ localizable: { defaultStr: "clearCaption" } }) clearButtonCaption: string;
   @property({ localizable: { defaultStr: "removeFileCaption" } }) removeFileCaption: string;
   @property({ localizable: { defaultStr: "loadingFile" } }) loadingFileTitle: string;
@@ -227,6 +228,11 @@ export class QuestionFileModel extends Question {
     if (this.isEmpty()) return this.chooseFileTitle;
     return " ";
   }
+
+  public get chooseButtonText () {
+    return this.isEmpty() || this.allowMultiple ? this.chooseButtonCaption : this.replaceButtonCaption;
+  }
+
   public clear(doneCallback?: () => void) {
     if (!this.survey) return;
     this.containsMultiplyFiles = false;

diff --git a/src/react/reactquestion_file.tsx b/src/react/reactquestion_file.tsx
@@ -88,10 +88,10 @@ export class SurveyQuestionFile extends SurveyQuestionElementBase {
         tabIndex={0}
         className={this.question.getChooseFileCss()}
         htmlFor={this.question.inputId}
-        aria-label={this.question.chooseButtonCaption}
+        aria-label={this.question.chooseButtonText}
       >
-        <span>{this.question.chooseButtonCaption}</span>
-        {(!!this.question.cssClasses.chooseFileIconId) ? <SvgIcon title={this.question.chooseButtonCaption} iconName={this.question.cssClasses.chooseFileIconId} size={"auto"}></SvgIcon>: null }
+        <span>{this.question.chooseButtonText}</span>
+        {(!!this.question.cssClasses.chooseFileIconId) ? <SvgIcon title={this.question.chooseButtonText} iconName={this.question.cssClasses.chooseFileIconId} size={"auto"}></SvgIcon>: null }
       </label>
     );
     if (this.question.isEmpty()) {

diff --git a/src/vue/file.vue b/src/vue/file.vue
@@ -44,11 +44,11 @@
             tabindex="0"
             :class="question.getChooseFileCss()"
             :for="question.inputId"
-            v-bind:aria-label="question.chooseButtonCaption"
+            v-bind:aria-label="question.chooseButtonText"
               v-key2click
             >
-            <span>{{ question.chooseButtonCaption }}</span>
-            <sv-svg-icon v-if="question.cssClasses.chooseFileIconId" :title="question.chooseButtonCaption" :iconName="question.cssClasses.chooseFileIconId" :size="'auto'"></sv-svg-icon>
+            <span>{{ question.chooseButtonText }}</span>
+            <sv-svg-icon v-if="question.cssClasses.chooseFileIconId" :title="question.chooseButtonText" :iconName="question.cssClasses.chooseFileIconId" :size="'auto'"></sv-svg-icon>
           </label>
           <span
             :class="question.cssClasses.noFileChosen"

diff --git a/tests/markup/snapshots/file-2-png.snap.html b/tests/markup/snapshots/file-2-png.snap.html
@@ -4,12 +4,12 @@
 		<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>
 			<div class="sd-file__wrapper">
-				<label aria-label="Choose file" class="sd-context-btn sd-file__choose-btn sd-file__choose-btn--icon" role="button" tabindex="0">
-					<span>Choose file</span>
-					<svg aria-label="Choose file" class="sv-svg-icon" role="img">
+				<label aria-label="Replace file" class="sd-context-btn sd-file__choose-btn sd-file__choose-btn--icon" role="button" tabindex="0">
+					<span>Replace file</span>
+					<svg aria-label="Replace file" class="sv-svg-icon" role="img">
 						<use xlink:href="#icon-choosefile" class="">
 						</use>
-						<title class="">Choose file</title>
+						<title class="">Replace file</title>
 					</svg>
 				</label>
 			</div>

diff --git a/tests/markup/snapshots/file-2-zip.snap.html b/tests/markup/snapshots/file-2-zip.snap.html
@@ -4,12 +4,12 @@
 		<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>
 			<div class="sd-file__wrapper">
-				<label aria-label="Choose file" class="sd-context-btn sd-file__choose-btn sd-file__choose-btn--icon" role="button" tabindex="0">
-					<span>Choose file</span>
-					<svg aria-label="Choose file" class="sv-svg-icon" role="img">
+				<label aria-label="Replace file" class="sd-context-btn sd-file__choose-btn sd-file__choose-btn--icon" role="button" tabindex="0">
+					<span>Replace file</span>
+					<svg aria-label="Replace file" class="sv-svg-icon" role="img">
 						<use xlink:href="#icon-choosefile" class="">
 						</use>
-						<title class="">Choose file</title>
+						<title class="">Replace file</title>
 					</svg>
 				</label>
 			</div>

diff --git a/tests/markup/snapshots/file-image-size.snap.html b/tests/markup/snapshots/file-image-size.snap.html
@@ -1,29 +1,29 @@
-<div class="sv_q_file">
-	<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sv-visuallyhidden" id="testid0i" tabindex="-1" title=" " 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>
-			<div>
-				<label aria-label="Choose file" class="sv_q_file_choose_button" role="button" tabindex="0">
-					<span>Choose 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="arrow.svg" href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6L" style="width:350px;" title="arrow.svg">arrow.svg</a>
-				</div>
-				<div>
-					<img alt="File preview" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6L" style="height:250px; width:350px;">
-						<div>
-							<span class="sv_q_file_remove">Remove this file</span>
-						</div>
-					</div>
-				</span>
-			</div>
-		</div>
+<div class="sv_q_file">
+	<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sv-visuallyhidden" id="testid0i" tabindex="-1" title=" " 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>
+			<div>
+				<label aria-label="Replace file" class="sv_q_file_choose_button" role="button" 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="arrow.svg" href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6L" style="width:350px;" title="arrow.svg">arrow.svg</a>
+				</div>
+				<div>
+					<img alt="File preview" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6L" style="height:250px; width:350px;">
+						<div>
+							<span class="sv_q_file_remove">Remove this file</span>
+						</div>
+					</div>
+				</span>
+			</div>
+		</div>
 	</div>
diff --git a/tests/markup/snapshots/file-mob2-png.snap.html b/tests/markup/snapshots/file-mob2-png.snap.html
@@ -4,12 +4,12 @@
 		<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>
 			<div class="sd-file__wrapper">
-				<label aria-label="Choose file" class="sd-context-btn sd-file__choose-btn sd-file__choose-btn--icon" role="button" tabindex="0">
-					<span>Choose file</span>
-					<svg aria-label="Choose file" class="sv-svg-icon" role="img">
+				<label aria-label="Replace file" class="sd-context-btn sd-file__choose-btn sd-file__choose-btn--icon" role="button" tabindex="0">
+					<span>Replace file</span>
+					<svg aria-label="Replace file" class="sv-svg-icon" role="img">
 						<use xlink:href="#icon-choosefile" class="">
 						</use>
-						<title class="">Choose file</title>
+						<title class="">Replace file</title>
 					</svg>
 				</label>
 			</div>

diff --git a/tests/markup/snapshots/file-mob2-zip.snap.html b/tests/markup/snapshots/file-mob2-zip.snap.html
@@ -4,12 +4,12 @@
 		<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>
 			<div class="sd-file__wrapper">
-				<label aria-label="Choose file" class="sd-context-btn sd-file__choose-btn sd-file__choose-btn--icon" role="button" tabindex="0">
-					<span>Choose file</span>
-					<svg aria-label="Choose file" class="sv-svg-icon" role="img">
+				<label aria-label="Replace file" class="sd-context-btn sd-file__choose-btn sd-file__choose-btn--icon" role="button" tabindex="0">
+					<span>Replace file</span>
+					<svg aria-label="Replace file" class="sv-svg-icon" role="img">
 						<use xlink:href="#icon-choosefile" class="">
 						</use>
-						<title class="">Choose file</title>
+						<title class="">Replace file</title>
 					</svg>
 				</label>
 			</div>

diff --git a/tests/markup/snapshots/file-modern-png.snap.html b/tests/markup/snapshots/file-modern-png.snap.html
@@ -1,37 +1,37 @@
-<div class="sv-file">
-	<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sv-visuallyhidden" id="testid0i" tabindex="-1" title=" " 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>
-			<div class="sv-file__wrapper">
-				<label aria-label="Choose file" class="sv-btn sv-file__choose-btn" role="button" tabindex="0">
-					<span>Choose file</span>
-				</label>
-			</div>
-		</div>
-		<button class="sv-hidden" type="button">
-			<span>Clear</span>
-		</button>
-		<div>
-			<span class="sv-file__preview">
-				<div>
-					<img alt="File preview" src="#item1.png">
-						<div>
-							<span class="sv-hidden">Remove this file</span>
-							<svg aria-label="Remove this file" class="sv-file__remove-svg sv-svg-icon" role="img">
-								<use xlink:href="#icon-removefile" class="">
-								</use>
-								<title class="">Remove this file</title>
-							</svg>
-						</div>
-					</div>
-					<div class="sv-file__sign">
-						<a download="item1.png" href="#item1.png" title="item1.png">item1.png</a>
-					</div>
-				</span>
-			</div>
-			<button class="sv-btn sv-file__clean-btn" type="button">
-				<span>Clear</span>
-			</button>
-		</div>
+<div class="sv-file">
+	<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sv-visuallyhidden" id="testid0i" tabindex="-1" title=" " 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>
+			<div class="sv-file__wrapper">
+				<label aria-label="Replace file" class="sv-btn sv-file__choose-btn" role="button" tabindex="0">
+					<span>Replace file</span>
+				</label>
+			</div>
+		</div>
+		<button class="sv-hidden" type="button">
+			<span>Clear</span>
+		</button>
+		<div>
+			<span class="sv-file__preview">
+				<div>
+					<img alt="File preview" src="#item1.png">
+						<div>
+							<span class="sv-hidden">Remove this file</span>
+							<svg aria-label="Remove this file" class="sv-file__remove-svg sv-svg-icon" role="img">
+								<use xlink:href="#icon-removefile" class="">
+								</use>
+								<title class="">Remove this file</title>
+							</svg>
+						</div>
+					</div>
+					<div class="sv-file__sign">
+						<a download="item1.png" href="#item1.png" title="item1.png">item1.png</a>
+					</div>
+				</span>
+			</div>
+			<button class="sv-btn sv-file__clean-btn" type="button">
+				<span>Clear</span>
+			</button>
+		</div>
 	</div>
diff --git a/tests/markup/snapshots/file-modern-zip.snap.html b/tests/markup/snapshots/file-modern-zip.snap.html
@@ -1,36 +1,36 @@
-<div class="sv-file">
-	<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sv-visuallyhidden" id="testid0i" tabindex="-1" title=" " 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>
-			<div class="sv-file__wrapper">
-				<label aria-label="Choose file" class="sv-btn sv-file__choose-btn" role="button" tabindex="0">
-					<span>Choose file</span>
-				</label>
-			</div>
-		</div>
-		<button class="sv-hidden" type="button">
-			<span>Clear</span>
-		</button>
-		<div>
-			<span class="sv-file__preview">
-				<div>
-					<div>
-						<span class="sv-hidden">Remove this file</span>
-						<svg aria-label="Remove this file" class="sv-file__remove-svg sv-svg-icon" role="img">
-							<use xlink:href="#icon-removefile" class="">
-							</use>
-							<title class="">Remove this file</title>
-						</svg>
-					</div>
-				</div>
-				<div class="sv-file__sign">
-					<a download="item1.zip" href="#item1.zip" title="item1.zip">item1.zip</a>
-				</div>
-			</span>
-		</div>
-		<button class="sv-btn sv-file__clean-btn" type="button">
-			<span>Clear</span>
-		</button>
-	</div>
+<div class="sv-file">
+	<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sv-visuallyhidden" id="testid0i" tabindex="-1" title=" " 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>
+			<div class="sv-file__wrapper">
+				<label aria-label="Replace file" class="sv-btn sv-file__choose-btn" role="button" tabindex="0">
+					<span>Replace file</span>
+				</label>
+			</div>
+		</div>
+		<button class="sv-hidden" type="button">
+			<span>Clear</span>
+		</button>
+		<div>
+			<span class="sv-file__preview">
+				<div>
+					<div>
+						<span class="sv-hidden">Remove this file</span>
+						<svg aria-label="Remove this file" class="sv-file__remove-svg sv-svg-icon" role="img">
+							<use xlink:href="#icon-removefile" class="">
+							</use>
+							<title class="">Remove this file</title>
+						</svg>
+					</div>
+				</div>
+				<div class="sv-file__sign">
+					<a download="item1.zip" href="#item1.zip" title="item1.zip">item1.zip</a>
+				</div>
+			</span>
+		</div>
+		<button class="sv-btn sv-file__clean-btn" type="button">
+			<span>Clear</span>
+		</button>
+	</div>
 </div>