Translation for "Take Photo" button is not being used fix #7350 (#7353)

src/question_file.ts

@@ -76,7 +76,7 @@ export class QuestionFileModel extends Question {
   public chooseFileAction: Action;
   public startCameraAction: Action;
   public cleanAction: Action;
-  public actionsContainer: ActionContainer = new ActionContainer();
+  public actionsContainer: ActionContainer;
 
   get fileNavigatorVisible(): boolean {
     const isUploading = this.isUploading;
@@ -98,6 +98,9 @@ export class QuestionFileModel extends Question {
 
   constructor(name: string) {
     super(name);
+    this.createLocalizableString("takePhotoCaption", this, false, true);
+    this.actionsContainer = new ActionContainer();
+    this.actionsContainer.locOwner = this;
     this.fileIndexAction = new Action({
       id: "fileIndex",
       title: this.getFileIndexCaption(),
@@ -124,7 +127,7 @@ export class QuestionFileModel extends Question {
       id: "sv-file-take-picture",
       iconSize: "auto",
       innerCss: <string>(new ComputedUpdater<string>(() => new CssClassBuilder().append(this.cssClasses.contextButton).append(this.cssClasses.takePictureButton).toString()) as any),
-      title: <string>(new ComputedUpdater<string>(() => this.takePhotoCaption) as any),
+      locTitle: this.locTakePhotoCaption,
       showTitle: false,
       action: () => {
         this.snapPicture();
@@ -160,7 +163,7 @@ export class QuestionFileModel extends Question {
       iconName: "icon-takepicture_24x24",
       id: "sv-file-start-camera",
       iconSize: "auto",
-      title: <string>(new ComputedUpdater<string>(() => this.takePhotoCaption) as any),
+      locTitle: this.locTakePhotoCaption,
       showTitle: <boolean>(new ComputedUpdater<boolean>(() => !this.isAnswered) as any),
       enabledIf: () => !this.isInputReadOnly,
       action: () => {
@@ -412,7 +415,9 @@ 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: "takePhotoCaption" } }) takePhotoCaption: string;
+  public get takePhotoCaption(): string { return this.getLocalizableStringText("takePhotoCaption"); }
+  public set takePhotoCaption(val: string) { this.setLocalizableStringText("takePhotoCaption", val); }
+  public get locTakePhotoCaption(): LocalizableString { return this.getLocalizableString("takePhotoCaption"); }
   @property({ localizable: { defaultStr: "replaceFileCaption" } }) replaceButtonCaption: string;
   @property({ localizable: { defaultStr: "clearCaption" } }) clearButtonCaption: string;
   @property({ localizable: { defaultStr: "removeFileCaption" } }) removeFileCaption: string;

tests/questionFileTests.ts

@@ -7,6 +7,7 @@ import { StylesManager } from "../src/stylesmanager";
 import { Serializer } from "../src/jsonobject";
 import { Camera } from "../src/utils/camera";
 import { defaultV2Css } from "../src/defaultCss/defaultV2Css";
+export * from "../src/localization/german";
 export default QUnit.module("Survey_QuestionFile");
 
 QUnit.test("QuestionFile value initialization strings", function(assert) {
@@ -1846,3 +1847,15 @@ QUnit.test("QuestionFile maxSize error doesnt update question css classes", func
   assert.ok(question.cssRoot.includes("root-error-top"));
 });
 
+QUnit.test("Acton takePhoto should be serialiazed", function (assert) {
+  const survey = new SurveyModel({
+    elements: [
+      { type: "file", name: "q1", maxSize: 3 },
+    ]
+  });
+  const question = <QuestionFileModel>survey.getAllQuestions()[0];
+  const action = question.takePictureAction;
+  assert.equal(action.title, "Take Photo", "en");
+  survey.locale = "de";
+  assert.equal(action.title, "Foto machen", "de");
+});