From 135301aed14d61148dda9d66dd62611bbf070598 Mon Sep 17 00:00:00 2001
From: Bsandor453 <32219422+Bsandor453@users.noreply.github.com>
Date: Tue, 26 Feb 2019 00:11:10 +0100
Subject: [PATCH] Add front-end validation for file type and size

---
 src/components/forms/AddSolutionForm.js | 25 ++++++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/components/forms/AddSolutionForm.js b/src/components/forms/AddSolutionForm.js
index ce4ec71..58dd280 100644
--- a/src/components/forms/AddSolutionForm.js
+++ b/src/components/forms/AddSolutionForm.js
@@ -6,6 +6,15 @@ import './Forms.css';
 import ConfirmModal from '../forms/ConfirmModal';
 import { emptyMessage } from '../pages/Homework';
 
+const allowedFileTypes = [
+  'image/jpeg',
+  'image/png',
+  'application/x-zip-compressed',
+];
+
+//in megabytes
+const maxFileSize = 50;
+
 class AddSolutionForm extends Component {
   constructor(props) {
     super(props);
@@ -23,7 +32,7 @@ class AddSolutionForm extends Component {
     const accepted = false;
     const sentences = this.props.taskdesc.split('\n');
     const note = '';
-    const disabledText = 'A határidő lejárt, további beadás nem lehetséges.'
+    const disabledText = 'A határidő lejárt, további beadás nem lehetséges.';
     return (
       <Modal
         open={this.state.showModal}
@@ -65,7 +74,7 @@ class AddSolutionForm extends Component {
                 placeholder='Add meg a megoldĂĄs leĂ­rĂĄsĂĄt...'
               />
               <Form.Field>
-                <label>FĂĄjl:</label>
+                <label>FĂĄjl (Megengedett fĂĄjltĂ­pusok: png, jpeg, jpg, zip. Maximum 50 MB.):</label>
                 <Input type='file' onChange={e => this.props.writeSolutionFile(e)} />
               </Form.Field>
             </Form>
@@ -86,7 +95,16 @@ class AddSolutionForm extends Component {
             ?
               <ConfirmModal
                 button={
-                  <Button disabled={(name === '' || description === '')} inverted color='green'>
+                  <Button
+                    disabled={
+                      name === '' ||
+                      description === '' ||
+                      !allowedFileTypes.includes(file.type) ||
+                      file.size > (maxFileSize) * (1024 ** 2)
+                    }
+                    inverted
+                    color='green'
+                  >
                     <Icon name='checkmark' /> BeadĂĄs
                   </Button>
                     }
@@ -95,6 +113,7 @@ class AddSolutionForm extends Component {
                   this.props.addSolution({
                     task, accepted, corrected, note, name, description, file,
                     });
+                  console.log(file);
                   this.setState({ showModal: false });
                   this.props.clearWrite();
                   }
-- 
GitLab