feature: allow accept attribute to be configurable for file upload fields (#1293)

Author: jenbutongit

model/src/components/types.ts

@@ -232,6 +232,7 @@ export interface FileUploadFieldComponent {
     exposeToContext?: boolean;
     imageQualityPlayback?: boolean;
     disableChangingFromSummary?: boolean;
+    accept?: string;
   };
   schema: {};
 }

runner/src/server/plugins/engine/components/FileUploadField.ts

@@ -6,8 +6,16 @@ import { FileUploadFieldComponent } from "@xgovformbuilder/model";
 import { FormModel } from "server/plugins/engine/models";
 import joi, { Schema } from "joi";
 
+type FileUploadAttributes = {
+  accept: string;
+  multiple?: string;
+};
+
 export class FileUploadField extends FormComponent {
   dataType = "file" as DataType;
+  attributes: FileUploadAttributes = {
+    accept: "image/jpeg,image/gif,image/png,application/pdf",
+  };
 
   constructor(def: FileUploadFieldComponent, model: FormModel) {
     super(def, model);
@@ -20,6 +28,14 @@ export class FileUploadField extends FormComponent {
       componentSchema = componentSchema.allow("").allow(null);
     }
 
+    if (options.multiple) {
+      this.attributes.multiple = "multiple";
+    }
+
+    if (options.accept) {
+      this.attributes.accept = options.accept;
+    }
+
     componentSchema = componentSchema.messages({
       "string.empty": "Upload {{#label}}",
     });
@@ -40,12 +56,6 @@ export class FileUploadField extends FormComponent {
     return { [this.name]: this.schema as Schema };
   }
 
-  get attributes() {
-    return {
-      accept: "image/jpeg,image/gif,image/png,application/pdf",
-    };
-  }
-
   getViewModel(formData: FormData, errors: FormSubmissionErrors) {
     const { options } = this;
     const viewModel: ViewModel = {