From 439ef503d95b8ddf17b2638cce8b70f980d33607 Mon Sep 17 00:00:00 2001 From: Dmitry Kuzin Date: Wed, 9 Aug 2023 19:28:01 +0400 Subject: [PATCH] Work for #6474: change choose button caption if file is going to be replaced --- .../src/questions/file.component.html | 6 +- packages/survey-vue3-ui/src/File.vue | 6 +- src/knockout/koquestion_file.ts | 3 + src/knockout/templates/question-file.html | 6 +- src/localization/english.ts | 1 + src/question_file.ts | 6 ++ src/react/reactquestion_file.tsx | 6 +- src/vue/file.vue | 6 +- tests/markup/snapshots/file-2-png.snap.html | 8 +-- tests/markup/snapshots/file-2-zip.snap.html | 8 +-- .../snapshots/file-image-size.snap.html | 56 +++++++-------- .../markup/snapshots/file-mob2-png.snap.html | 8 +-- .../markup/snapshots/file-mob2-zip.snap.html | 8 +-- .../snapshots/file-modern-png.snap.html | 72 +++++++++---------- .../snapshots/file-modern-zip.snap.html | 70 +++++++++--------- tests/markup/snapshots/file-png.snap.html | 56 +++++++-------- tests/markup/snapshots/file-zip.snap.html | 54 +++++++------- tests/questionFileTests.ts | 28 ++++++++ 18 files changed, 223 insertions(+), 185 deletions(-) diff --git a/packages/survey-angular-ui/src/questions/file.component.html b/packages/survey-angular-ui/src/questions/file.component.html index 55c50e409a..791834c5f8 100644 --- 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] > - {{ model.chooseButtonCaption }} - + {{ model.chooseButtonText }} + - {{ question.chooseButtonCaption }} + {{ question.chooseButtonText }} diff --git a/src/knockout/koquestion_file.ts b/src/knockout/koquestion_file.ts index 9d7c7cd356..3a89b0e7a7 100644 --- 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()); this.setObservaleObj("koInputTitle", ko.observable()); + this.setObservaleObj("koChooseButtonText", ko.observable()); 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 index 319a5adc92..2504c0c132 100644 --- a/src/knockout/templates/question-file.html +++ b/src/knockout/templates/question-file.html @@ -11,10 +11,10 @@
- ); if (this.question.isEmpty()) { diff --git a/src/vue/file.vue b/src/vue/file.vue index 576ce44f6c..1683dc6835 100644 --- 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 > - {{ question.chooseButtonCaption }} - + {{ question.chooseButtonText }} + Drag and drop a file here or click the button below and choose a file to upload.
-
diff --git a/tests/markup/snapshots/file-2-zip.snap.html b/tests/markup/snapshots/file-2-zip.snap.html index b6f0180c29..eb5e5bcdce 100644 --- a/tests/markup/snapshots/file-2-zip.snap.html +++ b/tests/markup/snapshots/file-2-zip.snap.html @@ -4,12 +4,12 @@
Drag and drop a file here or click the button below and choose a file to upload.
-
diff --git a/tests/markup/snapshots/file-image-size.snap.html b/tests/markup/snapshots/file-image-size.snap.html index 9183bf076e..9205b6c3d6 100644 --- a/tests/markup/snapshots/file-image-size.snap.html +++ b/tests/markup/snapshots/file-image-size.snap.html @@ -1,29 +1,29 @@ -
- -
-
- Drag and drop a file here or click the button below and choose a file to upload. -
- -
-
- -
- -
- arrow.svg -
-
- File preview -
- Remove this file -
-
- -
-
+
+ +
+
+ Drag and drop a file here or click the button below and choose a file to upload. +
+ +
+
+ +
+ +
+ arrow.svg +
+
+ File preview +
+ Remove this file +
+
+ +
+
\ No newline at end of file diff --git a/tests/markup/snapshots/file-mob2-png.snap.html b/tests/markup/snapshots/file-mob2-png.snap.html index 1868754034..5c90a4f7b9 100644 --- a/tests/markup/snapshots/file-mob2-png.snap.html +++ b/tests/markup/snapshots/file-mob2-png.snap.html @@ -4,12 +4,12 @@
Drag and drop a file here or click the button below and choose a file to upload.
-
diff --git a/tests/markup/snapshots/file-mob2-zip.snap.html b/tests/markup/snapshots/file-mob2-zip.snap.html index e140189327..f04e3d4ac7 100644 --- a/tests/markup/snapshots/file-mob2-zip.snap.html +++ b/tests/markup/snapshots/file-mob2-zip.snap.html @@ -4,12 +4,12 @@
Drag and drop a file here or click the button below and choose a file to upload.
-
diff --git a/tests/markup/snapshots/file-modern-png.snap.html b/tests/markup/snapshots/file-modern-png.snap.html index de8431728a..ddd8e66287 100644 --- a/tests/markup/snapshots/file-modern-png.snap.html +++ b/tests/markup/snapshots/file-modern-png.snap.html @@ -1,37 +1,37 @@ -
- -
-
- Drag and drop a file here or click the button below and choose a file to upload. -
- -
-
- -
- -
- File preview -
- Remove this file - - - - Remove this file - -
-
-
- item1.png -
- -
- -
+
+ +
+
+ Drag and drop a file here or click the button below and choose a file to upload. +
+ +
+
+ +
+ +
+ File preview +
+ Remove this file + + + + Remove this file + +
+
+
+ item1.png +
+ +
+ +
\ No newline at end of file diff --git a/tests/markup/snapshots/file-modern-zip.snap.html b/tests/markup/snapshots/file-modern-zip.snap.html index b4f7effd31..8ba4803d57 100644 --- a/tests/markup/snapshots/file-modern-zip.snap.html +++ b/tests/markup/snapshots/file-modern-zip.snap.html @@ -1,36 +1,36 @@ -
- -
-
- Drag and drop a file here or click the button below and choose a file to upload. -
- -
-
- -
- -
-
- Remove this file - - - - Remove this file - -
-
-
- item1.zip -
- -
- -
+
+ +
+
+ Drag and drop a file here or click the button below and choose a file to upload. +
+ +
+
+ +
+ +
+
+ Remove this file + + + + Remove this file + +
+
+
+ item1.zip +
+ +
+ +
\ No newline at end of file diff --git a/tests/markup/snapshots/file-png.snap.html b/tests/markup/snapshots/file-png.snap.html index f2cab36e8c..69809cb5e9 100644 --- a/tests/markup/snapshots/file-png.snap.html +++ b/tests/markup/snapshots/file-png.snap.html @@ -1,29 +1,29 @@ -
- -
-
- Drag and drop a file here or click the button below and choose a file to upload. -
- -
-
- -
- -
- item1.png -
-
- File preview -
- Remove this file -
-
- -
-
+
+ +
+
+ Drag and drop a file here or click the button below and choose a file to upload. +
+ +
+
+ +
+ +
+ item1.png +
+
+ File preview +
+ Remove this file +
+
+ +
+
\ No newline at end of file diff --git a/tests/markup/snapshots/file-zip.snap.html b/tests/markup/snapshots/file-zip.snap.html index b6a5656a1d..4d15d3b144 100644 --- a/tests/markup/snapshots/file-zip.snap.html +++ b/tests/markup/snapshots/file-zip.snap.html @@ -1,28 +1,28 @@ -
- -
-
- Drag and drop a file here or click the button below and choose a file to upload. -
- -
-
- -
- -
- item1.zip -
-
-
- Remove this file -
-
- -
-
+
+ +
+
+ Drag and drop a file here or click the button below and choose a file to upload. +
+ +
+
+ +
+ +
+ item1.zip +
+
+
+ Remove this file +
+
+ +
+
\ No newline at end of file diff --git a/tests/questionFileTests.ts b/tests/questionFileTests.ts index 17a63eb27d..cbaf00fda8 100644 --- a/tests/questionFileTests.ts +++ b/tests/questionFileTests.ts @@ -648,6 +648,34 @@ QUnit.test("Writable captions", function(assert) { }); +QUnit.test("Check choose button text", function(assert) { + const json = { + questions: [ + { + type: "file", + title: "Please upload your file", + name: "file1", + } + ], + }; + + var survey = new SurveyModel(json); + var q: QuestionFileModel = survey.getQuestionByName("file1"); + + assert.equal(q.chooseButtonText, "Choose file"); + q.value = [{ + content: "https://api.surveyjs.io/public/v1/Survey/file?filePath=dcc81e2a-586f-45dd-b734-ee86bcbad8db.png", + name: "name.png", + type: "image/png" + }]; + assert.equal(q.chooseButtonText, "Replace file"); + + q.allowMultiple = true; + assert.equal(q.chooseButtonText, "Choose file"); + q.value = undefined; + assert.equal(q.chooseButtonText, "Choose file"); +}); + QUnit.test("check file d&d", (assert) => { var json = { questions: [