From 90265f7c28047fd713866a545b7d086a68a25090 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Wed, 31 Jan 2024 17:15:53 +0300
Subject: [PATCH 1/5] Work for
 https://github.com/surveyjs/survey-creator/issues/5124 - implemented file
 chooser functionality for survey

---
 .../file/choose-file.component.html           |  3 +-
 .../src/components/file/FileChooseButton.vue  |  1 +
 src/base-interfaces.ts                        |  1 +
 src/knockout/components/file/choose-file.html |  2 +-
 src/question_file.ts                          | 92 +++++++++++--------
 .../components/file/file-choose-button.tsx    |  1 +
 src/survey-events-api.ts                      | 19 ++++
 src/survey.ts                                 | 35 ++++++-
 src/utils/utils.ts                            | 16 ++++
 .../components/file/file-choose-button.vue    |  1 +
 10 files changed, 127 insertions(+), 44 deletions(-)

diff --git a/packages/survey-angular-ui/src/components/file/choose-file.component.html b/packages/survey-angular-ui/src/components/file/choose-file.component.html
index a2e54f5b17..00a9363347 100644
--- a/packages/survey-angular-ui/src/components/file/choose-file.component.html
+++ b/packages/survey-angular-ui/src/components/file/choose-file.component.html
@@ -1,6 +1,7 @@
 <ng-template #template>
     <label tabindex="0" [class]="question.getChooseFileCss()"
-        [attr.for]="question.inputId" [attr.aria-label]="question.chooseButtonText" [key2click]>
+        [attr.for]="question.inputId" [attr.aria-label]="question.chooseButtonText" [key2click]
+        (click)="question.chooseFile()">
         <svg *ngIf="question.cssClasses.chooseFileIconId" [title]="question.chooseButtonText"
             [iconName]="question.cssClasses.chooseFileIconId" [size]="'auto'" sv-ng-svg-icon></svg>
         <span>{{ question.chooseButtonText }}</span>
diff --git a/packages/survey-vue3-ui/src/components/file/FileChooseButton.vue b/packages/survey-vue3-ui/src/components/file/FileChooseButton.vue
index 8c54054850..0538a3981c 100644
--- a/packages/survey-vue3-ui/src/components/file/FileChooseButton.vue
+++ b/packages/survey-vue3-ui/src/components/file/FileChooseButton.vue
@@ -5,6 +5,7 @@
     :for="question.inputId"
     v-bind:aria-label="question.chooseButtonText"
     v-key2click
+    v-on:click="function() { question.chooseFile(); }"
   >
     <sv-svg-icon
       v-if="question.cssClasses.chooseFileIconId"
