input file accept changed
This commit is contained in:
Kakabay
parent
71e032d181
commit
06a43d2d1b
|
|
@ -1,13 +1,13 @@
|
|||
// IMPORT MODULES
|
||||
import React, { useState, useEffect, useContext } from "react";
|
||||
import { LanguageContext } from "../../backend/LanguageContext";
|
||||
import { maxFileSize } from "../../maxFileSize";
|
||||
import React, { useState, useEffect, useContext } from 'react';
|
||||
import { LanguageContext } from '../../backend/LanguageContext';
|
||||
import { maxFileSize } from '../../maxFileSize';
|
||||
|
||||
// IMPORT IMAGES
|
||||
import remove from "../../icons/remove.svg";
|
||||
import next from "../../icons/next.svg";
|
||||
import arrow from "../../icons/arrow.svg";
|
||||
import next_reverse from "../../icons/next-reverse.svg";
|
||||
import remove from '../../icons/remove.svg';
|
||||
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 }) => {
|
||||
const { locale } = useContext(LanguageContext);
|
||||
|
|
@ -32,77 +32,71 @@ const CardStage4 = ({ setStage, data, setData, req }) => {
|
|||
<form>
|
||||
<div className="cd-top-4">
|
||||
<h2>
|
||||
{locale === "TKM"
|
||||
? "Kart almak üçin ýüzlenmäni resmileşdirmek üçin talap edilýän resminamalary ýükläň"
|
||||
: locale === "РУС"
|
||||
? "Для оформления заявки на получение карты загрузите требуемые документы."
|
||||
: locale === "ENG"
|
||||
? "To apply for a card, please upload the required documents."
|
||||
: "Kart almak üçin ýüzlenmäni resmileşdirmek üçin talap edilýän resminamalary ýükläň"}
|
||||
{locale === 'TKM'
|
||||
? 'Kart almak üçin ýüzlenmäni resmileşdirmek üçin talap edilýän resminamalary ýükläň'
|
||||
: locale === 'РУС'
|
||||
? 'Для оформления заявки на получение карты загрузите требуемые документы.'
|
||||
: locale === 'ENG'
|
||||
? 'To apply for a card, please upload the required documents.'
|
||||
: 'Kart almak üçin ýüzlenmäni resmileşdirmek üçin talap edilýän resminamalary ýükläň'}
|
||||
</h2>
|
||||
<div
|
||||
className="data-block docs"
|
||||
onClick={() => {
|
||||
setDropdown(!dropdown);
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
<div className="data-title">
|
||||
<h4>
|
||||
{locale === "TKM"
|
||||
? "Talaplar we resminamalar"
|
||||
: locale === "РУС"
|
||||
? "Требования и документы"
|
||||
: locale === "ENG"
|
||||
? "Requirements and documents"
|
||||
: "Talaplar we resminamalar"}
|
||||
{locale === 'TKM'
|
||||
? 'Talaplar we resminamalar'
|
||||
: locale === 'РУС'
|
||||
? 'Требования и документы'
|
||||
: locale === 'ENG'
|
||||
? 'Requirements and documents'
|
||||
: 'Talaplar we resminamalar'}
|
||||
</h4>
|
||||
<div className="data-img">
|
||||
<img src={arrow} alt="arrow" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
dropdown ? "data-dropdown docs active" : "data-dropdown docs"
|
||||
}
|
||||
>
|
||||
<div className={dropdown ? 'data-dropdown docs active' : 'data-dropdown docs'}>
|
||||
<div
|
||||
className="text-block"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html:
|
||||
locale === "TKM"
|
||||
locale === 'TKM'
|
||||
? req.TKM
|
||||
: locale === "РУС"
|
||||
: locale === 'РУС'
|
||||
? req.RUS
|
||||
: locale === "ENG"
|
||||
: locale === 'ENG'
|
||||
? req.ENG
|
||||
: req.TKM,
|
||||
}}
|
||||
></div>
|
||||
}}></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="cd-bottom-4">
|
||||
<div>
|
||||
<label htmlFor="file">
|
||||
{locale === "TKM"
|
||||
? "Faýl ýükläň"
|
||||
: locale === "РУС"
|
||||
? "Загрузить файл"
|
||||
: locale === "ENG"
|
||||
? "Upload a file"
|
||||
: "Faýl ýükläň"}
|
||||
{locale === 'TKM'
|
||||
? 'Faýl ýükläň'
|
||||
: locale === 'РУС'
|
||||
? 'Загрузить файл'
|
||||
: locale === 'ENG'
|
||||
? 'Upload a file'
|
||||
: 'Faýl ýükläň'}
|
||||
</label>
|
||||
<input
|
||||
id="file"
|
||||
type="file"
|
||||
accept=".jpg, .jpeg, .docx, .xls, .xlsx, .doc, .pdf, .png"
|
||||
accept=".jpg, .jpeg, .pdf, .png"
|
||||
onChange={(e) => {
|
||||
if (e.target.files[0].size > maxSize) {
|
||||
setValidSize(false);
|
||||
e.target.value = "";
|
||||
e.target.value = '';
|
||||
} else {
|
||||
setFiles([...files, e.target.files[0]]);
|
||||
e.target.value = "";
|
||||
e.target.value = '';
|
||||
setValidSize(true);
|
||||
}
|
||||
}}
|
||||
|
|
@ -110,7 +104,7 @@ const CardStage4 = ({ setStage, data, setData, req }) => {
|
|||
</div>
|
||||
</div>
|
||||
<ul className="cd-4-files">
|
||||
{files !== []
|
||||
{files
|
||||
? files.map((el, i) => {
|
||||
if (el) {
|
||||
return (
|
||||
|
|
@ -122,10 +116,9 @@ const CardStage4 = ({ setStage, data, setData, req }) => {
|
|||
setFiles(
|
||||
files.filter((file) => {
|
||||
return file !== el;
|
||||
})
|
||||
}),
|
||||
);
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
<img src={remove} alt="remove" />
|
||||
</div>
|
||||
</li>
|
||||
|
|
@ -135,23 +128,21 @@ const CardStage4 = ({ setStage, data, setData, req }) => {
|
|||
: null}
|
||||
</ul>
|
||||
<p className="alert">
|
||||
{locale === "TKM"
|
||||
? "Hemme faýllar diňe görkezilen formatda bolmaly: "
|
||||
: locale === "РУС"
|
||||
? "Все файлы должны быть следующих форматов: "
|
||||
: locale === "ENG"
|
||||
? "All files should be in following types:"
|
||||
: "Hemme faýllar diňe görkezilen formatda bolmaly: "}
|
||||
<span className="red">
|
||||
.jpg, .jpeg, .doc, .docx, .xls, .xlsx, .pdf, .png
|
||||
</span>
|
||||
{locale === 'TKM'
|
||||
? 'Hemme faýllar diňe görkezilen formatda bolmaly: '
|
||||
: locale === 'РУС'
|
||||
? 'Все файлы должны быть следующих форматов: '
|
||||
: locale === 'ENG'
|
||||
? 'All files should be in following types:'
|
||||
: 'Hemme faýllar diňe görkezilen formatda bolmaly: '}
|
||||
<span className="red">.jpg, .jpeg, .pdf, .png</span>
|
||||
</p>
|
||||
<p className={!validSize ? "alert red bold" : "alert"}>
|
||||
{locale === "TKM"
|
||||
<p className={!validSize ? 'alert red bold' : 'alert'}>
|
||||
{locale === 'TKM'
|
||||
? `Faýlyň ölçegi ${maxFileSize} MB-den geçmeli däl`
|
||||
: locale === "РУС"
|
||||
: locale === 'РУС'
|
||||
? `Размер файла не должен превышать ${maxFileSize} МБ`
|
||||
: locale === "ENG"
|
||||
: locale === 'ENG'
|
||||
? `Size of the file should not exceed ${maxFileSize} MB`
|
||||
: `Faýlyň ölçegi ${maxFileSize} MB-den geçmeli däl`}
|
||||
</p>
|
||||
|
|
@ -161,8 +152,7 @@ const CardStage4 = ({ setStage, data, setData, req }) => {
|
|||
className="sign-btn reg-btn"
|
||||
onClick={() => {
|
||||
setStage(3);
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
<div>
|
||||
<div className="btn-img">
|
||||
<img src={next_reverse} alt="logout" />
|
||||
|
|
@ -170,15 +160,14 @@ const CardStage4 = ({ setStage, data, setData, req }) => {
|
|||
<h3
|
||||
onClick={() => {
|
||||
setStage(3);
|
||||
}}
|
||||
>
|
||||
{locale === "TKM"
|
||||
? "Yza"
|
||||
: locale === "РУС"
|
||||
? "Назад"
|
||||
: locale === "ENG"
|
||||
? "Back"
|
||||
: "Yza"}
|
||||
}}>
|
||||
{locale === 'TKM'
|
||||
? 'Yza'
|
||||
: locale === 'РУС'
|
||||
? 'Назад'
|
||||
: locale === 'ENG'
|
||||
? 'Back'
|
||||
: 'Yza'}
|
||||
</h3>
|
||||
</div>
|
||||
</button>
|
||||
|
|
@ -189,17 +178,16 @@ const CardStage4 = ({ setStage, data, setData, req }) => {
|
|||
onClick={() => {
|
||||
setData({ ...data, file: files });
|
||||
setStage(5);
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
<div>
|
||||
<h3>
|
||||
{locale === "TKM"
|
||||
? "Dowam et"
|
||||
: locale === "РУС"
|
||||
? "Продолжить"
|
||||
: locale === "ENG"
|
||||
? "Proceed"
|
||||
: "Dowam et"}
|
||||
{locale === 'TKM'
|
||||
? 'Dowam et'
|
||||
: locale === 'РУС'
|
||||
? 'Продолжить'
|
||||
: locale === 'ENG'
|
||||
? 'Proceed'
|
||||
: 'Dowam et'}
|
||||
</h3>
|
||||
<div className="btn-img">
|
||||
<img src={next} alt="logout" />
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
// IMPORT MODULES
|
||||
import React, { useState, useEffect, useContext } from "react";
|
||||
import { LanguageContext } from "../../backend/LanguageContext";
|
||||
import { maxFileSize } from "../../maxFileSize";
|
||||
import React, { useState, useEffect, useContext } from 'react';
|
||||
import { LanguageContext } from '../../backend/LanguageContext';
|
||||
import { maxFileSize } from '../../maxFileSize';
|
||||
|
||||
// IMPORT IMAGES
|
||||
import remove from "../../icons/remove.svg";
|
||||
import next from "../../icons/next.svg";
|
||||
import arrow from "../../icons/arrow.svg";
|
||||
import next_reverse from "../../icons/next-reverse.svg";
|
||||
import remove from '../../icons/remove.svg';
|
||||
import next from '../../icons/next.svg';
|
||||
import arrow from '../../icons/arrow.svg';
|
||||
import next_reverse from '../../icons/next-reverse.svg';
|
||||
|
||||
const CreditStage5 = ({ setStage, data, setData, creditData, id }) => {
|
||||
const [files, setFiles] = useState(data.file ? data.file : []);
|
||||
|
|
@ -15,9 +15,9 @@ const CreditStage5 = ({ setStage, data, setData, creditData, id }) => {
|
|||
const [btnEnabled, setBtnEnabled] = useState(false);
|
||||
const [dropdown, setDropdown] = useState(false);
|
||||
const [req, setReq] = useState({
|
||||
RUS: "",
|
||||
TKM: "",
|
||||
ENG: "",
|
||||
RUS: '',
|
||||
TKM: '',
|
||||
ENG: '',
|
||||
});
|
||||
|
||||
const [validSize, setValidSize] = useState(true);
|
||||
|
|
@ -41,18 +41,14 @@ const CreditStage5 = ({ setStage, data, setData, creditData, id }) => {
|
|||
setReq({
|
||||
...req,
|
||||
TKM: el.documents,
|
||||
RUS: el.translations.find((els) => els.locale === "ru")
|
||||
? JSON.parse(
|
||||
el.translations.find((els) => els.locale === "ru")
|
||||
.attribute_data
|
||||
).documents
|
||||
: "",
|
||||
ENG: el.translations.find((els) => els.locale === "en")
|
||||
? JSON.parse(
|
||||
el.translations.find((els) => els.locale === "en")
|
||||
.attribute_data
|
||||
).documents
|
||||
: "",
|
||||
RUS: el.translations.find((els) => els.locale === 'ru')
|
||||
? JSON.parse(el.translations.find((els) => els.locale === 'ru').attribute_data)
|
||||
.documents
|
||||
: '',
|
||||
ENG: el.translations.find((els) => els.locale === 'en')
|
||||
? JSON.parse(el.translations.find((els) => els.locale === 'en').attribute_data)
|
||||
.documents
|
||||
: '',
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -63,77 +59,71 @@ const CreditStage5 = ({ setStage, data, setData, creditData, id }) => {
|
|||
<form>
|
||||
<div className="cd-top-4">
|
||||
<h2>
|
||||
{locale === "TKM"
|
||||
? "Karz almak üçin ýüzlenmäni resmileşdirmek üçin talap edilýän resminamalary ýükläň"
|
||||
: locale === "РУС"
|
||||
? "Для оформления заявки на получение кредита загрузите требуемые документы."
|
||||
: locale === "ENG"
|
||||
? "To apply for a loan, please upload the required documents."
|
||||
: "Kart almak üçin ýüzlenmäni resmileşdirmek üçin talap edilýän resminamalary ýükläň"}
|
||||
{locale === 'TKM'
|
||||
? 'Karz almak üçin ýüzlenmäni resmileşdirmek üçin talap edilýän resminamalary ýükläň'
|
||||
: locale === 'РУС'
|
||||
? 'Для оформления заявки на получение кредита загрузите требуемые документы.'
|
||||
: locale === 'ENG'
|
||||
? 'To apply for a loan, please upload the required documents.'
|
||||
: 'Kart almak üçin ýüzlenmäni resmileşdirmek üçin talap edilýän resminamalary ýükläň'}
|
||||
</h2>
|
||||
<div
|
||||
className="data-block docs"
|
||||
onClick={() => {
|
||||
setDropdown(!dropdown);
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
<div className="data-title">
|
||||
<h4>
|
||||
{locale === "TKM"
|
||||
? "Talaplar we resminamalar"
|
||||
: locale === "РУС"
|
||||
? "Требования и документы"
|
||||
: locale === "ENG"
|
||||
? "Requirements and documents"
|
||||
: "Talaplar we resminamalar"}
|
||||
{locale === 'TKM'
|
||||
? 'Talaplar we resminamalar'
|
||||
: locale === 'РУС'
|
||||
? 'Требования и документы'
|
||||
: locale === 'ENG'
|
||||
? 'Requirements and documents'
|
||||
: 'Talaplar we resminamalar'}
|
||||
</h4>
|
||||
<div className="data-img">
|
||||
<img src={arrow} alt="arrow" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
dropdown ? "data-dropdown docs active" : "data-dropdown docs"
|
||||
}
|
||||
>
|
||||
<div className={dropdown ? 'data-dropdown docs active' : 'data-dropdown docs'}>
|
||||
<div
|
||||
className="text-block"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html:
|
||||
locale === "TKM"
|
||||
locale === 'TKM'
|
||||
? req.TKM
|
||||
: locale === "РУС"
|
||||
: locale === 'РУС'
|
||||
? req.RUS
|
||||
: locale === "ENG"
|
||||
: locale === 'ENG'
|
||||
? req.ENG
|
||||
: req.TKM,
|
||||
}}
|
||||
></div>
|
||||
}}></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="cd-bottom-4">
|
||||
<div>
|
||||
<label htmlFor="file">
|
||||
{locale === "TKM"
|
||||
? "Faýl ýükläň"
|
||||
: locale === "РУС"
|
||||
? "Загрузить файл"
|
||||
: locale === "ENG"
|
||||
? "Upload a file"
|
||||
: "Faýl ýükläň"}
|
||||
{locale === 'TKM'
|
||||
? 'Faýl ýükläň'
|
||||
: locale === 'РУС'
|
||||
? 'Загрузить файл'
|
||||
: locale === 'ENG'
|
||||
? 'Upload a file'
|
||||
: 'Faýl ýükläň'}
|
||||
</label>
|
||||
<input
|
||||
id="file"
|
||||
type="file"
|
||||
accept=".jpg, .jpeg, .docx, .xls, .xlsx, .doc, .pdf, .png"
|
||||
accept=".jpg, .jpeg, .pdf, .png"
|
||||
onChange={(e) => {
|
||||
if (e.target.files[0].size > maxSize) {
|
||||
setValidSize(false);
|
||||
e.target.value = "";
|
||||
e.target.value = '';
|
||||
} else {
|
||||
setFiles([...files, e.target.files[0]]);
|
||||
e.target.value = "";
|
||||
e.target.value = '';
|
||||
setValidSize(true);
|
||||
}
|
||||
}}
|
||||
|
|
@ -141,7 +131,7 @@ const CreditStage5 = ({ setStage, data, setData, creditData, id }) => {
|
|||
</div>
|
||||
</div>
|
||||
<ul className="cd-4-files">
|
||||
{files !== []
|
||||
{files
|
||||
? files.map((el, i) => {
|
||||
if (el) {
|
||||
return (
|
||||
|
|
@ -153,10 +143,9 @@ const CreditStage5 = ({ setStage, data, setData, creditData, id }) => {
|
|||
setFiles(
|
||||
files.filter((file) => {
|
||||
return file !== el;
|
||||
})
|
||||
}),
|
||||
);
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
<img src={remove} alt="remove" />
|
||||
</div>
|
||||
</li>
|
||||
|
|
@ -166,23 +155,21 @@ const CreditStage5 = ({ setStage, data, setData, creditData, id }) => {
|
|||
: null}
|
||||
</ul>
|
||||
<p className="alert">
|
||||
{locale === "TKM"
|
||||
? "Hemme faýllar diňe görkezilen formatda bolmaly: "
|
||||
: locale === "РУС"
|
||||
? "Все файлы должны быть следующих форматов: "
|
||||
: locale === "ENG"
|
||||
? "All files should be in following types:"
|
||||
: "Hemme faýllar diňe görkezilen formatda bolmaly: "}
|
||||
<span className="red">
|
||||
.jpg, .jpeg, .doc, .docx, .xls, .xlsx, .pdf, .png
|
||||
</span>
|
||||
{locale === 'TKM'
|
||||
? 'Hemme faýllar diňe görkezilen formatda bolmaly: '
|
||||
: locale === 'РУС'
|
||||
? 'Все файлы должны быть следующих форматов: '
|
||||
: locale === 'ENG'
|
||||
? 'All files should be in following types:'
|
||||
: 'Hemme faýllar diňe görkezilen formatda bolmaly: '}
|
||||
<span className="red">.jpg, .jpeg, .pdf, .png</span>
|
||||
</p>
|
||||
<p className={!validSize ? "alert red bold" : "alert"}>
|
||||
{locale === "TKM"
|
||||
<p className={!validSize ? 'alert red bold' : 'alert'}>
|
||||
{locale === 'TKM'
|
||||
? `Faýlyň ölçegi ${maxFileSize} MB-den geçmeli däl`
|
||||
: locale === "РУС"
|
||||
: locale === 'РУС'
|
||||
? `Размер файла не должен превышать ${maxFileSize} МБ`
|
||||
: locale === "ENG"
|
||||
: locale === 'ENG'
|
||||
? `Size of the file should not exceed ${maxFileSize} MB`
|
||||
: `Faýlyň ölçegi ${maxFileSize} MB-den geçmeli däl`}
|
||||
</p>
|
||||
|
|
@ -192,8 +179,7 @@ const CreditStage5 = ({ setStage, data, setData, creditData, id }) => {
|
|||
className="sign-btn reg-btn"
|
||||
onClick={() => {
|
||||
setStage(4);
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
<div>
|
||||
<div className="btn-img">
|
||||
<img src={next_reverse} alt="logout" />
|
||||
|
|
@ -201,15 +187,14 @@ const CreditStage5 = ({ setStage, data, setData, creditData, id }) => {
|
|||
<h3
|
||||
onClick={() => {
|
||||
setStage(4);
|
||||
}}
|
||||
>
|
||||
{locale === "TKM"
|
||||
? "Yza"
|
||||
: locale === "РУС"
|
||||
? "Назад"
|
||||
: locale === "ENG"
|
||||
? "Back"
|
||||
: "Yza"}
|
||||
}}>
|
||||
{locale === 'TKM'
|
||||
? 'Yza'
|
||||
: locale === 'РУС'
|
||||
? 'Назад'
|
||||
: locale === 'ENG'
|
||||
? 'Back'
|
||||
: 'Yza'}
|
||||
</h3>
|
||||
</div>
|
||||
</button>
|
||||
|
|
@ -220,17 +205,16 @@ const CreditStage5 = ({ setStage, data, setData, creditData, id }) => {
|
|||
onClick={() => {
|
||||
setData({ ...data, file: files });
|
||||
setStage(6);
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
<div>
|
||||
<h3>
|
||||
{locale === "TKM"
|
||||
? "Dowam et"
|
||||
: locale === "РУС"
|
||||
? "Продолжить"
|
||||
: locale === "ENG"
|
||||
? "Proceed"
|
||||
: "Dowam et"}
|
||||
{locale === 'TKM'
|
||||
? 'Dowam et'
|
||||
: locale === 'РУС'
|
||||
? 'Продолжить'
|
||||
: locale === 'ENG'
|
||||
? 'Proceed'
|
||||
: 'Dowam et'}
|
||||
</h3>
|
||||
<div className="btn-img">
|
||||
<img src={next} alt="logout" />
|
||||
|
|
|
|||
Loading…
Reference in New Issue