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] > - <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 index 18a31de318..634c42d99e 100644 --- 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 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<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 index 319a5adc92..2504c0c132 100644 --- 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 index 31c5d4cd30..4ce28862cf 100644 --- 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 index 72daa436fe..4db9878bef 100644 --- 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 index 57ba3cce02..e61731b8b6 100644 --- 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 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 > - <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 index 14c4f1b901..e2176a0018 100644 --- 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 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 @@ <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 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 @@ -<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> \ 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 @@ <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 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 @@ <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 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 @@ -<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> \ 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 @@ -<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> \ 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 @@ -<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="item1.png" href="#item1.png" title="item1.png">item1.png</a> - </div> - <div> - <img alt="File preview" src="#item1.png"> - <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="item1.png" href="#item1.png" title="item1.png">item1.png</a> + </div> + <div> + <img alt="File preview" src="#item1.png"> + <div> + <span class="sv_q_file_remove">Remove this file</span> + </div> + </div> + </span> + </div> + </div> </div> \ 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 @@ -<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="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 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="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> \ 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 = <any>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: [