resolve #6685 File Question on Smaller Screens - The navigation bar d…

…oesn't appear when the survey.onDownloadFile event is used (#6705)

Co-authored-by: OlgaLarina <olga.larina.dev@gmail.com>

src/question_file.ts

@@ -90,6 +90,11 @@ export class QuestionFileModel extends Question {
   private getFileIndexCaption(): string {
     return this.getLocalizationFormatString("indexText", this.indexToShow + 1, this.previewValue.length);
   }
+  private previewValueChanged() {
+    this.indexToShow = this.previewValue.length > 0 ? (this.indexToShow > 0 ? this.indexToShow - 1 : 0) : 0;
+    this.fileIndexAction.title = this.getFileIndexCaption();
+    this.containsMultiplyFiles = this.previewValue.length > 1;
+  }
 
   public isPreviewVisible(index: number) {
     return !this.isMobile || index === this.indexToShow;
@@ -383,16 +388,15 @@ export class QuestionFileModel extends Question {
           loaded.forEach((val) => {
             this.previewValue.push(val);
           });
+          this.previewValueChanged();
         }
         this.isReady = true;
         this._previewLoader.dispose();
         this._previewLoader = undefined;
       });
       this._previewLoader.load(newValues);
     }
-    this.indexToShow = this.previewValue.length > 0 ? (this.indexToShow > 0 ? this.indexToShow - 1 : 0) : 0;
-    this.fileIndexAction.title = this.getFileIndexCaption();
-    this.containsMultiplyFiles = this.previewValue.length > 1;
+    this.previewValueChanged();
   }
   protected onCheckForErrors(
     errors: Array<SurveyError>,

tests/questionFileTests.ts

@@ -1184,4 +1184,47 @@ QUnit.test("Check previewValue order is correct", (assert) => {
     assert.deepEqual(question.previewValue.map(val => val.name), ["f1", "f2", "f3"]);
     done();
   }, 100);
+});
+
+QUnit.test("File Question on Smaller Screens: navigation bar doesn't appear when the survey.onDownloadFile event is used", (assert) => {
+  const json = {
+    showPreviewBeforeComplete: "showAnsweredQuestions",
+    elements: [
+      {
+        type: "file",
+        name: "file",
+        storeDataAsText: false
+      }
+    ]
+  };
+  const survey = new SurveyModel(json);
+  const question = <QuestionFileModel>survey.getAllQuestions()[0];
+  question.isMobile = true;
+  assert.equal(question.indexToShow, 0);
+  assert.equal(question["fileIndexAction"].title, "1 of 0");
+  assert.equal(question.containsMultiplyFiles, false);
+  assert.equal(question.mobileFileNavigatorVisible, false);
+
+  survey.onDownloadFile.add(function (survey, options) {
+    const timers = {
+      f2: 10,
+      f3: 20,
+      f1: 30
+    };
+    setTimeout(() => {
+      options.callback("success", "");
+    }, timers[options.fileValue.name]);
+  });
+  survey.data = {
+    file: [{ name: "f1", content: "data" }, { name: "f2", content: "data" }, { name: "f3", content: "data" }],
+  };
+  const done = assert.async();
+  setTimeout(() => {
+    assert.deepEqual(question.previewValue.map(val => val.name), ["f1", "f2", "f3"]);
+    assert.equal(question.indexToShow, 0);
+    assert.equal(question["fileIndexAction"].title, "1 of 3");
+    assert.equal(question.containsMultiplyFiles, true);
+    assert.equal(question.mobileFileNavigatorVisible, true);
+    done();
+  }, 100);
 });