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 2e61f68897..a2e54f5b17 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,8 +1,8 @@
 <ng-template #template>
-    <div *ngIf="!question.isReadOnly" role="button" tabindex="0" [class]="question.getChooseFileCss()"
+    <label tabindex="0" [class]="question.getChooseFileCss()"
         [attr.for]="question.inputId" [attr.aria-label]="question.chooseButtonText" [key2click]>
         <svg *ngIf="question.cssClasses.chooseFileIconId" [title]="question.chooseButtonText"
             [iconName]="question.cssClasses.chooseFileIconId" [size]="'auto'" sv-ng-svg-icon></svg>
         <span>{{ question.chooseButtonText }}</span>
-    </div>
+</label>
 </ng-template>
\ No newline at end of file
diff --git a/packages/survey-angular-ui/src/components/file/file-preview.component.html b/packages/survey-angular-ui/src/components/file/file-preview.component.html
index 5b00c0675e..de0fefb3ed 100644
--- a/packages/survey-angular-ui/src/components/file/file-preview.component.html
+++ b/packages/survey-angular-ui/src/components/file/file-preview.component.html
@@ -9,7 +9,7 @@
                         val.name
                         }}</a>
                 </div>
-                <div [class]="question.cssClasses.imageWrapper">
+                <div [class]="question.getImageWrapperCss(val)">
                     <img *ngIf="question.canPreviewImage(val)" [attr.src]="val.content | safeUrl"
                         [style.height]="question.imageHeight" [style.width]="question.imageWidth" alt="File preview" />
                     <svg *ngIf="question.defaultImage(val)" [iconName]="question.cssClasses.defaultImageIconId"
diff --git a/packages/survey-vue3-ui/src/components/file/FileChooseButton.vue b/packages/survey-vue3-ui/src/components/file/FileChooseButton.vue
index e2b80c4e65..8c54054850 100644
--- a/packages/survey-vue3-ui/src/components/file/FileChooseButton.vue
+++ b/packages/survey-vue3-ui/src/components/file/FileChooseButton.vue
@@ -1,7 +1,5 @@
 <template>
-  <div
-    v-if="!question.isReadOnly"
-    role="button"
+  <label
     tabindex="0"
     :class="question.getChooseFileCss()"
     :for="question.inputId"
@@ -15,7 +13,7 @@
       :size="'auto'"
     ></sv-svg-icon>
     <span>{{ question.chooseButtonText }}</span>
-  </div>
+  </label>
 </template>
 <script setup lang="ts">
 import type { QuestionFileModel, Action } from "survey-core";
diff --git a/packages/survey-vue3-ui/src/components/file/FilePreview.vue b/packages/survey-vue3-ui/src/components/file/FilePreview.vue
index 666d503aa3..88ecd9842d 100644
--- a/packages/survey-vue3-ui/src/components/file/FilePreview.vue
+++ b/packages/survey-vue3-ui/src/components/file/FilePreview.vue
@@ -22,7 +22,7 @@
           >{{ val.name }}</a
         >
       </div>
-      <div :class="question.cssClasses.imageWrapper">
+      <div :class="question.getImageWrapperCss(val)">
         <img
           v-if="question.canPreviewImage(val)"
           :src="val.content"