diff --git a/src/base-interfaces.ts b/src/base-interfaces.ts
index bf9eacd505..61c7fbb377 100644
--- a/src/base-interfaces.ts
+++ b/src/base-interfaces.ts
@@ -234,6 +234,7 @@ export interface ISurvey extends ITextProcessor, ISurveyErrorOwner {
   elementContentVisibilityChanged(element: ISurveyElement): void;
   onCorrectQuestionAnswer(question: IQuestion, options: any): void;
   processPopupVisiblityChanged(question: IQuestion, popupModel: PopupModel, visible: boolean): void;
+  chooseFiles(input: HTMLInputElement, callback: (files: File[]) => void, context?: { element: ISurveyElement, item?: any }): void;
 }
 export interface ISurveyImpl {
   getSurveyData(): ISurveyData;
diff --git a/src/knockout/components/file/choose-file.html b/src/knockout/components/file/choose-file.html
index 808c86e910..fd008d3ca8 100644
--- a/src/knockout/components/file/choose-file.html
+++ b/src/knockout/components/file/choose-file.html
@@ -1,4 +1,4 @@
-<label tabindex="0" data-bind="css: question.koChooseFileCss, key2click, attr: { for: question.inputId, 'aria-label': question.koGetChooseButtonText() }">
+<label tabindex="0" data-bind="css: question.koChooseFileCss, key2click, click: function() { question.chooseFile(); }, attr: { for: question.inputId, 'aria-label': question.koGetChooseButtonText() }">
   <!-- ko if: question.cssClasses.chooseFileIconId -->
     <!-- ko component: { name: 'sv-svg-icon', params: { title: question.koGetChooseButtonText(), iconName: question.cssClasses.chooseFileIconId, size: 'auto' } } --><!-- /ko -->
   <!-- /ko -->
diff --git a/src/question_file.ts b/src/question_file.ts
index 4a68ce048d..2581322a8b 100644
--- a/src/question_file.ts
+++ b/src/question_file.ts
@@ -147,9 +147,11 @@ export class QuestionFileModel extends QuestionFileModelBase {
   @propertyArray({}) public previewValue: any[];
 
   @property({ defaultValue: 0 }) indexToShow: number;
-  @property({ defaultValue: 1, onSet: (_, target) => {
-    target.updateFileNavigator();
-  } }) pageSize: number;
+  @property({
+    defaultValue: 1, onSet: (_, target) => {
+      target.updateFileNavigator();
+    }
+  }) pageSize: number;
   @property({ defaultValue: false }) containsMultiplyFiles: boolean;
   @property() allowCameraAccess: boolean;
   /**
@@ -164,11 +166,13 @@ export class QuestionFileModel extends QuestionFileModelBase {
    * @see photoPlaceholder
    * @see fileOrPhotoPlaceholder
    */
-  @property({ onSet: (val: string, obj: QuestionFileModel) => {
-    if(!obj.isLoadingFromJson) {
-      obj.updateCurrentMode();
+  @property({
+    onSet: (val: string, obj: QuestionFileModel) => {
+      if (!obj.isLoadingFromJson) {
+        obj.updateCurrentMode();
+      }
     }
-  } }) sourceType: string;
+  }) sourceType: string;
 
   public fileNavigator: ActionContainer = new ActionContainer();
   protected prevFileAction: Action;
@@ -300,7 +304,7 @@ export class QuestionFileModel extends QuestionFileModelBase {
   public get hasFileUI(): boolean { return this.currentMode !== "camera"; }
   private videoStream: MediaStream;
   public startVideo(): void {
-    if(this.currentMode === "file" || this.isDesignMode || this.isPlayingVideo) return;
+    if (this.currentMode === "file" || this.isDesignMode || this.isPlayingVideo) return;
     this.setIsPlayingVideo(true);
     setTimeout(() => {
       this.startVideoInCamera();
@@ -310,7 +314,7 @@ export class QuestionFileModel extends QuestionFileModelBase {
   private startVideoInCamera(): void {
     this.camera.startVideo(this.videoId, (stream: MediaStream) => {
       this.videoStream = stream;
-      if(!stream) {
+      if (!stream) {
         this.stopVideo();
       }
     }, getRenderedSize(this.imageWidth), getRenderedSize(this.imageHeight));
@@ -320,9 +324,9 @@ export class QuestionFileModel extends QuestionFileModelBase {
     this.closeVideoStream();
   }
   public snapPicture(): void {
-    if(!this.isPlayingVideo) return;
+    if (!this.isPlayingVideo) return;
     const blobCallback = (blob: Blob | null): void => {
-      if(blob) {
+      if (blob) {
         const file = new File([blob], "snap_picture.png", { type: "image/png" });
         this.loadFiles([file]);
       }
@@ -332,7 +336,7 @@ export class QuestionFileModel extends QuestionFileModelBase {
   }
   @property() private canFlipCameraValue: boolean = undefined;
   public canFlipCamera(): boolean {
-    if(this.canFlipCameraValue === undefined) {
+    if (this.canFlipCameraValue === undefined) {
       this.canFlipCameraValue = this.camera.canFlip((res: boolean) => {
         this.canFlipCameraValue = res;
       });
@@ -340,13 +344,13 @@ export class QuestionFileModel extends QuestionFileModelBase {
     return this.canFlipCameraValue;
   }
   public flipCamera(): void {
-    if(!this.canFlipCamera()) return;
+    if (!this.canFlipCamera()) return;
     this.closeVideoStream();
     this.camera.flip();
     this.startVideoInCamera();
   }
   private closeVideoStream(): void {
-    if(!!this.videoStream) {
+    if (!!this.videoStream) {
       this.videoStream.getTracks().forEach(track => {
         track.stop();
       });
@@ -372,9 +376,9 @@ export class QuestionFileModel extends QuestionFileModelBase {
   }
   private prevPreviewLength = 0;
   private previewValueChanged() {
-    if(this.previewValue.length !== this.prevPreviewLength) {
-      if(this.previewValue.length > 0) {
-        if(this.prevPreviewLength > this.previewValue.length) {
+    if (this.previewValue.length !== this.prevPreviewLength) {
+      if (this.previewValue.length > 0) {
+        if (this.prevPreviewLength > this.previewValue.length) {
           this.indexToShow = this.indexToShow >= this.pagesCount && this.indexToShow > 0 ? this.pagesCount - 1 : this.indexToShow;
         } else {
           this.indexToShow = Math.floor(this.prevPreviewLength / this.pageSize);
@@ -385,7 +389,7 @@ export class QuestionFileModel extends QuestionFileModelBase {
     }
     this.fileIndexAction.title = this.getFileIndexCaption();
     this.containsMultiplyFiles = this.previewValue.length > 1;
-    if(this.previewValue.length > 0 && !this.calculatedGapBetweenItems && !this.calculatedItemWidth) {
+    if (this.previewValue.length > 0 && !this.calculatedGapBetweenItems && !this.calculatedItemWidth) {
       setTimeout(() => {
         this.processResponsiveness(0, this._width);
       });
@@ -471,6 +475,16 @@ export class QuestionFileModel extends QuestionFileModelBase {
   public set maxSize(val: number) {
     this.setPropertyValue("maxSize", val);
   }
+  public chooseFile(): void {
+    const inputElement = document.getElementById(this.inputId) as HTMLInputElement;
+    if (inputElement) {
+      if (this.survey) {
+        this.survey.chooseFiles(inputElement, files => this.loadFiles(files), { element: this });
+      } else {
+        inputElement.click();
+      }
+    }
+  }
   /**
    * Specifies whether users should confirm file deletion.
    *
@@ -518,19 +532,19 @@ export class QuestionFileModel extends QuestionFileModelBase {
 
   @property() locRenderedPlaceholderValue: LocalizableString;
   public get locRenderedPlaceholder(): LocalizableString {
-    if(this.locRenderedPlaceholderValue === undefined) {
+    if (this.locRenderedPlaceholderValue === undefined) {
       this.locRenderedPlaceholderValue = <LocalizableString><unknown>(new ComputedUpdater<LocalizableString>(() => {
         const isReadOnly = this.isReadOnly;
         const hasFileUI = (!this.isDesignMode && this.hasFileUI) || (this.isDesignMode && this.sourceType != "camera");
         const hasVideoUI = (!this.isDesignMode && this.hasVideoUI) || (this.isDesignMode && this.sourceType != "file");
         let renderedPlaceholder: LocalizableString;
-        if(isReadOnly) {
+        if (isReadOnly) {
           renderedPlaceholder = this.locNoFileChosenCaption;
         }
-        else if(hasFileUI && hasVideoUI) {
+        else if (hasFileUI && hasVideoUI) {
           renderedPlaceholder = this.locFileOrPhotoPlaceholder;
         }
-        else if(hasFileUI) {
+        else if (hasFileUI) {
           renderedPlaceholder = this.locFilePlaceholder;
         }
         else {
@@ -551,8 +565,8 @@ export class QuestionFileModel extends QuestionFileModelBase {
     this.setPropertyValue("isPlayingVideo", show);
   }
   private updateCurrentMode(): void {
-    if(!this.isDesignMode) {
-      if(this.sourceType !== "file") {
+    if (!this.isDesignMode) {
+      if (this.sourceType !== "file") {
         this.camera.hasCamera((res: boolean) => {
           this.setPropertyValue("currentMode", res && this.isDefaultV2Theme ? this.sourceType : "file");
         });
@@ -573,7 +587,7 @@ export class QuestionFileModel extends QuestionFileModelBase {
     return " ";
   }
 
-  public get chooseButtonText () {
+  public get chooseButtonText() {
     return this.isEmpty() || this.allowMultiple ? this.chooseButtonCaption : this.replaceButtonCaption;
   }
 
@@ -719,7 +733,7 @@ export class QuestionFileModel extends QuestionFileModelBase {
   private cameraValue: Camera;
 
   protected get camera(): Camera {
-    if(!this.cameraValue) {
+    if (!this.cameraValue) {
       this.cameraValue = new Camera();
     }
     return this.cameraValue;
@@ -887,7 +901,7 @@ export class QuestionFileModel extends QuestionFileModelBase {
   protected onChangeQuestionValue(newValue: any): void {
     super.onChangeQuestionValue(newValue);
     this.stateChanged(this.isEmpty() ? "empty" : "loaded");
-    if(!this.isLoadingFromJson) {
+    if (!this.isLoadingFromJson) {
       this.loadPreview(newValue);
     }
   }
@@ -933,7 +947,7 @@ export class QuestionFileModel extends QuestionFileModelBase {
   private calculatedItemWidth: number;
   private _width: number;
   public triggerResponsiveness(hard?: boolean): void {
-    if(hard) {
+    if (hard) {
       this.calculatedGapBetweenItems = undefined;
       this.calculatedItemWidth = undefined;
     }
@@ -941,20 +955,20 @@ export class QuestionFileModel extends QuestionFileModelBase {
   }
   protected processResponsiveness(_: number, availableWidth: number): boolean {
     this._width = availableWidth;
-    if(this.rootElement) {
-      if((!this.calculatedGapBetweenItems || !this.calculatedItemWidth) && this.allowMultiple) {
+    if (this.rootElement) {
+      if ((!this.calculatedGapBetweenItems || !this.calculatedItemWidth) && this.allowMultiple) {
         const fileListSelector = this.getFileListSelector();
         const fileListElement = fileListSelector ? this.rootElement.querySelector(this.getFileListSelector()) : undefined;
-        if(fileListElement) {
+        if (fileListElement) {
           this.calculatedGapBetweenItems = Math.ceil(Number.parseFloat(window.getComputedStyle(fileListElement).gap));
           const firstVisibleItem = Array.from(fileListElement.children).filter((_, index) => this.isPreviewVisible(index))[0];
-          if(firstVisibleItem) {
+          if (firstVisibleItem) {
             this.calculatedItemWidth = Math.ceil(Number.parseFloat(window.getComputedStyle(firstVisibleItem).width));
           }
         }
       }
     }
-    if(this.calculatedGapBetweenItems && this.calculatedItemWidth) {
+    if (this.calculatedGapBetweenItems && this.calculatedItemWidth) {
       this.pageSize = this.calcAvailableItemsCount(availableWidth, this.calculatedItemWidth, this.calculatedGapBetweenItems);
       return true;
     }
@@ -973,7 +987,7 @@ export class QuestionFileModel extends QuestionFileModelBase {
     if (this.canDragDrop()) {
       event.preventDefault();
       this.isDragging = true;
-      this.dragCounter ++;
+      this.dragCounter++;
     }
   }
   onDragOver = (event: any) => {
@@ -995,8 +1009,8 @@ export class QuestionFileModel extends QuestionFileModelBase {
   }
   onDragLeave = (event: any) => {
     if (this.canDragDrop()) {
-      this.dragCounter --;
-      if(this.dragCounter === 0) {
+      this.dragCounter--;
+      if (this.dragCounter === 0) {
         this.isDragging = false;
       }
     }
@@ -1013,9 +1027,9 @@ export class QuestionFileModel extends QuestionFileModelBase {
     this.clearFilesCore();
   }
   private clearFilesCore(): void {
-    if(this.rootElement) {
+    if (this.rootElement) {
       const input = this.rootElement.querySelectorAll("input")[0];
-      if(input) {
+      if (input) {
         input.value = "";
       }
     }
@@ -1103,7 +1117,7 @@ export class FileLoader {
               name: value.name,
               type: value.type,
             };
-            downloadedCount ++;
+            downloadedCount++;
             if (downloadedCount === files.length) {
               this.callback("loaded", this.loaded);
             }
diff --git a/src/react/components/file/file-choose-button.tsx b/src/react/components/file/file-choose-button.tsx
index 0b6bcebde8..005c6042b1 100644
--- a/src/react/components/file/file-choose-button.tsx
+++ b/src/react/components/file/file-choose-button.tsx
@@ -19,6 +19,7 @@ export class SurveyFileChooseButton extends ReactSurveyElement {
         className={this.question.getChooseFileCss()}
         htmlFor={this.question.inputId}
         aria-label={this.question.chooseButtonText}
+        onClick={() => this.question.chooseFile()}
       >
         {(!!this.question.cssClasses.chooseFileIconId) ? <SvgIcon title={this.question.chooseButtonText} iconName={this.question.cssClasses.chooseFileIconId} size={"auto"}></SvgIcon>: null }
         <span>{this.question.chooseButtonText}</span>
diff --git a/src/survey-events-api.ts b/src/survey-events-api.ts
index 5549c12cbe..c5d5ebf1ed 100644
--- a/src/survey-events-api.ts
+++ b/src/survey-events-api.ts
@@ -504,6 +504,25 @@ export interface UploadFilesEvent extends LoadFilesEvent {
    */
   files: Array<File>;
 }
+export interface OpenFileChooserEvent {
+  /**
+   * A file input HTML element.
+   */
+  input: HTMLInputElement;
+  /**
+   * A question, panel, page, or survey for which this event is raised.
+   */
+  element: Base;
+  /**
+   * A choice item for which the event is raised. This parameter has a value only when the dialog window is opened to select images for an [Image Picker](https://surveyjs.io/form-library/documentation/api-reference/image-picker-question-model) question.
+   */
+  item: ItemValue;
+  /**
+   * A callback function to which you should pass selected files.
+   * @param files An array of selected files.
+   */
+  callback: (files: Array<File>) => void;
+}
 export interface DownloadFileEvent extends LoadFilesEvent {
   /**
    * A callback function that you should call when a file is downloaded successfully or when deletion fails. Pass `"success"` or `"error"` as the first argument to indicate the operation status. As the second argument, you can pass the downloaded file's data as a Base64 string if file download was successful or an error message if file download failed.
diff --git a/src/survey.ts b/src/survey.ts
index b0684a777b..edac99781c 100644
--- a/src/survey.ts
+++ b/src/survey.ts
@@ -44,7 +44,7 @@ import {
 } from "./expressionItems";
 import { ExpressionRunner, ConditionRunner } from "./conditions";
 import { settings } from "./settings";
-import { isContainerVisible, isMobile, mergeValues, scrollElementByChildId, navigateToUrl, getRenderedStyleSize, getRenderedSize, wrapUrlForBackgroundImage } from "./utils/utils";
+import { isContainerVisible, isMobile, mergeValues, scrollElementByChildId, navigateToUrl, getRenderedStyleSize, getRenderedSize, wrapUrlForBackgroundImage, chooseFiles } from "./utils/utils";
 import { SurveyError } from "./survey-error";
 import { IAction, Action } from "./actions/action";
 import { ActionContainer } from "./actions/container";
@@ -64,7 +64,7 @@ import {
   MatrixCellValidateEvent, DynamicPanelModifiedEvent, DynamicPanelRemovingEvent, TimerPanelInfoTextEvent, DynamicPanelItemValueChangedEvent, DynamicPanelGetTabTitleEvent,
   DynamicPanelCurrentIndexChangedEvent, IsAnswerCorrectEvent, DragDropAllowEvent, ScrollingElementToTopEvent, GetQuestionTitleActionsEvent, GetPanelTitleActionsEvent,
   GetPageTitleActionsEvent, GetPanelFooterActionsEvent, GetMatrixRowActionsEvent, ElementContentVisibilityChangedEvent, GetExpressionDisplayValueEvent,
-  ServerValidateQuestionsEvent, MultipleTextItemAddedEvent, MatrixColumnAddedEvent, GetQuestionDisplayValueEvent, PopupVisibleChangedEvent, ChoicesSearchEvent
+  ServerValidateQuestionsEvent, MultipleTextItemAddedEvent, MatrixColumnAddedEvent, GetQuestionDisplayValueEvent, PopupVisibleChangedEvent, ChoicesSearchEvent, OpenFileChooserEvent
 } from "./survey-events-api";
 import { QuestionMatrixDropdownModelBase } from "./question_matrixdropdownbase";
 import { QuestionMatrixDynamicModel } from "./question_matrixdynamic";
@@ -443,6 +443,12 @@ export class SurveyModel extends SurveyElementCore
    * @see getResult
    */
   public onGetResult: EventBase<SurveyModel, GetResultEvent> = this.addEvent<SurveyModel, GetResultEvent>();
+  /**
+   * An event that is raised when Survey Creator opens a dialog window for users to select files.
+   * @see onUploadFile
+   * @see uploadFiles
+   */
+  public onOpenFileChooser: EventBase<SurveyModel, OpenFileChooserEvent> = this.addEvent<SurveyModel, OpenFileChooserEvent>();
   /**
    * An event that is raised when a File Upload or Signature Pad question starts to upload a file. Applies only if [`storeDataAsText`](https://surveyjs.io/form-library/documentation/api-reference/file-model#storeDataAsText) is `false`. Use this event to upload files to your server.
    *
@@ -5124,6 +5130,29 @@ export class SurveyModel extends SurveyElementCore
     }
   }
 
+  /**
+   * Opens a dialog window for users to select files.
+   * @param input A [file input HTML element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement).
+   * @param callback A callback function that you can use to process selected files. Accepts an array of JavaScript <a href="https://developer.mozilla.org/en-US/docs/Web/API/File" target="_blank">File</a> objects.
+   * @see onOpenFileChooser
+   * @see onUploadFile
+   */
+  public chooseFiles(
+    input: HTMLInputElement,
+    callback: (files: File[]) => void,
+    context?: { element: ISurveyElement, item?: any }
+  ) {
+    if (this.onOpenFileChooser.isEmpty) {
+      chooseFiles(input, callback);
+    } else {
+      this.onOpenFileChooser.fire(this, {
+        input: input,
+        element: context && context.element || this.survey,
+        item: context && context.item,
+        callback: callback
+      });
+    }
+  }
   /**
    * Uploads files to a server.
    *
@@ -6058,7 +6087,7 @@ export class SurveyModel extends SurveyElementCore
   }
   startLoadingFromJson(json?: any): void {
     super.startLoadingFromJson(json);
-    if(json && json.locale) {
+    if (json && json.locale) {
       this.locale = json.locale;
     }
   }
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 8603432e74..d603393be8 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -441,6 +441,21 @@ export function showConfirmDialog(message: string, callback: (res: boolean) => v
   return true;
 }
 
+function chooseFiles(input: HTMLInputElement, callback: (files: File[]) => void): void {
+  if (!window || !window["FileReader"]) return;
+  input.value = "";
+  input.onchange = (event) => {
+    if (!window["FileReader"]) return;
+    if (!input || !input.files || input.files.length < 1) return;
+    let files = [];
+    for (let i = 0; i < input.files.length; i++) {
+      files.push(input.files[i]);
+    }
+    callback(files);
+  };
+  input.click();
+}
+
 export {
   mergeValues,
   getElementWidth,
@@ -467,4 +482,5 @@ export {
   preventDefaults,
   findParentByClassNames,
   getFirstVisibleChild,
+  chooseFiles
 };
diff --git a/src/vue/components/file/file-choose-button.vue b/src/vue/components/file/file-choose-button.vue
index 9edc5a4d9a..2af78568bf 100644
--- a/src/vue/components/file/file-choose-button.vue
+++ b/src/vue/components/file/file-choose-button.vue
@@ -5,6 +5,7 @@
     :for="question.inputId"
     v-bind:aria-label="question.chooseButtonText"
     v-key2click
+    v-on:click="function() { question.chooseFile(); }"
   >
     <sv-svg-icon
       v-if="question.cssClasses.chooseFileIconId"

From 9e65be0e76b377f28cfe9d4aa11b645e32a85e41 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Wed, 31 Jan 2024 17:40:34 +0300
Subject: [PATCH 2/5] Work for
 https://github.com/surveyjs/survey-creator/issues/5124 - exported helper
 function

---
 src/entries/chunks/model.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/entries/chunks/model.ts b/src/entries/chunks/model.ts
index ce0112945e..c120156ad4 100644
--- a/src/entries/chunks/model.ts
+++ b/src/entries/chunks/model.ts
@@ -276,6 +276,7 @@ export {
   loadFileFromBase64,
   increaseHeightByContent,
   createSvg,
+  chooseFiles,
   sanitizeEditableContent,
   IAttachKey2clickOptions
 } from "../../utils/utils";

From 0e3e2bebb5ab7d5531d17cc7335baac73a592da3 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Thu, 1 Feb 2024 14:48:44 +0300
Subject: [PATCH 3/5] Work for
 https://github.com/surveyjs/survey-creator/issues/5124 - Fixed Vue3 build

---
 .../survey-vue3-ui/src/components/file/FileChooseButton.vue     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/survey-vue3-ui/src/components/file/FileChooseButton.vue b/packages/survey-vue3-ui/src/components/file/FileChooseButton.vue
index 0538a3981c..2c245b10cb 100644
--- a/packages/survey-vue3-ui/src/components/file/FileChooseButton.vue
+++ b/packages/survey-vue3-ui/src/components/file/FileChooseButton.vue
@@ -5,7 +5,7 @@
     :for="question.inputId"
     v-bind:aria-label="question.chooseButtonText"
     v-key2click
-    v-on:click="function() { question.chooseFile(); }"
+    v-on:click="question.chooseFile()"
   >
     <sv-svg-icon
       v-if="question.cssClasses.chooseFileIconId"

From 408c9c78f48d4ff280f3e04ff54432d5f52a9e44 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Thu, 1 Feb 2024 15:12:02 +0300
Subject: [PATCH 4/5] Work for
 https://github.com/surveyjs/survey-creator/issues/5124 - added u-test

---
 tests/surveytests.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/tests/surveytests.ts b/tests/surveytests.ts
index e62c3250ce..6cfe66963e 100644
--- a/tests/surveytests.ts
+++ b/tests/surveytests.ts
@@ -19201,3 +19201,14 @@ QUnit.test("survey.locale, default locale is not en and design-time, #7765", fun
   assert.equal(q1.hasDescription, true, "Description loaded correctly");
   surveyLocalization.defaultLocale = defautlLocale;
 });
+QUnit.test("onOpenFileChooser fires", function (assert) {
+  const survey = new SurveyModel();
+  let log = "";
+  survey.onOpenFileChooser.add((s, o) => {
+    log += "->onOpenFileChooser";
+    o.callback([]);
+  });
+  assert.equal(log, "");
+  survey.chooseFiles(document.createElement("input"), ([]) => { });
+  assert.equal(log, "->onOpenFileChooser");
+});

From 7b8705a95fe6853ba41e17feaa5877d22ccb064b Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Thu, 1 Feb 2024 15:13:42 +0300
Subject: [PATCH 5/5] Work for
 https://github.com/surveyjs/survey-creator/issues/5124 - added u-test

---
 tests/surveytests.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/surveytests.ts b/tests/surveytests.ts
index 6cfe66963e..f18a94a379 100644
--- a/tests/surveytests.ts
+++ b/tests/surveytests.ts
@@ -19209,6 +19209,6 @@ QUnit.test("onOpenFileChooser fires", function (assert) {
     o.callback([]);
   });
   assert.equal(log, "");
-  survey.chooseFiles(document.createElement("input"), ([]) => { });
+  survey.chooseFiles(document.createElement("input"), () => { });
   assert.equal(log, "->onOpenFileChooser");
 });