Add supportCamera boolean property into file question #6463

packages/survey-angular-ui/src/questions/file.component.html

@@ -13,6 +13,7 @@
     [attr.multiple]="model.multipleRendered"
     [attr.title]="model.inputTitle"
     [attr.accept]="model.acceptedTypes"
+    [attr.capture]="model.renderCapture"
   />
   <input
     *ngIf="model.isReadOnly"

src/knockout/templates/question-file.html

@@ -1,7 +1,7 @@
 <script type="text/html" id="survey-question-file">
   <div data-bind="css: question.fileRootCss">
       <!-- ko ifnot: question.isInputReadOnly -->
-      <input type="file" tabindex="-1" data-bind="css: question.cssClasses.fileInput, attr: { id: question.inputId, 'aria-required': question.ariaRequired, 'aria-label': question.ariaLabel, 'aria-invalid': question.ariaInvalid, 'aria-describedby': question.ariaDescribedBy, multiple: question.allowMultiple ? 'multiple' : undefined, title: koInputTitle, accept: question.acceptedTypes }, event: { change: question.dochange }">
+      <input type="file" tabindex="-1" data-bind="css: question.cssClasses.fileInput, attr: { id: question.inputId, 'aria-required': question.ariaRequired, 'aria-label': question.ariaLabel, 'aria-invalid': question.ariaInvalid, 'aria-describedby': question.ariaDescribedBy, multiple: question.allowMultiple ? 'multiple' : undefined, title: koInputTitle, accept: question.acceptedTypes, capture: question.renderCapture }, event: { change: question.dochange }">
       <!-- /ko -->
       <!-- ko if: question.isReadOnly -->
       <input type="file" disabled data-bind="css: question.getReadOnlyFileCss(), attr: { id: question.inputId, placeholder: question.title, multiple: question.allowMultiple ? 'multiple' : undefined }" style="color: transparent;"/>

src/question_file.ts

@@ -40,6 +40,7 @@ export class QuestionFileModel extends Question {
 
   @property({ defaultValue: 0 }) indexToShow: number;
   @property({ defaultValue: false }) containsMultiplyFiles: boolean;
+  @property() allowCameraAccess: boolean;
 
   public mobileFileNavigator: ActionContainer = new ActionContainer();
   protected prevFileAction: Action;
@@ -240,6 +241,9 @@ export class QuestionFileModel extends Question {
       }
     );
   }
+  public get renderCapture(): string {
+    return this.allowCameraAccess ? "user" : undefined;
+  }
 
   get multipleRendered() {
     return this.allowMultiple ? "multiple" : undefined;
@@ -608,6 +612,7 @@ Serializer.addClass(
     { name: "correctAnswer", visible: false },
     { name: "validators", visible: false },
     { name: "needConfirmRemoveFile:boolean" },
+    { name: "allowCameraAccess:switch", category: "general" }
   ],
   function () {
     return new QuestionFileModel("");

src/react/reactquestion_file.tsx

@@ -56,6 +56,7 @@ export class SurveyQuestionFile extends SurveyQuestionElementBase {
           multiple={this.question.allowMultiple}
           title={this.question.inputTitle}
           accept={this.question.acceptedTypes}
+          capture={this.question.renderCapture}
         />
     );
     return (

src/vue/file.vue

@@ -14,6 +14,7 @@
       :multiple="question.multipleRendered"
       v-bind:title="question.inputTitle"
       v-bind:accept="question.acceptedTypes"
+      :capture="question.renderCapture"
     />
     <input
       v-if="question.isReadOnly"

tests/markup/etalon_file.ts

@@ -508,6 +508,21 @@ registerMarkupTests(
       ]
     },
     snapshot: "file-image-size",
+  },
+  {
+    name: "Test file question empty (default)",
+    json: {
+      questions: [
+        {
+          name: "name",
+          type: "file",
+          title: "Question title",
+          titleLocation: "hidden",
+          allowCameraAccess: true
+        }
+      ]
+    },
+    snapshot: "file-camera",
   }
   ]
 );

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

@@ -0,0 +1,14 @@
+<div class="sv_q_file">
+	<input aria-invalid="false" aria-label="Question title" aria-required="false" capture="user" class="sv-visuallyhidden" id="testid0i" tabindex="-1" title="Choose file(s)..." type="file">
+	<div>
+		<div class="sv-file__decorator">
+			<span class="sv-hidden">Drag and drop a file here or click the button below and choose a file to upload.</span>
+			<div>
+				<label aria-label="Choose file" class="sv_q_file_choose_button" role="button" tabindex="0">
+					<span>Choose file</span>
+				</label>
+				<span class="sv_q_file_placeholder">No file chosen</span>
+			</div>
+		</div>
+	</div>
+</div>