Merge pull request #601 from madeindjs/WF-41

feat(ui): add allow file type for `CoreFileInput` - WF-41

src/ui/src/components/core/input/CoreFileInput.vue

@@ -11,6 +11,7 @@
 					ref="fileEl"
 					type="file"
 					:multiple="allowMultipleFilesFlag"
+					:accept="allowFileTypes"
 					@change="fileChange($event as InputEvent)"
 				/>
 				<div>
@@ -80,6 +81,18 @@ export default {
 				init: "Input Label",
 				type: FieldType.Text,
 			},
+			allowFileTypes: {
+				name: "Allowed file types",
+				type: FieldType.Text,
+				init: [
+					".pdf",
+					".txt",
+					".doc",
+					"application/msword",
+					"application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+				].join(", "),
+				desc: "Provides hints for browsers to select the correct file types. You can specify extensions and MIME types separated by comma, or leave empty to accept any file.",
+			},
 			allowMultipleFiles: {
 				name: "Allow multiple files",
 				default: "no",
@@ -129,6 +142,8 @@ const selectedFiles = computed<SavedFile[]>(() =>
 	Array.isArray(formValue.value) ? formValue.value : [],
 );
 
+const allowFileTypes = computed(() => fields.allowFileTypes?.value ?? "");
+
 const allowMultipleFilesFlag = computed(() => {
 	return fields.allowMultipleFiles.value == "yes" ? true : undefined;
 });