From 37254b51a233485e49b9cdf2331a43d347094df3 Mon Sep 17 00:00:00 2001
From: Pyry Koivisto <pyry.koivisto@mavericks.fi>
Date: Tue, 30 Jul 2024 16:08:49 +0300
Subject: [PATCH] VKT(Frontend): Hide native file input, render instead button
 to mimic designs [deploy]

---
 .../src/components/FileUpload/FileUpload.scss |  1 +
 .../src/components/FileUpload/FileUpload.tsx  | 34 ++++++++++++++++---
 .../vkt/public/i18n/fi-FI/public.json         |  3 +-
 .../steps/EducationDetails.tsx                |  1 +
 4 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/frontend/packages/shared/src/components/FileUpload/FileUpload.scss b/frontend/packages/shared/src/components/FileUpload/FileUpload.scss
index a231a37ff..9cf928bd0 100644
--- a/frontend/packages/shared/src/components/FileUpload/FileUpload.scss
+++ b/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 {
diff --git a/frontend/packages/shared/src/components/FileUpload/FileUpload.tsx b/frontend/packages/shared/src/components/FileUpload/FileUpload.tsx
index fe624fb9a..51069b115 100644
--- a/frontend/packages/shared/src/components/FileUpload/FileUpload.tsx
+++ b/frontend/packages/shared/src/components/FileUpload/FileUpload.tsx
@@ -1,13 +1,22 @@
+import FileUploadIcon from '@mui/icons-material/FileUpload';
+import { Button } from '@mui/material';
 import { ChangeEvent, FC } 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);
@@ -15,10 +24,25 @@ export const FileUpload: FC<FileUploadProps> = ({ accept, onChange, error }) =>
   };
 
   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>
   );
 };
diff --git a/frontend/packages/vkt/public/i18n/fi-FI/public.json b/frontend/packages/vkt/public/i18n/fi-FI/public.json
index 57d292a08..e892ac764 100644
--- a/frontend/packages/vkt/public/i18n/fi-FI/public.json
+++ b/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": {
diff --git a/frontend/packages/vkt/src/components/publicEnrollment/steps/EducationDetails.tsx b/frontend/packages/vkt/src/components/publicEnrollment/steps/EducationDetails.tsx
index b1366cb2e..853fe4855 100644
--- a/frontend/packages/vkt/src/components/publicEnrollment/steps/EducationDetails.tsx
+++ b/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>
       )}