SHARED:VKT(Frontend): Pass accepted filetypes as prop to FileUpload, use actual upload logic

Author: pkoivisto

frontend/packages/shared/src/components/FileUpload/FileUpload.tsx

@@ -2,10 +2,11 @@ import { ChangeEvent, FC } from 'react';
 import './FileUpload.scss';
 
 type FileUploadProps = {
+  accept?: string;
   onChange: (files: FileList) => void;
 };
 
-export const FileUpload: FC<FileUploadProps> = ({ onChange }) => {
+export const FileUpload: FC<FileUploadProps> = ({ accept, onChange }) => {
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     if (event.target.files) {
       onChange(event.target.files);
@@ -15,7 +16,7 @@ export const FileUpload: FC<FileUploadProps> = ({ onChange }) => {
   return (
     <div className="custom-fileupload">
       <div className="rows gapped">
-        <input type="file" onChange={handleChange} />
+        <input accept={accept} type="file" onChange={handleChange} />
       </div>
     </div>
   );

frontend/packages/vkt/src/components/publicEnrollment/steps/EducationDetails.tsx

@@ -7,6 +7,10 @@ import {
 import { FileUpload, H2, Text } from 'shared/components';
 
 import { usePublicTranslation } from 'configs/i18n';
+import { useAppDispatch, useAppSelector } from 'configs/redux';
+import { PublicExamEvent } from 'interfaces/publicExamEvent';
+import { startFileUpload } from 'redux/reducers/publicFileUpload';
+import { publicEnrollmentSelector } from 'redux/selectors/publicEnrollment';
 
 export const EducationDetails = ({
   handleChange,
@@ -17,11 +21,19 @@ export const EducationDetails = ({
     keyPrefix: 'vkt.component.publicEnrollment.steps.educationDetails',
   });
 
+  const { id } = useAppSelector(publicEnrollmentSelector)
+    .examEvent as PublicExamEvent;
+  const dispatch = useAppDispatch();
+
   const handleRadioChange = () => {
     handleChange(true);
   };
 
-  const handleFileUpload = (_files: FileList) => {};
+  const handleFileUpload = (files: FileList) => {
+    if (files.length > 0) {
+      dispatch(startFileUpload({ file: files[0], examEventId: id }));
+    }
+  };
 
   return (
     <div className="margin-top-lg rows gapped">
@@ -61,7 +73,10 @@ export const EducationDetails = ({
           </RadioGroup>
         </FormControl>
       </fieldset>
-      <FileUpload onChange={handleFileUpload} />
+      <FileUpload
+        accept="application/pdf,image/jpeg,image/png"
+        onChange={handleFileUpload}
+      />
     </div>
   );
 };

frontend/packages/vkt/src/redux/selectors/publicEnrollment.ts

@@ -1,4 +1,6 @@
 import { RootState } from 'configs/redux';
+import { PublicEnrollmentState } from 'redux/reducers/publicEnrollment';
 
-export const publicEnrollmentSelector = (state: RootState) =>
-  state.publicEnrollment;
+export const publicEnrollmentSelector = (
+  state: RootState,
+): PublicEnrollmentState => state.publicEnrollment;