diff --git a/src/actions/action.ts b/src/actions/action.ts
index 50f1495c0a..715dede9fc 100644
--- a/src/actions/action.ts
+++ b/src/actions/action.ts
@@ -50,6 +50,7 @@ export interface IAction {
    * @see visible
    */
   enabled?: boolean;
+  enabledIf?: () => boolean;
   /**
    * Specifies the visibility of the action item's title.
    * @see title
@@ -441,10 +442,13 @@ export class Action extends BaseAction implements IAction, ILocalizableOwner {
   public getVisible(): boolean {
     return this._visible;
   }
+
+  public enabledIf?: () => boolean;
   public setEnabled(val: boolean): void {
     this._enabled = val;
   }
   public getEnabled(): boolean {
+    if(this.enabledIf) return this.enabledIf();
     return this._enabled;
   }
   public setComponent(val: string): void {
diff --git a/src/defaultCss/defaultV2Css.ts b/src/defaultCss/defaultV2Css.ts
index 92026a7894..ad795c6f6f 100644
--- a/src/defaultCss/defaultV2Css.ts
+++ b/src/defaultCss/defaultV2Css.ts
@@ -592,6 +592,7 @@ export var defaultV2Css = {
     removeFileButton: "sd-context-btn--negative sd-file__remove-file-button",
     dragAreaPlaceholder: "sd-file__drag-area-placeholder",
     imageWrapper: "sd-file__image-wrapper",
+    imageWrapperDefaultImage: "sd-file__image-wrapper--default-image",
     single: "sd-file--single",
     singleImage: "sd-file--single-image",
     mobile: "sd-file--mobile",
diff --git a/src/defaultV2-theme/blocks/sd-action.scss b/src/defaultV2-theme/blocks/sd-action.scss
index d4305dd047..844eb33202 100644
--- a/src/defaultV2-theme/blocks/sd-action.scss
+++ b/src/defaultV2-theme/blocks/sd-action.scss
@@ -52,6 +52,10 @@ svg.sd-action--icon {
   cursor: default;
   opacity: 0.25;
   pointer-events: none;
+
+  use {
+    fill: $font-questiondescription-color;
+  }
 }
 
 .sd-action:not(.sd-action--pressed):hover,
diff --git a/src/defaultV2-theme/blocks/sd-file.scss b/src/defaultV2-theme/blocks/sd-file.scss
index 5fac3d7ec9..e2c6904903 100644
--- a/src/defaultV2-theme/blocks/sd-file.scss
+++ b/src/defaultV2-theme/blocks/sd-file.scss
@@ -148,9 +148,10 @@
 .sd-file__preview {
   position: relative;
   display: flex;
-  align-items: center;
+  align-items: stretch;
   flex-direction: column;
   min-height: 100%;
+  width: calcSize(12);
   margin: 0;
 
   .sd-file__default-image {
@@ -182,6 +183,8 @@
     white-space: normal;
     word-break: break-all;
     width: calcSize(12);
+    min-width: 100%;
+    max-width: 100%;
     overflow: hidden;
     max-height: calcSize(6);
     text-overflow: ellipsis;
@@ -203,30 +206,34 @@
 .sd-file__image-wrapper {
   position: relative;
   text-align: center;
-  min-width: calcSize(12);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: calcSize(12);
   min-height: calcSize(12);
+  height: calcSize(12);
+  background: $background-dim;
 
   img:not(.sd-file__default-image) {
     display: block;
+    max-width: 100%;
+    max-height: 100%;
     width: calcSize(12);
     height: calcSize(12);
     object-fit: contain;
-    background: $background-dim;
   }
 }
 
+.sd-file__image-wrapper--default-image {
+  background: transparent;
+}
+
 .sd-file--single {
   img:hover+.sd-file__remove-file-button {
     display: none;
   }
 }
 
-.sd-file--mobile:first-child {
-  .sd-file__list {
-    height: calc(100% - 4 * #{$base-unit});
-  }
-}
-
 .sd-file--single-image {
   height: calc(36 * #{$base-unit});
 
@@ -244,6 +251,10 @@
     width: 100%;
   }
 
+  .sd-file__image-wrapper {
+    background-color: $background-dim-light;
+  }
+
   .sd-file__image-wrapper {
     min-height: 100%;
     min-width: 100%;
@@ -251,7 +262,6 @@
     img {
       width: 100%;
       height: 100%;
-      background-color: $background-dim-light;
     }
   }
 
@@ -264,12 +274,18 @@
     a {
       color: transparent;
       width: 100%;
+      min-width: 100%;
+      max-width: 100%;
       height: 100%;
       outline: none;
     }
   }
 }
 
+.sd-file__image-wrapper.sd-file__image-wrapper--default-image {
+  background: transparent;
+}
+
 .sd-file>input:focus+.sd-file__decorator .sd-file__choose-btn {
   &.sd-file__choose-btn--icon {
     use {
@@ -326,7 +342,7 @@
 }
 
 .sd-file__video-container {
-  background-color: $background-dim;
+  background-color: $background-dark;
   position: absolute;
   top: 0;
   left: 0;
diff --git a/src/knockout/components/file/choose-file.html b/src/knockout/components/file/choose-file.html
index 0da34e7c2f..808c86e910 100644
--- a/src/knockout/components/file/choose-file.html
+++ b/src/knockout/components/file/choose-file.html
@@ -1,6 +1,6 @@
-<div tabindex="0" role="button" data-bind="css: question.koChooseFileCss, key2click, attr: { for: question.inputId, 'aria-label': question.koGetChooseButtonText() }">
+<label tabindex="0" data-bind="css: question.koChooseFileCss, key2click, 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 -->
   <span data-bind="text: question.koGetChooseButtonText()"></span>
-</div>
\ No newline at end of file
+</label>
\ No newline at end of file
diff --git a/src/knockout/components/file/file-preview.html b/src/knockout/components/file/file-preview.html
index 58ca991c27..53ca31e7df 100644
--- a/src/knockout/components/file/file-preview.html
+++ b/src/knockout/components/file/file-preview.html
@@ -2,7 +2,7 @@
 <div data-bind="css: question.cssClasses.fileList, foreach: question.koData, visible: question.koHasValue">
   <span data-bind="visible: question.isPreviewVisible($index()), css: question.cssClasses.preview">
     <!-- ko template: { name: 'survey-question-file-sign', data: {question: question, item: $data, fileSignCss: question.cssClasses.fileSign} } --><!-- /ko -->
-    <div data-bind="css: question.cssClasses.imageWrapper">
+    <div data-bind="css: question.getImageWrapperCss($data)">
       <!-- ko if: question.canPreviewImage($data) -->
       <img data-bind="attr: { src: $data.content }, style : { height: question.imageHeight, width: question.imageWidth }" alt="File preview">
       <!-- /ko -->
diff --git a/src/question_file.ts b/src/question_file.ts
index 069ea16bfd..2045fe2c4f 100644
--- a/src/question_file.ts
+++ b/src/question_file.ts
@@ -13,6 +13,7 @@ import { Helpers } from "./helpers";
 import { Camera } from "./utils/camera";
 import { LocalizableString } from "./localizablestring";
 import { settings } from "./settings";
+import { getRenderedSize } from "./utils/utils";
 
 /**
  * A class that describes the File Upload question type.
@@ -92,8 +93,7 @@ export class QuestionFileModel extends Question {
     const isUploading = this.isUploading;
     const isPlayingVideo = this.isPlayingVideo;
     const isDefaultV2Theme = this.isDefaultV2Theme;
-    const isReadOnly = this.isInputReadOnly;
-    return !isUploading && !isPlayingVideo && !isReadOnly && isDefaultV2Theme;
+    return !isUploading && !isPlayingVideo && isDefaultV2Theme;
   }
 
   constructor(name: string) {
@@ -162,6 +162,7 @@ export class QuestionFileModel extends Question {
       iconSize: "auto",
       title: <string>(new ComputedUpdater<string>(() => this.takePhotoCaption) as any),
       showTitle: <boolean>(new ComputedUpdater<boolean>(() => !this.isAnswered) as any),
+      enabledIf: () => !this.isInputReadOnly,
       action: () => {
         this.startVideo();
       }
@@ -172,6 +173,7 @@ export class QuestionFileModel extends Question {
       iconSize: "auto",
       title: <string>(new ComputedUpdater<string>(() => this.clearButtonCaption) as any),
       showTitle: false,
+      enabledIf: () => !this.isInputReadOnly,
       innerCss: <string>(new ComputedUpdater<string>(() => this.cssClasses.removeButton) as any),
       action: () => {
         this.doClean();
@@ -180,10 +182,9 @@ export class QuestionFileModel extends Question {
     [this.closeCameraAction, this.changeCameraAction, this.takePictureAction].forEach((action) => {
       action.cssClasses = {};
     });
-    this.registerFunctionOnPropertiesValueChanged(["currentMode", "isAnswered"], () => {
-      this.updateActions();
+    this.registerFunctionOnPropertiesValueChanged(["sourceType", "currentMode", "isAnswered"], () => {
+      this.updateActionsVisibility();
     });
-    this.updateActions();
     this.actionsContainer.actions = [this.chooseFileAction, this.startCameraAction, this.cleanAction];
     this.fileNavigator.actions = [this.prevFileAction, this.fileIndexAction, this.nextFileAction];
   }
@@ -198,13 +199,14 @@ export class QuestionFileModel extends Question {
       this.startVideoInCamera();
     }, 0);
   }
+
   private startVideoInCamera(): void {
     this.camera.startVideo(this.videoId, (stream: MediaStream) => {
       this.videoStream = stream;
       if(!stream) {
         this.stopVideo();
       }
-    }, this.imageWidth, this.imageHeight);
+    }, getRenderedSize(this.imageWidth), getRenderedSize(this.imageHeight));
   }
   public stopVideo(): void {
     this.setIsPlayingVideo(false);
@@ -480,9 +482,10 @@ export class QuestionFileModel extends Question {
       }
     }
   }
-  private updateActions() {
-    this.chooseFileAction.visible = this.hasFileUI;
-    this.startCameraAction.visible = this.hasVideoUI;
+  private updateActionsVisibility() {
+    const isDesignMode = this.isDesignMode;
+    this.chooseFileAction.visible = (!isDesignMode && this.hasFileUI) || (isDesignMode && this.sourceType !== "camera");
+    this.startCameraAction.visible = (!isDesignMode && this.hasVideoUI) || (isDesignMode && this.sourceType !== "file");
     this.cleanAction.visible = !!this.isAnswered;
   }
   get inputTitle(): string {
@@ -778,6 +781,9 @@ export class QuestionFileModel extends Question {
     }
     return questionPlainData;
   }
+  public getImageWrapperCss(data: any): string {
+    return new CssClassBuilder().append(this.cssClasses.imageWrapper).append(this.cssClasses.imageWrapperDefaultImage, this.defaultImage(data)).toString();
+  }
   protected getActionsContainerCss(css: any): string {
     return new CssClassBuilder()
       .append(css.actionsContainer)
@@ -862,7 +868,7 @@ export class QuestionFileModel extends Question {
   endLoadingFromJson(): void {
     super.endLoadingFromJson();
     this.updateCurrentMode();
-    this.updateActions();
+    this.updateActionsVisibility();
     this.loadPreview(this.value);
   }
   protected needResponsiveness(): boolean {
diff --git a/src/react/components/file/file-choose-button.tsx b/src/react/components/file/file-choose-button.tsx
index 5ce7a3e19b..334b17aced 100644
--- a/src/react/components/file/file-choose-button.tsx
+++ b/src/react/components/file/file-choose-button.tsx
@@ -14,8 +14,7 @@ export class SurveyFileChooseButton extends ReactSurveyElement {
   }
   render() {
     return attachKey2click(
-      <div
-        role="button"
+      <label
         tabIndex={0}
         className={this.question.getChooseFileCss()}
         // htmlFor={this.question.inputId}
@@ -23,7 +22,7 @@ export class SurveyFileChooseButton extends ReactSurveyElement {
       >
         {(!!this.question.cssClasses.chooseFileIconId) ? <SvgIcon title={this.question.chooseButtonText} iconName={this.question.cssClasses.chooseFileIconId} size={"auto"}></SvgIcon>: null }
         <span>{this.question.chooseButtonText}</span>
-      </div>
+      </label>
     );
   }
 }
diff --git a/src/react/components/file/file-preview.tsx b/src/react/components/file/file-preview.tsx
index 76c4fa2471..8f657f751e 100644
--- a/src/react/components/file/file-preview.tsx
+++ b/src/react/components/file/file-preview.tsx
@@ -39,7 +39,7 @@ export class SurveyFilePreview extends SurveyElementBase<{ question: QuestionFil
           style={{ display: this.question.isPreviewVisible(index) ? undefined : "none" }}
         >
           {this.renderFileSign(this.question.cssClasses.fileSign, val)}
-          <div className={this.question.cssClasses.imageWrapper}>
+          <div className={this.question.getImageWrapperCss(val)}>
             {this.question.canPreviewImage(val) ? (
               <img
                 src={val.content}
diff --git a/src/utils/camera.ts b/src/utils/camera.ts
index 47b8152480..49709744c3 100644
--- a/src/utils/camera.ts
+++ b/src/utils/camera.ts
@@ -68,7 +68,7 @@ export class Camera {
       this.hasCameraCallback(callback);
     }
   }
-  public getMediaConstraints(videoEl?: any): MediaStreamConstraints {
+  public getMediaConstraints(videoSize?: { width?: number, height?: number }): MediaStreamConstraints {
     const devices = Camera.cameraList;
     if(!Array.isArray(devices) || devices.length < 1) return undefined;
     if(Camera.cameraIndex < 0) Camera.cameraIndex = 0;
@@ -79,32 +79,30 @@ export class Camera {
     } else {
       videoConstraints.facingMode = Camera.cameraFacingMode;
     }
-    if(videoEl) {
-      videoConstraints.width = { exact: videoEl.width ? videoEl.width : videoEl.scrollWidth };
-      videoConstraints.height = { exact: videoEl.height ? videoEl.height : videoEl.scrollHeight };
+    if(videoSize) {
+      if(videoSize?.height) {
+        videoConstraints.height = { ideal: videoSize.height };
+      }
+      if(videoSize?.width) {
+        videoConstraints.width = { ideal: videoSize.width };
+      }
     }
     return {
       video: videoConstraints,
       audio: false
     };
   }
-  public startVideo(videoElementId: string, callback: (stream: MediaStream) => void, imageWidth?: string, imageHeight?: string): void {
-    const videoEl: any = settings.environment.root?.getElementById(videoElementId);
+  public startVideo(videoElementId: string, callback: (stream: MediaStream) => void, imageWidth?: number, imageHeight?: number): void {
+    const videoEl: HTMLVideoElement = settings.environment.root?.getElementById(videoElementId) as any;
     if(!videoEl) {
       callback(undefined);
       return;
     }
-    if(imageWidth) {
-      videoEl.width = imageWidth;
-    } else {
-      videoEl.style.width = "100%";
-    }
-    if(imageHeight) {
-      videoEl.height = imageHeight;
-    } else {
-      videoEl.style.height = "100%";
-    }
-    const mediaConstraints = this.getMediaConstraints(videoEl);
+    videoEl.style.width = "100%";
+    videoEl.style.height = "auto";
+    videoEl.style.height = "100%";
+    videoEl.style.objectFit = "contain";
+    const mediaConstraints = this.getMediaConstraints({ width: imageWidth, height: imageHeight });
     navigator.mediaDevices.getUserMedia(mediaConstraints).then(stream => {
       videoEl.srcObject = stream;
       if(!Camera.cameraList[Camera.cameraIndex]?.deviceId && !!stream.getTracks()[0].getCapabilities().facingMode) {
@@ -118,14 +116,19 @@ export class Camera {
         callback(undefined);
       });
   }
+  public getImageSize(videoEl:HTMLVideoElement): { width: number, height: number } {
+    return { width: videoEl.videoWidth, height: videoEl.videoHeight };
+
+  }
   public snap(videoElementId: string, callback: BlobCallback): boolean {
     if("undefined" === typeof document) return false;
     const root = document;
-    const videoEl: any = root.getElementById(videoElementId);
+    const videoEl: HTMLVideoElement = root.getElementById(videoElementId) as HTMLVideoElement;
     if(!videoEl) return false;
     const canvasEl = root.createElement("canvas");
-    canvasEl.height = videoEl.scrollHeight;
-    canvasEl.width = videoEl.scrollWidth;
+    const imageSize = this.getImageSize(videoEl);
+    canvasEl.height = imageSize.height;
+    canvasEl.width = imageSize.width;
     let context = canvasEl.getContext("2d");
     /*
     if(this._facingMode == 'user'){
diff --git a/src/vue/components/file/file-choose-button.vue b/src/vue/components/file/file-choose-button.vue
index 4a629eaef1..9edc5a4d9a 100644
--- a/src/vue/components/file/file-choose-button.vue
+++ b/src/vue/components/file/file-choose-button.vue
@@ -1,7 +1,5 @@
 <template>
-  <div
-    v-if="!question.isReadOnly"
-    role="button"
+  <label
     tabindex="0"
     :class="question.getChooseFileCss()"
     :for="question.inputId"
@@ -15,7 +13,7 @@
       :size="'auto'"
     ></sv-svg-icon>
     <span>{{ question.chooseButtonText }}</span>
-  </div>
+  </label>
 </template>
 <script lang="ts">
 import Vue from "vue";
diff --git a/src/vue/components/file/file-preview.vue b/src/vue/components/file/file-preview.vue
index d2999a3b41..96ec629ab2 100644
--- a/src/vue/components/file/file-preview.vue
+++ b/src/vue/components/file/file-preview.vue
@@ -19,7 +19,7 @@
           >{{ val.name }}</a
         >
       </div>
-      <div :class="question.cssClasses.imageWrapper">
+      <div :class="question.getImageWrapperCss(val)">
         <img
           v-if="question.canPreviewImage(val)"
           :src="val.content"
diff --git a/testCafe/questions/file.js b/testCafe/questions/file.js
index 9dde5cd549..be931c3481 100644
--- a/testCafe/questions/file.js
+++ b/testCafe/questions/file.js
@@ -50,7 +50,7 @@ frameworks.forEach(framework => {
     let surveyResult;
 
     await ClientFunction(() => {
-      document.querySelector("div[aria-label=\"Select File\"]").click = () => { window.chooseFileClickedTest = "yes"; };
+      document.querySelector("label[aria-label=\"Select File\"]").click = () => { window.chooseFileClickedTest = "yes"; };
     })();
     await t.pressKey("tab");
     await t.pressKey("enter");
diff --git a/testCafe/questions/file.ts b/testCafe/questions/file.ts
new file mode 100644
index 0000000000..70a1688521
--- /dev/null
+++ b/testCafe/questions/file.ts
@@ -0,0 +1,27 @@
+import { frameworks, initSurvey, url_test } from "../helper";
+import { ClientFunction, Selector } from "testcafe";
+const title = "file";
+
+frameworks.forEach(framework => {
+  fixture`${framework} ${title}`.page`${url_test}defaultV2/${framework}`.beforeEach(
+    async t => {
+      await initSurvey(framework, {
+        elements: [
+          {
+            type: "file",
+            name: "q1"
+          }
+        ]
+      });
+    }
+  );
+
+  test("choose file actions readOnly are reactive", async t => {
+    await t.setFilesToUpload("input[type=file]", "../resources/stub.txt")
+      .expect(Selector("button[title='Clear']").hasAttribute("disabled")).notOk();
+    await ClientFunction(() => {
+      (window as any).survey.getAllQuestions()[0].readOnly = true;
+    })();
+    await t.expect(Selector("button[title='Clear']").hasAttribute("disabled")).ok();
+  });
+});
\ No newline at end of file
diff --git a/tests/markup/snapshots/file-2-png.snap.html b/tests/markup/snapshots/file-2-png.snap.html
index 0d304eeed8..e1bf92c957 100644
--- a/tests/markup/snapshots/file-2-png.snap.html
+++ b/tests/markup/snapshots/file-2-png.snap.html
@@ -9,14 +9,14 @@
 				<div class="sd-action-bar sd-file__actions-container">
 					<div class="sv-action" id="sv-file-choose-file">
 						<div class="sv-action__content">
-							<div aria-label="Replace file" class="sd-context-btn sd-file__choose-btn sd-file__choose-btn--icon" role="button" tabindex="0">
+							<label aria-label="Replace file" class="sd-context-btn sd-file__choose-btn sd-file__choose-btn--icon" tabindex="0">
 								<svg aria-label="Replace file" class="sv-svg-icon" role="img">
 									<use xlink:href="#icon-choosefile" class="">
 									</use>
 									<title class="">Replace file</title>
 								</svg>
 								<span>Replace file</span>
-							</div>
+							</label>
 						</div>
 					</div>
 					<div class="sv-action sv-action--hidden" id="sv-file-start-camera">
diff --git a/tests/markup/snapshots/file-2-zip-png-file-navigator.snap.html b/tests/markup/snapshots/file-2-zip-png-file-navigator.snap.html
index 37028e70a4..8e8d64ba93 100644
--- a/tests/markup/snapshots/file-2-zip-png-file-navigator.snap.html
+++ b/tests/markup/snapshots/file-2-zip-png-file-navigator.snap.html
@@ -9,14 +9,14 @@
 				<div class="sd-action-bar sd-file__actions-container">
 					<div class="sv-action" id="sv-file-choose-file">
 						<div class="sv-action__content">
-							<div aria-label="Select File" class="sd-context-btn sd-file__choose-btn sd-file__choose-btn--icon" role="button" tabindex="0">
+							<label aria-label="Select File" class="sd-context-btn sd-file__choose-btn sd-file__choose-btn--icon" tabindex="0">
 								<svg aria-label="Select File" class="sv-svg-icon" role="img">
 									<use xlink:href="#icon-choosefile" class="">
 									</use>
 									<title class="">Select File</title>
 								</svg>
 								<span>Select File</span>
-							</div>
+							</label>
 						</div>
 					</div>
 					<div class="sv-action sv-action--hidden" id="sv-file-start-camera">
@@ -46,7 +46,7 @@
 		</div>
 		<div class="sd-file__list">
 			<span class="sd-file__preview">
-				<div class="sd-file__image-wrapper">
+				<div class="sd-file__image-wrapper sd-file__image-wrapper--default-image">
 					<svg class="sd-file__default-image sv-svg-icon" role="img">
 						<use xlink:href="#icon-defaultfile" class="">
 						</use>
diff --git a/tests/markup/snapshots/file-2-zip-png-ro.snap.html b/tests/markup/snapshots/file-2-zip-png-ro.snap.html
index 814ffd15d0..bcddcd74ef 100644
--- a/tests/markup/snapshots/file-2-zip-png-ro.snap.html
+++ b/tests/markup/snapshots/file-2-zip-png-ro.snap.html
@@ -6,11 +6,47 @@
 				<span class="sv-string-viewer">No file chosen</span>
 			</span>
 			<div class="sd-file__wrapper">
+				<div class="sd-action-bar sd-file__actions-container">
+					<div class="sv-action" id="sv-file-choose-file">
+						<div class="sv-action__content">
+							<label aria-label="Select File" class="sd-context-btn sd-file__choose-btn sd-file__choose-btn--icon" tabindex="0">
+								<svg aria-label="Select File" class="sv-svg-icon" role="img">
+									<use xlink:href="#icon-choosefile" class="">
+									</use>
+									<title class="">Select File</title>
+								</svg>
+								<span>Select File</span>
+							</label>
+						</div>
+					</div>
+					<div class="sv-action sv-action--hidden" id="sv-file-start-camera">
+						<div class="sv-action__content">
+							<button class="sd-context-btn" disabled="" role="button" tabindex="0" title="Take Photo" type="button">
+								<svg aria-label="Take Photo" class="sd-action__icon sv-svg-icon" role="img">
+									<use xlink:href="#icon-takepicture_24x24" class="">
+									</use>
+									<title class="">Take Photo</title>
+								</svg>
+							</button>
+						</div>
+					</div>
+					<div class="sv-action" id="sv-file-clean">
+						<div class="sv-action__content">
+							<button class="sd-context-btn sd-context-btn--negative" disabled="" role="button" tabindex="0" title="Clear" type="button">
+								<svg aria-label="Clear" class="sd-action__icon sv-svg-icon" role="img">
+									<use xlink:href="#icon-clear" class="">
+									</use>
+									<title class="">Clear</title>
+								</svg>
+							</button>
+						</div>
+					</div>
+				</div>
 			</div>
 		</div>
 		<div class="sd-file__list">
 			<span class="sd-file__preview">
-				<div class="sd-file__image-wrapper">
+				<div class="sd-file__image-wrapper sd-file__image-wrapper--default-image">
 					<svg class="sd-file__default-image sv-svg-icon" role="img">
 						<use xlink:href="#icon-defaultfile" class="">
 						</use>
diff --git a/tests/markup/snapshots/file-2-zip-png.snap.html b/tests/markup/snapshots/file-2-zip-png.snap.html
index 3596836c34..a85dc18d38 100644
--- a/tests/markup/snapshots/file-2-zip-png.snap.html
+++ b/tests/markup/snapshots/file-2-zip-png.snap.html
@@ -9,14 +9,14 @@
 				<div class="sd-action-bar sd-file__actions-container">
 					<div class="sv-action" id="sv-file-choose-file">
 						<div class="sv-action__content">
-							<div aria-label="Select File" class="sd-context-btn sd-file__choose-btn sd-file__choose-btn--icon" role="button" tabindex="0">
+							<label aria-label="Select File" class="sd-context-btn sd-file__choose-btn sd-file__choose-btn--icon" tabindex="0">
 								<svg aria-label="Select File" class="sv-svg-icon" role="img">
 									<use xlink:href="#icon-choosefile" class="">
 									</use>
 									<title class="">Select File</title>
 								</svg>
 								<span>Select File</span>
-							</div>
+							</label>
 						</div>
 					</div>
 					<div class="sv-action sv-action--hidden" id="sv-file-start-camera">
@@ -46,7 +46,7 @@
 		</div>
 		<div class="sd-file__list">
 			<span class="sd-file__preview">
-				<div class="sd-file__image-wrapper">
+				<div class="sd-file__image-wrapper sd-file__image-wrapper--default-image">
 					<svg class="sd-file__default-image sv-svg-icon" role="img">
 						<use xlink:href="#icon-defaultfile" class="">
 						</use>
diff --git a/tests/markup/snapshots/file-2-zip.snap.html b/tests/markup/snapshots/file-2-zip.snap.html
index afc091be48..99cfaefadd 100644
--- a/tests/markup/snapshots/file-2-zip.snap.html
+++ b/tests/markup/snapshots/file-2-zip.snap.html
@@ -9,14 +9,14 @@
 				<div class="sd-action-bar sd-file__actions-container">
 					<div class="sv-action" id="sv-file-choose-file">
 						<div class="sv-action__content">
-							<div aria-label="Replace file" class="sd-context-btn sd-file__choose-btn sd-file__choose-btn--icon" role="button" tabindex="0">
+							<label aria-label="Replace file" class="sd-context-btn sd-file__choose-btn sd-file__choose-btn--icon" tabindex="0">
 								<svg aria-label="Replace file" class="sv-svg-icon" role="img">
 									<use xlink:href="#icon-choosefile" class="">
 									</use>
 									<title class="">Replace file</title>
 								</svg>
 								<span>Replace file</span>
-							</div>
+							</label>
 						</div>
 					</div>
 					<div class="sv-action sv-action--hidden" id="sv-file-start-camera">
@@ -46,7 +46,7 @@
 		</div>
 		<div class="sd-file__list">
 			<span class="sd-file__preview">
-				<div class="sd-file__image-wrapper">
+				<div class="sd-file__image-wrapper sd-file__image-wrapper--default-image">
 					<svg class="sd-file__default-image sv-svg-icon" role="img">
 						<use xlink:href="#icon-defaultfile" class="">
 						</use>
diff --git a/tests/markup/snapshots/file-2.snap.html b/tests/markup/snapshots/file-2.snap.html
index 40e56398ec..87b9f866ff 100644
--- a/tests/markup/snapshots/file-2.snap.html
+++ b/tests/markup/snapshots/file-2.snap.html
@@ -9,14 +9,14 @@
 				<div class="sd-action-bar sd-file__actions-container">
 					<div class="sv-action" id="sv-file-choose-file">
 						<div class="sv-action__content">
-							<div aria-label="Select File" class="sd-action sd-file__choose-btn sd-file__choose-btn--text" role="button" tabindex="0">
+							<label aria-label="Select File" class="sd-action sd-file__choose-btn sd-file__choose-btn--text" tabindex="0">
 								<svg aria-label="Select File" class="sv-svg-icon" role="img">
 									<use xlink:href="#icon-choosefile" class="">
 									</use>
 									<title class="">Select File</title>
 								</svg>
 								<span>Select File</span>
-							</div>
+							</label>
 						</div>
 					</div>
 					<div class="sv-action sv-action--hidden" id="sv-file-start-camera">
diff --git a/tests/markup/snapshots/file-camera.snap.html b/tests/markup/snapshots/file-camera.snap.html
index 9ffa358e51..ac6b36228e 100644
--- a/tests/markup/snapshots/file-camera.snap.html
+++ b/tests/markup/snapshots/file-camera.snap.html
@@ -6,9 +6,9 @@
 				<span class="sv-string-viewer">Drag and drop a file here or click the button below to select a file to upload.</span>
 			</span>
 			<div>
-				<div aria-label="Select File" class="sv_q_file_choose_button" role="button" tabindex="0">
+				<label aria-label="Select File" class="sv_q_file_choose_button" tabindex="0">
 					<span>Select File</span>
-				</div>
+				</label>
 				<span class="sv_q_file_placeholder">No file chosen</span>
 			</div>
 		</div>
diff --git a/tests/markup/snapshots/file-image-size.snap.html b/tests/markup/snapshots/file-image-size.snap.html
index 8c28f2c209..dec9d76f44 100644
--- a/tests/markup/snapshots/file-image-size.snap.html
+++ b/tests/markup/snapshots/file-image-size.snap.html
@@ -6,9 +6,9 @@
 				<span class="sv-string-viewer">Drag and drop a file here or click the button below to select a file to upload.</span>
 			</span>
 			<div>
-				<div aria-label="Replace file" class="sv_q_file_choose_button" role="button" tabindex="0">
+				<label aria-label="Replace file" class="sv_q_file_choose_button" tabindex="0">
 					<span>Replace file</span>
-				</div>
+				</label>
 			</div>
 		</div>
 		<button class="sv_q_file_remove_button" type="button">
diff --git a/tests/markup/snapshots/file-mob2-png.snap.html b/tests/markup/snapshots/file-mob2-png.snap.html
index 9ca5df64ba..fa8f3217d8 100644
--- a/tests/markup/snapshots/file-mob2-png.snap.html
+++ b/tests/markup/snapshots/file-mob2-png.snap.html
@@ -9,14 +9,14 @@
 				<div class="sd-action-bar sd-file__actions-container">
 					<div class="sv-action" id="sv-file-choose-file">
 						<div class="sv-action__content">
-							<div aria-label="Replace file" class="sd-context-btn sd-file__choose-btn sd-file__choose-btn--icon" role="button" tabindex="0">
+							<label aria-label="Replace file" class="sd-context-btn sd-file__choose-btn sd-file__choose-btn--icon" tabindex="0">
 								<svg aria-label="Replace file" class="sv-svg-icon" role="img">
 									<use xlink:href="#icon-choosefile" class="">
 									</use>
 									<title class="">Replace file</title>
 								</svg>
 								<span>Replace file</span>
-							</div>
+							</label>
 						</div>
 					</div>
 					<div class="sv-action sv-action--hidden" id="sv-file-start-camera">
diff --git a/tests/markup/snapshots/file-mob2-zip-png-ro.snap.html b/tests/markup/snapshots/file-mob2-zip-png-ro.snap.html
index 99c2f019f5..75daf03313 100644
--- a/tests/markup/snapshots/file-mob2-zip-png-ro.snap.html
+++ b/tests/markup/snapshots/file-mob2-zip-png-ro.snap.html
@@ -6,11 +6,47 @@
 				<span class="sv-string-viewer">No file chosen</span>
 			</span>
 			<div class="sd-file__wrapper">
+				<div class="sd-action-bar sd-file__actions-container">
+					<div class="sv-action" id="sv-file-choose-file">
+						<div class="sv-action__content">
+							<label aria-label="Select File" class="sd-context-btn sd-file__choose-btn sd-file__choose-btn--icon" tabindex="0">
+								<svg aria-label="Select File" class="sv-svg-icon" role="img">
+									<use xlink:href="#icon-choosefile" class="">
+									</use>
+									<title class="">Select File</title>
+								</svg>
+								<span>Select File</span>
+							</label>
+						</div>
+					</div>
+					<div class="sv-action sv-action--hidden" id="sv-file-start-camera">
+						<div class="sv-action__content">
+							<button class="sd-context-btn" disabled="" role="button" tabindex="0" title="Take Photo" type="button">
+								<svg aria-label="Take Photo" class="sd-action__icon sv-svg-icon" role="img">
+									<use xlink:href="#icon-takepicture_24x24" class="">
+									</use>
+									<title class="">Take Photo</title>
+								</svg>
+							</button>
+						</div>
+					</div>
+					<div class="sv-action" id="sv-file-clean">
+						<div class="sv-action__content">
+							<button class="sd-context-btn sd-context-btn--negative" disabled="" role="button" tabindex="0" title="Clear" type="button">
+								<svg aria-label="Clear" class="sd-action__icon sv-svg-icon" role="img">
+									<use xlink:href="#icon-clear" class="">
+									</use>
+									<title class="">Clear</title>
+								</svg>
+							</button>
+						</div>
+					</div>
+				</div>
 			</div>
 		</div>
 		<div class="sd-file__list">
 			<span class="sd-file__preview">
-				<div class="sd-file__image-wrapper">
+				<div class="sd-file__image-wrapper sd-file__image-wrapper--default-image">
 					<svg class="sd-file__default-image sv-svg-icon" role="img">
 						<use xlink:href="#icon-defaultfile" class="">
 						</use>
diff --git a/tests/markup/snapshots/file-mob2-zip-png.snap.html b/tests/markup/snapshots/file-mob2-zip-png.snap.html
index 63e95a018b..71fffc80a8 100644
--- a/tests/markup/snapshots/file-mob2-zip-png.snap.html
+++ b/tests/markup/snapshots/file-mob2-zip-png.snap.html
@@ -9,14 +9,14 @@
 				<div class="sd-action-bar sd-file__actions-container">
 					<div class="sv-action" id="sv-file-choose-file">
 						<div class="sv-action__content">
-							<div aria-label="Select File" class="sd-context-btn sd-file__choose-btn sd-file__choose-btn--icon" role="button" tabindex="0">
+							<label aria-label="Select File" class="sd-context-btn sd-file__choose-btn sd-file__choose-btn--icon" tabindex="0">
 								<svg aria-label="Select File" class="sv-svg-icon" role="img">
 									<use xlink:href="#icon-choosefile" class="">
 									</use>
 									<title class="">Select File</title>
 								</svg>
 								<span>Select File</span>
-							</div>
+							</label>
 						</div>
 					</div>
 					<div class="sv-action sv-action--hidden" id="sv-file-start-camera">
@@ -46,7 +46,7 @@
 		</div>
 		<div class="sd-file__list">
 			<span class="sd-file__preview">
-				<div class="sd-file__image-wrapper">
+				<div class="sd-file__image-wrapper sd-file__image-wrapper--default-image">
 					<svg class="sd-file__default-image sv-svg-icon" role="img">
 						<use xlink:href="#icon-defaultfile" class="">
 						</use>
diff --git a/tests/markup/snapshots/file-mob2-zip.snap.html b/tests/markup/snapshots/file-mob2-zip.snap.html
index b8eef83ab7..8e1f855c0b 100644
--- a/tests/markup/snapshots/file-mob2-zip.snap.html
+++ b/tests/markup/snapshots/file-mob2-zip.snap.html
@@ -9,14 +9,14 @@
 				<div class="sd-action-bar sd-file__actions-container">
 					<div class="sv-action" id="sv-file-choose-file">
 						<div class="sv-action__content">
-							<div aria-label="Replace file" class="sd-context-btn sd-file__choose-btn sd-file__choose-btn--icon" role="button" tabindex="0">
+							<label aria-label="Replace file" class="sd-context-btn sd-file__choose-btn sd-file__choose-btn--icon" tabindex="0">
 								<svg aria-label="Replace file" class="sv-svg-icon" role="img">
 									<use xlink:href="#icon-choosefile" class="">
 									</use>
 									<title class="">Replace file</title>
 								</svg>
 								<span>Replace file</span>
-							</div>
+							</label>
 						</div>
 					</div>
 					<div class="sv-action sv-action--hidden" id="sv-file-start-camera">
@@ -46,7 +46,7 @@
 		</div>
 		<div class="sd-file__list">
 			<span class="sd-file__preview">
-				<div class="sd-file__image-wrapper">
+				<div class="sd-file__image-wrapper sd-file__image-wrapper--default-image">
 					<svg class="sd-file__default-image sv-svg-icon" role="img">
 						<use xlink:href="#icon-defaultfile" class="">
 						</use>
diff --git a/tests/markup/snapshots/file-mob2.snap.html b/tests/markup/snapshots/file-mob2.snap.html
index 128be548de..7be98c7ca3 100644
--- a/tests/markup/snapshots/file-mob2.snap.html
+++ b/tests/markup/snapshots/file-mob2.snap.html
@@ -9,14 +9,14 @@
 				<div class="sd-action-bar sd-file__actions-container">
 					<div class="sv-action" id="sv-file-choose-file">
 						<div class="sv-action__content">
-							<div aria-label="Select File" class="sd-action sd-file__choose-btn sd-file__choose-btn--text" role="button" tabindex="0">
+							<label aria-label="Select File" class="sd-action sd-file__choose-btn sd-file__choose-btn--text" tabindex="0">
 								<svg aria-label="Select File" class="sv-svg-icon" role="img">
 									<use xlink:href="#icon-choosefile" class="">
 									</use>
 									<title class="">Select File</title>
 								</svg>
 								<span>Select File</span>
-							</div>
+							</label>
 						</div>
 					</div>
 					<div class="sv-action sv-action--hidden" id="sv-file-start-camera">
diff --git a/tests/markup/snapshots/file-mode-both.snap.html b/tests/markup/snapshots/file-mode-both.snap.html
index 71f05eafc1..27c6908873 100644
--- a/tests/markup/snapshots/file-mode-both.snap.html
+++ b/tests/markup/snapshots/file-mode-both.snap.html
@@ -9,14 +9,14 @@
 				<div class="sd-action-bar sd-file__actions-container">
 					<div class="sv-action" id="sv-file-choose-file">
 						<div class="sv-action__content">
-							<div aria-label="Select File" class="sd-action sd-file__choose-btn sd-file__choose-btn--text" role="button" tabindex="0">
+							<label aria-label="Select File" class="sd-action sd-file__choose-btn sd-file__choose-btn--text" tabindex="0">
 								<svg aria-label="Select File" class="sv-svg-icon" role="img">
 									<use xlink:href="#icon-choosefile" class="">
 									</use>
 									<title class="">Select File</title>
 								</svg>
 								<span>Select File</span>
-							</div>
+							</label>
 						</div>
 					</div>
 					<div class="sv-action" id="sv-file-start-camera">
diff --git a/tests/markup/snapshots/file-mode-camera.snap.html b/tests/markup/snapshots/file-mode-camera.snap.html
index 97346b63fb..ba42bc4b70 100644
--- a/tests/markup/snapshots/file-mode-camera.snap.html
+++ b/tests/markup/snapshots/file-mode-camera.snap.html
@@ -8,14 +8,14 @@
 				<div class="sd-action-bar sd-file__actions-container">
 					<div class="sv-action sv-action--hidden" id="sv-file-choose-file">
 						<div class="sv-action__content">
-							<div aria-label="Select File" class="sd-action sd-file__choose-btn sd-file__choose-btn--text" role="button" tabindex="0">
+							<label aria-label="Select File" class="sd-action sd-file__choose-btn sd-file__choose-btn--text" tabindex="0">
 								<svg aria-label="Select File" class="sv-svg-icon" role="img">
 									<use xlink:href="#icon-choosefile" class="">
 									</use>
 									<title class="">Select File</title>
 								</svg>
 								<span>Select File</span>
-							</div>
+							</label>
 						</div>
 					</div>
 					<div class="sv-action" id="sv-file-start-camera">
diff --git a/tests/markup/snapshots/file-modern-png.snap.html b/tests/markup/snapshots/file-modern-png.snap.html
index ec91cd19e0..f5ee5a9b47 100644
--- a/tests/markup/snapshots/file-modern-png.snap.html
+++ b/tests/markup/snapshots/file-modern-png.snap.html
@@ -6,9 +6,9 @@
 				<span class="sv-string-viewer">Drag and drop a file here or click the button below to select a file to upload.</span>
 			</span>
 			<div class="sv-file__wrapper">
-				<div aria-label="Replace file" class="sv-btn sv-file__choose-btn" role="button" tabindex="0">
+				<label aria-label="Replace file" class="sv-btn sv-file__choose-btn" tabindex="0">
 					<span>Replace file</span>
-				</div>
+				</label>
 			</div>
 		</div>
 		<button class="sv-hidden" type="button">
diff --git a/tests/markup/snapshots/file-modern-zip-png.snap.html b/tests/markup/snapshots/file-modern-zip-png.snap.html
index fe05b001ad..f16f8f0ab8 100644
--- a/tests/markup/snapshots/file-modern-zip-png.snap.html
+++ b/tests/markup/snapshots/file-modern-zip-png.snap.html
@@ -6,9 +6,9 @@
 				<span class="sv-string-viewer">Drag and drop a file here or click the button below to select a file to upload.</span>
 			</span>
 			<div class="sv-file__wrapper">
-				<div aria-label="Select File" class="sv-btn sv-file__choose-btn" role="button" tabindex="0">
+				<label aria-label="Select File" class="sv-btn sv-file__choose-btn" tabindex="0">
 					<span>Select File</span>
-				</div>
+				</label>
 			</div>
 		</div>
 		<button class="sv-hidden" type="button">
diff --git a/tests/markup/snapshots/file-modern-zip.snap.html b/tests/markup/snapshots/file-modern-zip.snap.html
index 64795ddeca..461e81f5ec 100644
--- a/tests/markup/snapshots/file-modern-zip.snap.html
+++ b/tests/markup/snapshots/file-modern-zip.snap.html
@@ -6,9 +6,9 @@
 				<span class="sv-string-viewer">Drag and drop a file here or click the button below to select a file to upload.</span>
 			</span>
 			<div class="sv-file__wrapper">
-				<div aria-label="Replace file" class="sv-btn sv-file__choose-btn" role="button" tabindex="0">
+				<label aria-label="Replace file" class="sv-btn sv-file__choose-btn" tabindex="0">
 					<span>Replace file</span>
-				</div>
+				</label>
 			</div>
 		</div>
 		<button class="sv-hidden" type="button">
diff --git a/tests/markup/snapshots/file-modern.snap.html b/tests/markup/snapshots/file-modern.snap.html
index 55c59adaeb..643977e0ca 100644
--- a/tests/markup/snapshots/file-modern.snap.html
+++ b/tests/markup/snapshots/file-modern.snap.html
@@ -6,9 +6,9 @@
 				<span class="sv-string-viewer">Drag and drop a file here or click the button below to select a file to upload.</span>
 			</span>
 			<div class="sv-file__wrapper">
-				<div aria-label="Select File" class="sv-btn sv-file__choose-btn" role="button" tabindex="0">
+				<label aria-label="Select File" class="sv-btn sv-file__choose-btn" tabindex="0">
 					<span>Select File</span>
-				</div>
+				</label>
 				<span class="sv-description sv-file__no-file-chosen">No file chosen</span>
 			</div>
 		</div>
diff --git a/tests/markup/snapshots/file-png.snap.html b/tests/markup/snapshots/file-png.snap.html
index 7deba0cd41..5b26093f5f 100644
--- a/tests/markup/snapshots/file-png.snap.html
+++ b/tests/markup/snapshots/file-png.snap.html
@@ -6,9 +6,9 @@
 				<span class="sv-string-viewer">Drag and drop a file here or click the button below to select a file to upload.</span>
 			</span>
 			<div>
-				<div aria-label="Replace file" class="sv_q_file_choose_button" role="button" tabindex="0">
+				<label aria-label="Replace file" class="sv_q_file_choose_button" tabindex="0">
 					<span>Replace file</span>
-				</div>
+				</label>
 			</div>
 		</div>
 		<button class="sv_q_file_remove_button" type="button">
diff --git a/tests/markup/snapshots/file-zip-png.snap.html b/tests/markup/snapshots/file-zip-png.snap.html
index 3accb6894f..f255c08a53 100644
--- a/tests/markup/snapshots/file-zip-png.snap.html
+++ b/tests/markup/snapshots/file-zip-png.snap.html
@@ -6,9 +6,9 @@
 				<span class="sv-string-viewer">Drag and drop a file here or click the button below to select a file to upload.</span>
 			</span>
 			<div>
-				<div aria-label="Select File" class="sv_q_file_choose_button" role="button" tabindex="0">
+				<label aria-label="Select File" class="sv_q_file_choose_button" tabindex="0">
 					<span>Select File</span>
-				</div>
+				</label>
 			</div>
 		</div>
 		<button class="sv_q_file_remove_button" type="button">
diff --git a/tests/markup/snapshots/file-zip.snap.html b/tests/markup/snapshots/file-zip.snap.html
index 136bc827d8..c7a1ed94f5 100644
--- a/tests/markup/snapshots/file-zip.snap.html
+++ b/tests/markup/snapshots/file-zip.snap.html
@@ -6,9 +6,9 @@
 				<span class="sv-string-viewer">Drag and drop a file here or click the button below to select a file to upload.</span>
 			</span>
 			<div>
-				<div aria-label="Replace file" class="sv_q_file_choose_button" role="button" tabindex="0">
+				<label aria-label="Replace file" class="sv_q_file_choose_button" tabindex="0">
 					<span>Replace file</span>
-				</div>
+				</label>
 			</div>
 		</div>
 		<button class="sv_q_file_remove_button" type="button">
diff --git a/tests/markup/snapshots/file.snap.html b/tests/markup/snapshots/file.snap.html
index fea6feb9ca..11280f1e86 100644
--- a/tests/markup/snapshots/file.snap.html
+++ b/tests/markup/snapshots/file.snap.html
@@ -6,9 +6,9 @@
 				<span class="sv-string-viewer">Drag and drop a file here or click the button below to select a file to upload.</span>
 			</span>
 			<div>
-				<div aria-label="Select File" class="sv_q_file_choose_button" role="button" tabindex="0">
+				<label aria-label="Select File" class="sv_q_file_choose_button" tabindex="0">
 					<span>Select File</span>
-				</div>
+				</label>
 				<span class="sv_q_file_placeholder">No file chosen</span>
 			</div>
 		</div>
diff --git a/tests/questionFileTests.ts b/tests/questionFileTests.ts
index eb96e9937c..8747ee4a18 100644
--- a/tests/questionFileTests.ts
+++ b/tests/questionFileTests.ts
@@ -1561,6 +1561,28 @@ QUnit.test("Check file question change camera action", function(assert) {
   assert.equal(Camera["cameraFacingMode"], "user");
   Camera.clear();
 });
+QUnit.test("new Camera().getMediaConstraints width and height", function(assert) {
+  Camera.setCameraList(createDevices([{ label: "dfdf" }, { label: "user" }]));
+  let mConst: any = new Camera().getMediaConstraints();
+  assert.strictEqual(mConst.video.width, undefined);
+  assert.strictEqual(mConst.video.height, undefined);
+  mConst = new Camera().getMediaConstraints({ width: 100 });
+  assert.deepEqual(mConst.video.width, { ideal: 100 });
+  assert.strictEqual(mConst.video.height, undefined);
+  mConst = new Camera().getMediaConstraints({ height: 100 });
+  assert.strictEqual(mConst.video.width, undefined);
+  assert.deepEqual(mConst.video.height, { ideal: 100 });
+  mConst = new Camera().getMediaConstraints({ height: 100, width: 200 });
+  assert.deepEqual(mConst.video.width, { ideal: 200 });
+  assert.deepEqual(mConst.video.height, { ideal: 100 });
+  Camera.clear();
+});
+QUnit.test("Camera: check getImageSize method", function(assert) {
+  let imageSize = new Camera().getImageSize({ videoWidth: 100, videoHeight: 200 } as any);
+  assert.deepEqual(imageSize, { width: 100, height: 200 });
+  imageSize = new Camera().getImageSize({ videoWidth: 130, videoHeight: 250 } as any);
+  assert.deepEqual(imageSize, { width: 130, height: 250 });
+});
 QUnit.test("QuestionFile stop playing video on hiding question", function(assert) {
   let survey = new SurveyModel({
     elements: [{ type: "file", name: "q1" }]
@@ -1632,9 +1654,6 @@ QUnit.test("QuestionFile check actions container", function(assert) {
   q1.clearButtonCaption = "clear_test";
   survey.css = defaultV2Css;
   assert.ok(q1.actionsContainerVisible);
-  q1.readOnly = true;
-  assert.notOk(q1.actionsContainerVisible);
-  q1.readOnly = false;
   q1.isUploading = true;
   assert.notOk(q1.actionsContainerVisible);
   q1.isUploading = false;
@@ -1717,6 +1736,59 @@ QUnit.test("QuestionFile check renderedPlaceholder in different modes with desig
   assert.equal(q1.locRenderedPlaceholder.renderedHtml, "both_mod_placeholder");
 });
 
+QUnit.test("QuestionFile actions visibility in design mode", function(assert) {
+  const survey = new SurveyModel();
+  survey.setDesignMode(true);
+  survey.setJsonObject({
+    elements: [
+      { type: "file", name: "q1" },
+    ]
+  });
+  const q1 = <QuestionFileModel>survey.getQuestionByName("q1");
+  const chooseFileAction = q1.actionsContainer.getActionById("sv-file-choose-file");
+  const startCameraAction = q1.actionsContainer.getActionById("sv-file-start-camera");
+  assert.ok(chooseFileAction.visible);
+  assert.notOk(startCameraAction.visible);
+  q1.sourceType = "camera";
+  assert.notOk(chooseFileAction.visible);
+  assert.ok(startCameraAction.visible);
+  q1.sourceType = "file-camera";
+  assert.ok(chooseFileAction.visible);
+  assert.ok(startCameraAction.visible);
+});
+
+QUnit.test("QuestionFile actions are readOnly in design mode", function(assert) {
+  const survey = new SurveyModel();
+  survey.setDesignMode(true);
+  survey.setJsonObject({
+    elements: [
+      { type: "file", name: "q1" },
+    ]
+  });
+  const q1 = <QuestionFileModel>survey.getQuestionByName("q1");
+  const startCameraAction = q1.actionsContainer.getActionById("sv-file-start-camera");
+  const cleanAction = q1.actionsContainer.getActionById("sv-file-clean");
+  assert.notOk(startCameraAction.enabled);
+  assert.notOk(cleanAction.enabled);
+});
+
+QUnit.test("QuestionFile actions in readOnly mode", function(assert) {
+  const survey = new SurveyModel();
+  survey.setJsonObject({
+    elements: [
+      { type: "file", name: "q1" },
+    ]
+  });
+  const q1 = <QuestionFileModel>survey.getQuestionByName("q1");
+  const cleanAction = q1.actionsContainer.getActionById("sv-file-clean");
+  const startCameraAction = q1.actionsContainer.getActionById("sv-file-start-camera");
+  assert.notOk(cleanAction.disabled);
+  assert.notOk(startCameraAction.disabled);
+  q1.readOnly = true;
+  assert.ok(cleanAction.disabled);
+  assert.ok(startCameraAction.disabled);
+});
+
 QUnit.test("QuestionFile check placeholders are serializable", function(assert) {
   const survey = new SurveyModel({
     elements: [
@@ -1770,4 +1842,5 @@ QUnit.test("QuestionFile maxSize error doesnt update question css classes", func
   question["allFilesOk"]([{ size: 4 }]);
   assert.ok(question.cssRoot.includes("root-error"));
   assert.ok(question.cssRoot.includes("root-error-top"));
-});
\ No newline at end of file
+});
+
diff --git a/visualRegressionTests/tests/defaultV2/etalons/file-question-both-mode-answered.png b/visualRegressionTests/tests/defaultV2/etalons/file-question-both-mode-answered.png
index 100837438a..568bf367e9 100644
Binary files a/visualRegressionTests/tests/defaultV2/etalons/file-question-both-mode-answered.png and b/visualRegressionTests/tests/defaultV2/etalons/file-question-both-mode-answered.png differ
diff --git a/visualRegressionTests/tests/defaultV2/etalons/file-question-long-name.png b/visualRegressionTests/tests/defaultV2/etalons/file-question-long-name.png
index 4f4de4b70b..115d29ac03 100644
Binary files a/visualRegressionTests/tests/defaultV2/etalons/file-question-long-name.png and b/visualRegressionTests/tests/defaultV2/etalons/file-question-long-name.png differ
diff --git a/visualRegressionTests/tests/defaultV2/etalons/file-question-multiple-big-images.png b/visualRegressionTests/tests/defaultV2/etalons/file-question-multiple-big-images.png
new file mode 100644
index 0000000000..540ab8cbfc
Binary files /dev/null and b/visualRegressionTests/tests/defaultV2/etalons/file-question-multiple-big-images.png differ
diff --git a/visualRegressionTests/tests/defaultV2/etalons/file-question-multiple-navigator.png b/visualRegressionTests/tests/defaultV2/etalons/file-question-multiple-navigator.png
index 869fe83f41..fa30febf85 100644
Binary files a/visualRegressionTests/tests/defaultV2/etalons/file-question-multiple-navigator.png and b/visualRegressionTests/tests/defaultV2/etalons/file-question-multiple-navigator.png differ
diff --git a/visualRegressionTests/tests/defaultV2/etalons/file-question-multiple-small-images.png b/visualRegressionTests/tests/defaultV2/etalons/file-question-multiple-small-images.png
new file mode 100644
index 0000000000..b73c955478
Binary files /dev/null and b/visualRegressionTests/tests/defaultV2/etalons/file-question-multiple-small-images.png differ
diff --git a/visualRegressionTests/tests/defaultV2/etalons/file-question-multiple.png b/visualRegressionTests/tests/defaultV2/etalons/file-question-multiple.png
index 1ffaefd344..10ead2f955 100644
Binary files a/visualRegressionTests/tests/defaultV2/etalons/file-question-multiple.png and b/visualRegressionTests/tests/defaultV2/etalons/file-question-multiple.png differ
diff --git a/visualRegressionTests/tests/defaultV2/etalons/file-question-single-big-image.png b/visualRegressionTests/tests/defaultV2/etalons/file-question-single-big-image.png
new file mode 100644
index 0000000000..7f897e1ff9
Binary files /dev/null and b/visualRegressionTests/tests/defaultV2/etalons/file-question-single-big-image.png differ
diff --git a/visualRegressionTests/tests/defaultV2/etalons/file-question-single-file.png b/visualRegressionTests/tests/defaultV2/etalons/file-question-single-file.png
index de5dc0659d..9a53a490f2 100644
Binary files a/visualRegressionTests/tests/defaultV2/etalons/file-question-single-file.png and b/visualRegressionTests/tests/defaultV2/etalons/file-question-single-file.png differ
diff --git a/visualRegressionTests/tests/defaultV2/etalons/file-question-single-small-image.png b/visualRegressionTests/tests/defaultV2/etalons/file-question-single-small-image.png
new file mode 100644
index 0000000000..199539712a
Binary files /dev/null and b/visualRegressionTests/tests/defaultV2/etalons/file-question-single-small-image.png differ
diff --git a/visualRegressionTests/tests/defaultV2/etalons/file-question-video.png b/visualRegressionTests/tests/defaultV2/etalons/file-question-video.png
index 0e23783cb7..26131ff1fe 100644
Binary files a/visualRegressionTests/tests/defaultV2/etalons/file-question-video.png and b/visualRegressionTests/tests/defaultV2/etalons/file-question-video.png differ
diff --git a/visualRegressionTests/tests/defaultV2/file.ts b/visualRegressionTests/tests/defaultV2/file.ts
index 728ff3880c..e5b5a27843 100644
--- a/visualRegressionTests/tests/defaultV2/file.ts
+++ b/visualRegressionTests/tests/defaultV2/file.ts
@@ -60,6 +60,45 @@ frameworks.forEach(framework => {
     });
   });
 
+  test("Check file question with imageWidth/height", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(1920, 1080);
+      await ClientFunction(() => {
+        const question = (window as any).survey.getQuestionByName("file_question");
+        question.imageWidth = "100px";
+        question.imageHeight = "100px";
+      })();
+      await t.setFilesToUpload(Selector(".sd-file input"), ["files/SingleImage.jpg"]);
+      const questionRoot = Selector(".sd-question");
+      await takeElementScreenshot("file-question-single-small-image.png", questionRoot, t, comparer);
+
+      await ClientFunction(() => {
+        const question = (window as any).survey.getQuestionByName("file_question");
+        question.imageWidth = "1920px";
+        question.imageHeight = "1080px";
+      })();
+      await takeElementScreenshot("file-question-single-big-image.png", questionRoot, t, comparer);
+
+      await ClientFunction(() => {
+        const question = (window as any).survey.getQuestionByName("file_question");
+        question.allowMultiple = true;
+        question.imageWidth = "50px";
+        question.imageHeight = "50px";
+        question.clear();
+      })();
+      await t.setFilesToUpload(Selector(".sd-file input"), ["files/Badger.png", "files/Bird.png", "files/Flamingo.png"]);
+      await takeElementScreenshot("file-question-multiple-small-images.png", questionRoot, t, comparer);
+
+      await ClientFunction(() => {
+        const question = (window as any).survey.getQuestionByName("file_question");
+        question.allowMultiple = true;
+        question.imageWidth = "1920px";
+        question.imageHeight = "1080px";
+      })();
+      await takeElementScreenshot("file-question-multiple-big-images.png", questionRoot, t, comparer);
+    });
+  });
+
   test("Check file question - long names", async (t) => {
     await wrapVisualTest(t, async (t, comparer) => {
       await t.resizeWindow(1920, 1080);