From 8971b35ae3148d5b684c845bc8ae0036e314c5dc Mon Sep 17 00:00:00 2001
From: VividTruthKeeper <mr.aydogdy02@gmail.com>
Date: Sun, 17 Apr 2022 16:59:57 +0500
Subject: [PATCH] file sizes handled

---
 src/components/CardStages/CardStage4.js     | 31 ++++++++++++++++++---
 src/components/CreditStages/CreditStage5.js | 23 +++++++++++++--
 src/maxFileSize.js                          |  1 +
 src/scss/_global.scss                       |  4 +++
 4 files changed, 53 insertions(+), 6 deletions(-)
 create mode 100644 src/maxFileSize.js

diff --git a/src/components/CardStages/CardStage4.js b/src/components/CardStages/CardStage4.js
index 5165ee6..d1e614a 100644
--- a/src/components/CardStages/CardStage4.js
+++ b/src/components/CardStages/CardStage4.js
@@ -1,6 +1,7 @@
 // IMPORT MODULES
 import React, { useState, useEffect, useContext } from "react";
 import { LanguageContext } from "../../backend/LanguageContext";
+import { maxFileSize } from "../../maxFileSize";
 
 // IMPORT IMAGES
 import remove from "../../icons/remove.svg";
@@ -8,13 +9,17 @@ import next from "../../icons/next.svg";
 import arrow from "../../icons/arrow.svg";
 import next_reverse from "../../icons/next-reverse.svg";
 
-const CardStage4 = ({ setStage, data, setData, req, setReq }) => {
+const CardStage4 = ({ setStage, data, setData, req }) => {
   const { locale } = useContext(LanguageContext);
   const [files, setFiles] = useState(data.file ? data.file : []);
 
   const [btnEnabled, setBtnEnabled] = useState(false);
   const [dropdown, setDropdown] = useState(false);
-  const parser = new DOMParser();
+  const [validSize, setValidSize] = useState(true);
+
+  //    Bytes <=    Megabytes
+  //      |      |||||||||||||||||
+  const maxSize = maxFileSize * 1024 * 1024;
 
   useEffect(() => {
     if (files.length > 0) {
@@ -70,9 +75,16 @@ const CardStage4 = ({ setStage, data, setData, req, setReq }) => {
             <input
               id="file"
               type="file"
+              accept=".jpg, .jpeg, .docx, .doc, .pdf, .png"
               onChange={(e) => {
-                setFiles([...files, e.target.files[0]]);
-                e.target.value = "";
+                if (e.target.files[0].size > maxSize) {
+                  setValidSize(false);
+                  e.target.value = "";
+                } else {
+                  setFiles([...files, e.target.files[0]]);
+                  e.target.value = "";
+                  setValidSize(true);
+                }
               }}
             />
           </div>
@@ -102,6 +114,17 @@ const CardStage4 = ({ setStage, data, setData, req, setReq }) => {
               })
             : null}
         </ul>
+        <p className="alert">
+          {locale === "TKM"
+            ? "Hemme faýllar diňe görkezilen formatda bolmaly: "
+            : "Все файлы должны быть следующих форматов: "}
+          <span className="red">.jpg, .jpeg, .doc, .docx, .pdf, .png</span>
+        </p>
+        <p className={!validSize ? "alert red bold" : "alert"}>
+          {locale === "TKM"
+            ? `Faýlyň ölçegi ${maxFileSize} MB-den geçmeli däl`
+            : `Размер файла не должен превышать ${maxFileSize} МБ`}
+        </p>
         <div className="cu-bottom card-stage-4-bottom">
           <button
             type="button"
diff --git a/src/components/CreditStages/CreditStage5.js b/src/components/CreditStages/CreditStage5.js
index 7f10413..890d94e 100644
--- a/src/components/CreditStages/CreditStage5.js
+++ b/src/components/CreditStages/CreditStage5.js
@@ -1,6 +1,7 @@
 // IMPORT MODULES
 import React, { useState, useEffect, useContext } from "react";
 import { LanguageContext } from "../../backend/LanguageContext";
+import { maxFileSize } from "../../maxFileSize";
 
 // IMPORT IMAGES
 import remove from "../../icons/remove.svg";
@@ -17,6 +18,13 @@ const CreditStage5 = ({ setStage, data, setData, creditData, id }) => {
     rus: "",
     TKM: "",
   });
+
+  const [validSize, setValidSize] = useState(true);
+
+  //    Bytes <=    Megabytes
+  //      |      |||||||||||||||||
+  const maxSize = maxFileSize * 1024 * 1024;
+
   useEffect(() => {
     if (files.length > 0) {
       setBtnEnabled(true);
@@ -94,8 +102,14 @@ const CreditStage5 = ({ setStage, data, setData, creditData, id }) => {
               type="file"
               accept=".jpg, .jpeg, .docx, .doc, .pdf, .png"
               onChange={(e) => {
-                setFiles([...files, e.target.files[0]]);
-                e.target.value = "";
+                if (e.target.files[0].size > maxSize) {
+                  setValidSize(false);
+                  e.target.value = "";
+                } else {
+                  setFiles([...files, e.target.files[0]]);
+                  e.target.value = "";
+                  setValidSize(true);
+                }
               }}
             />
           </div>
@@ -131,6 +145,11 @@ const CreditStage5 = ({ setStage, data, setData, creditData, id }) => {
             : "Все файлы должны быть следующих форматов: "}
           <span className="red">.jpg, .jpeg, .doc, .docx, .pdf, .png</span>
         </p>
+        <p className={!validSize ? "alert red bold" : "alert"}>
+          {locale === "TKM"
+            ? `Faýlyň ölçegi ${maxFileSize} MB-den geçmeli däl`
+            : `Размер файла не должен превышать ${maxFileSize} МБ`}
+        </p>
         <div className="cu-bottom card-stage-4-bottom">
           <button
             type="button"
diff --git a/src/maxFileSize.js b/src/maxFileSize.js
new file mode 100644
index 0000000..04302ea
--- /dev/null
+++ b/src/maxFileSize.js
@@ -0,0 +1 @@
+export const maxFileSize = 5;
diff --git a/src/scss/_global.scss b/src/scss/_global.scss
index 81429e7..938a218 100644
--- a/src/scss/_global.scss
+++ b/src/scss/_global.scss
@@ -7,6 +7,10 @@ a {
   color: $text-black;
 }
 
+.bold {
+  font-weight: bold;
+}
+
 h1,
 h2,
 h3,