TPS
/
halkbank_shahsyotag_frontend
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

file sizes handled

This commit is contained in:
VividTruthKeeper 2022-04-17 16:59:57 +05:00
parent b8b27a6c4f
commit 8971b35ae3
4 changed files with 53 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/CardStages/CardStage4.js
View File

@ -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"

23
src/components/CreditStages/CreditStage5.js
View File

@ -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"

1
src/maxFileSize.js Normal file
View File

@ -0,0 +1 @@
export const maxFileSize = 5;

4
src/scss/_global.scss
View File

@ -7,6 +7,10 @@ a {
color: $text-black;
}
.bold {
font-weight: bold;
}
h1,
h2,
h3,