Add markup and vr tests

src/knockout/koquestion_file.ts

@@ -3,8 +3,10 @@ import { Serializer, QuestionFactory, QuestionFileModel, getOriginalEvent } from
 import { QuestionImplementor } from "./koquestion";
 
 class QuestionFileImplementor extends QuestionImplementor {
+  public koRecalc: any;
   constructor(question: QuestionFile) {
     super(question);
+    this.koRecalc = ko.observable(0);
     this.setObservaleObj("koState", ko.observable<string>("empty"));
     this.setObservaleObj(
       "koHasValue",
@@ -20,7 +22,10 @@ class QuestionFileImplementor extends QuestionImplementor {
       })
     );
     this.setObservaleObj("ko", ko.observable<string>());
-    this.setObservaleObj("koInputTitle", ko.observable<string>());
+    this.setObservaleObj("koInputTitle", ko.computed<string>(() => {
+      this.koRecalc();
+      return this.question.inputTitle;
+    }));
     this.setObservaleObj(
       "koChooseFileCss",
       ko.pureComputed(() => {
@@ -63,7 +68,7 @@ export class QuestionFile extends QuestionFileModel {
   private _implementor: QuestionFileImplementor;
   private updateState = (sender: QuestionFileModel, options: any) => {
     this.koState(options.state);
-    this.koInputTitle(this.inputTitle);
+    this._implementor.koRecalc(this._implementor.koRecalc() + 1);
   };
   constructor(name: string) {
     super(name);

src/knockout/templates/question-file.html

@@ -8,11 +8,11 @@
       <!-- /ko -->
       <div data-bind="css: question.cssClasses.dragArea, event: { dragenter: question.ondragenter, dragover: question.ondragover, drop: question.ondrop, dragleave: question.ondragleave }">     
         <div data-bind="css: question.getFileDecoratorCss()">
-          <!-- ko if: question.isUploading -->
+          <!-- ko if: question.showLoadingIndicator -->
           <!-- ko component: { name: "sv-loading-indicator" } -->
           <!-- /ko -->
           <!-- /ko -->
-          <!-- ko ifnot: question.isUploading -->
+          <!-- ko if: question.showChooseButton -->
           <span data-bind="css: question.cssClasses.dragAreaPlaceholder, text: question.renderedPlaceholder"></span>
           <div data-bind="css: question.cssClasses.wrapper">
             <!-- ko ifnot: isReadOnly -->
@@ -31,7 +31,7 @@
         </div>
         <!-- ko template: { name: 'survey-question-file-clean-button', data: {question: question, showRemoveButton: question.showRemoveButton} } --><!-- /ko -->
         <!-- ko if: question.showPreview -->
-        <!-- ko if: question.koHasValue -->
+        <!-- ko if: question.koHasValue && question.allowShowPreview -->
         <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 -->

src/question_file.ts

@@ -283,13 +283,13 @@ export class QuestionFileModel extends Question {
     return this.isUploading && this.isDefaultV2Theme;
   }
   public get allowShowPreview(): boolean {
-    return this.previewValue && this.previewValue.length > 0 && !this.isUploading;
+    return this.previewValue && this.previewValue.length > 0 && !this.showLoadingIndicator;
   }
   get showRemoveButton(): boolean {
-    return !this.isReadOnly && !this.isEmpty() && !this.isUploading && this.cssClasses.removeButton;
+    return !this.isReadOnly && !this.isEmpty() && !this.showLoadingIndicator && this.cssClasses.removeButton;
   }
   get showRemoveButtonBottom(): boolean {
-    return !this.isReadOnly && !this.isEmpty() && !this.isUploading && this.cssClasses.removeButtonBottom;
+    return !this.isReadOnly && !this.isEmpty() && !this.showLoadingIndicator && this.cssClasses.removeButtonBottom;
   }
   defaultImage(data: any) {
     return !this.canPreviewImage(data) && !!this.cssClasses.defaultImage;

src/react/components/loading-indicator.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { SvgIcon } from "./svg-icon/svg-icon";
 
 export class LoadingIndicatorComponent extends React.Component<any, any> {

src/react/reactquestion_file.tsx

@@ -21,12 +21,12 @@ export class SurveyQuestionFile extends SurveyQuestionElementBase {
     var preview = this.renderPreview();
     var fileInput: JSX.Element | null = null;
     var fileDecorator = this.renderFileDecorator();
-    var clearButton = this.renderClearButton(
-      this.question.showRemoveButton as string
-    );
-    var clearButtonBottom = this.renderClearButton(
-      this.question.showRemoveButtonBottom as string
-    );
+    var clearButton = this.question.showRemoveButton ? this.renderClearButton(
+      this.question.cssClasses.removeButton
+    ) : null;
+    var clearButtonBottom = this.question.showRemoveButtonBottom ? this.renderClearButton(
+      this.question.cssClasses.removeButtonBottom
+    ): null;
 
     let mobileFileNavigator = this.question.mobileFileNavigatorVisible?(<SurveyActionBar model = {this.question.mobileFileNavigator}></SurveyActionBar>):null;
     fileInput = (
@@ -97,7 +97,7 @@ export class SurveyQuestionFile extends SurveyQuestionElementBase {
   protected renderChooseButton(): JSX.Element {
     let noFileChosen: JSX.Element | null = null;
     let chooseFile: JSX.Element | null = null;
-    if(!this.question.showChooseButton) return null;
+    if(!this.question.showChooseButton) return null as any;
     chooseFile = this.question.isReadOnly ? null : attachKey2click(
       <label
         role="button"
@@ -127,7 +127,7 @@ export class SurveyQuestionFile extends SurveyQuestionElementBase {
       </>);
   }
   protected renderClearButton(className: string): JSX.Element | null {
-    return className && !this.question.isUploading ? (
+    return !this.question.isUploading ? (
       <button type="button" onClick={this.question.doClean} className={className}>
         <span>{this.question.clearButtonCaption}</span>
         {(!!this.question.cssClasses.removeButtonIconId) ? <SvgIcon iconName={this.question.cssClasses.removeButtonIconId} size={"auto"} title={this.question.clearButtonCaption}></SvgIcon>: null }

tests/markup/etalon_file.ts

@@ -544,6 +544,24 @@ registerMarkupTests(
       ]
     },
     snapshot: "file-camera",
+  },
+  {
+    name: "Test file question empty (default)",
+    json: {
+      questions: [
+        {
+          name: "name",
+          type: "file",
+          title: "Question title",
+          titleLocation: "hidden",
+          allowCameraAccess: true
+        }
+      ]
+    },
+    before: () => StylesManager.applyTheme("defaultV2"),
+    after: () => StylesManager.applyTheme("default"),
+    snapshot: "file-uploading",
+    initSurvey: survey => survey.getAllQuestions()[0].isUploading = true,
   }
   ]
 );

tests/markup/snapshots/file-uploading.snap.html

@@ -0,0 +1,13 @@
+<div class="sd-file sd-file--single">
+  <input aria-invalid="false" aria-label="Question title" aria-required="false" capture="user" class="sd-visuallyhidden" id="testid0i" tabindex="-1" title="Loading..." type="file">
+  <div class="sd-file__drag-area">
+          <div class="sd-file__decorator">
+                  <div class="sd-loading-indicator">
+                          <svg class="sv-svg-icon" role="img">
+                                  <use xlink:href="#icon-loading" class="">
+                                  </use>
+                          </svg>
+                  </div>
+          </div>
+  </div>
+</div>

visualRegressionTests/tests/defaultV2/file.ts

@@ -101,6 +101,20 @@ frameworks.forEach(framework => {
       await takeElementScreenshot("file-question-multiple-mobile-prev.png", questionRoot, t, comparer);
     });
   });
+  test("Check file question uploading", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(1920, 1080);
+      const questionRoot = Selector(".sd-question");
+      await ClientFunction(()=>{
+        const question = (window as any).survey.getQuestionByName("file_question");
+        question.isUploading = true;
+      })();
+      await ClientFunction(() => {
+        (<HTMLElement>document.querySelector(".sd-loading-indicator .sv-svg-icon")).style.animation = "none";
+      })();
+      await takeElementScreenshot("file-uploading.png", questionRoot, t, comparer);
+    });
+  });
 });
 frameworks.forEach(framework => {
   fixture`${framework} ${title} ${theme}`