VKT(Frontend): Hide native file input, render instead button to mimic designs [deploy]

Author: pkoivisto

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

@@ -6,6 +6,7 @@
   width: fit-content;
   border: 1px dashed colors.$color-secondary;
   font-size: 120%;
+  display: none;
 }
 
 .custom-fileupload.file-upload-error input {

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

@@ -1,24 +1,48 @@
-import { ChangeEvent, FC } from 'react';
+import FileUploadIcon from '@mui/icons-material/FileUpload';
+import { Button } from '@mui/material';
+import { ChangeEvent, FC, ReactNode } from 'react';
 import './FileUpload.scss';
+import { Color, Variant } from 'enums';
 
 type FileUploadProps = {
   accept?: string;
   error?: boolean;
   onChange: (files: FileList) => void;
+  labelText: string;
 };
 
-export const FileUpload: FC<FileUploadProps> = ({ accept, onChange, error }) => {
+export const FileUpload: FC<FileUploadProps> = ({
+  accept,
+  onChange,
+  error,
+  labelText,
+}) => {
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     if (event.target.files) {
       onChange(event.target.files);
     }
   };
 
   return (
-    <div className={`custom-fileupload ${error && 'file-upload-error'}`}>
-      <div className="rows gapped">
-        <input accept={accept} type="file" onChange={handleChange} />
-      </div>
+    <div
+      className={
+        error ? 'custom-fileupload file-upload-error' : 'custom-fileupload'
+      }
+    >
+      <Button
+        component="label"
+        variant={Variant.Contained}
+        color={error ? Color.Error : Color.Secondary}
+        startIcon={<FileUploadIcon />}
+      >
+        {labelText}
+        <input
+          id="custom-fileupload"
+          accept={accept}
+          type="file"
+          onChange={handleChange}
+        />
+      </Button>
     </div>
   );
 };

frontend/packages/vkt/public/i18n/fi-FI/public.json

@@ -181,7 +181,8 @@
               "helpText1": "Voit todistaa täyttäväsi perusteen maksuttomaan tutkintoon todistusasiakirjoilla. Opetushallituksen virkailija tarkastaa, täyttävätkö lähettämäsi asiakirjat maksuttomuuden ehdot. ",
               "helpText2": "Voit lisätä enimmillään 10 asiakirjaa. Asiakirja voi olla hyvälaatuinen pdf- tai kuvatiedosto. Liitä kopio alkuperäisestä tutkintotodistuksesta tai korkeakoulun opiskeluoikeudesta todistavasta asiakirjasta. Liitä asiakirjasta myös käännös suomeksi, ruotsiksi tai englanniksi, jos alkuperäisen asiakirjan kieli on muu kuin suomi, ruotsi tai englanti. Nimeä liite selvästi (esim. tutkintotodistus Bachelor.pdf, tutkintotodistus kaannos.pdf, opiskeluoikeus.pdf)",
               "maxAttachmentsReached": "Olet lisännyt jo 10 asiakirjaa. Et voi enää lisätä uusia asiakirjoja.",
-              "title": "Lähetä tutkintotodistus tai opiskelutodistus *"
+              "title": "Lähetä tutkintotodistus tai opiskelutodistus *",
+              "uploadFile": "Lähetä tiedosto"
             }
           },
           "preview": {

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

@@ -131,6 +131,7 @@ const UploadAttachments = ({
             accept="application/pdf,image/jpeg,image/png,image/heic,image/tiff,image/webp"
             onChange={handleFileUpload}
             error={showError}
+            labelText={t('uploadFile')}
           />
         </LoadingProgressIndicator>
       )}