add form of loan request and edit form of it and debuging and cleaning uploadsystem
This commit is contained in:
@@ -1,24 +1,56 @@
|
||||
import {Box, Button, TextField, Typography} from "@mui/material";
|
||||
import {Box, Button, FormHelperText, TextField, Typography} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
import Image from "next/image";
|
||||
import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
|
||||
import {useRef} from "react";
|
||||
import {useRef, useState} from "react";
|
||||
|
||||
const UploadSystem = ({
|
||||
selectedImage,
|
||||
setselectedImage,
|
||||
handleUploadChange,
|
||||
fieldname,
|
||||
fieldName,
|
||||
default_image,
|
||||
helperText,
|
||||
error,
|
||||
setFieldValue,
|
||||
imageAlt,
|
||||
imageSize,
|
||||
fileType,
|
||||
fileName,
|
||||
label,
|
||||
enableDelete
|
||||
}) => {
|
||||
const t = useTranslations();
|
||||
const fileInputRef = useRef(null);
|
||||
|
||||
const [selectedImage, setSelectedImage] = useState(default_image || "/images/upload-image.svg");
|
||||
const [fileType, setFileType] = useState(null);
|
||||
const [fileName, setFileName] = useState("");
|
||||
|
||||
// upload files
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setFileType(uploadedFile.type);
|
||||
setFileName(uploadedFile.name);
|
||||
setFieldValue(fieldName, uploadedFile);
|
||||
}
|
||||
};
|
||||
// end upload files
|
||||
|
||||
const uploadBoxStyle = error ? {
|
||||
cursor: "pointer",
|
||||
objectFit: "contain",
|
||||
border: "1px dashed #d32f2f",
|
||||
borderRadius: "5px",
|
||||
padding: "5px",
|
||||
width: '200px',
|
||||
height: '200px'
|
||||
} : {
|
||||
cursor: "pointer",
|
||||
objectFit: "contain",
|
||||
border: "1px dashed #e1e1e1",
|
||||
borderRadius: "5px",
|
||||
padding: "5px",
|
||||
width: '200px',
|
||||
height: '200px'
|
||||
}
|
||||
|
||||
const handleClick = () => {
|
||||
fileInputRef.current.click();
|
||||
};
|
||||
@@ -27,24 +59,13 @@ const UploadSystem = ({
|
||||
setFieldValue(fieldname, null);
|
||||
};
|
||||
|
||||
const isDocumentFormat = (fileType) => {
|
||||
const documentFormats = [
|
||||
"application/pdf",
|
||||
"application/msword",
|
||||
"application/vnd.openxmlformats-officedocument.wordprocessingml.document",
|
||||
"application/vnd.ms-excel",
|
||||
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
|
||||
];
|
||||
return documentFormats.includes(fileType);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={{width: imageSize[0], my: 2}}>
|
||||
<Box sx={{my: 2}}>
|
||||
<Typography
|
||||
margin={2}
|
||||
margin={1}
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
fontSize: "1rem",
|
||||
fontSize: "0.9rem",
|
||||
color: "#a19d9d",
|
||||
}}
|
||||
textAlign="center"
|
||||
@@ -53,64 +74,54 @@ const UploadSystem = ({
|
||||
</Typography>
|
||||
{selectedImage === "/images/upload-image.svg" ? (
|
||||
<Image
|
||||
width={imageSize[0]}
|
||||
height={imageSize[1]}
|
||||
src={selectedImage}
|
||||
priority
|
||||
alt={imageAlt}
|
||||
width={0}
|
||||
height={0}
|
||||
onClick={handleClick}
|
||||
style={{
|
||||
cursor: "pointer",
|
||||
objectFit: "contain",
|
||||
border: "1px dashed #e1e1e1",
|
||||
borderBottom: "unset",
|
||||
padding: "5px",
|
||||
}}
|
||||
style={uploadBoxStyle}
|
||||
/>
|
||||
) : fileType && fileType.startsWith("image/") ? (
|
||||
<Image
|
||||
width={imageSize[0]}
|
||||
height={imageSize[1]}
|
||||
src={selectedImage}
|
||||
priority
|
||||
alt={imageAlt}
|
||||
width={0}
|
||||
height={0}
|
||||
onClick={handleClick}
|
||||
style={{
|
||||
cursor: "pointer",
|
||||
objectFit: "contain",
|
||||
border: "1px dashed #e1e1e1",
|
||||
borderBottom: "unset",
|
||||
padding: "5px",
|
||||
}}
|
||||
style={uploadBoxStyle}
|
||||
/>
|
||||
) : (
|
||||
fileType &&
|
||||
isDocumentFormat(fileType) && (
|
||||
<Box
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
border: "1px dashed #e1e1e1",
|
||||
cursor: "pointer",
|
||||
borderRadius: "5px",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
width: "200px",
|
||||
height: "200px"
|
||||
}}
|
||||
onClick={handleClick}
|
||||
>
|
||||
<Typography
|
||||
margin={2}
|
||||
sx={{
|
||||
width: imageSize[0],
|
||||
height: imageSize[1],
|
||||
fontWeight: 600,
|
||||
fontSize: "1rem",
|
||||
color: "#a19d9d",
|
||||
textAlign: "center",
|
||||
display: "flex",
|
||||
border: "1px dashed #e1e1e1",
|
||||
borderBottom: "unset",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
justifyContent: "end",
|
||||
overflow: "hidden"
|
||||
}}
|
||||
onClick={handleClick}
|
||||
textAlign="center"
|
||||
>
|
||||
<Typography
|
||||
margin={2}
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
fontSize: "1rem",
|
||||
color: "#a19d9d",
|
||||
}}
|
||||
textAlign="center"
|
||||
>
|
||||
{fileName}
|
||||
</Typography>
|
||||
</Box>
|
||||
)
|
||||
{fileName}
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<TextField
|
||||
@@ -118,10 +129,10 @@ const UploadSystem = ({
|
||||
type="file"
|
||||
accept="image/*"
|
||||
style={{display: "none"}}
|
||||
onChange={handleUploadChange}
|
||||
onChange={(e) => handleUploadChange(e)}
|
||||
inputRef={fileInputRef}
|
||||
/>
|
||||
<Button
|
||||
{enableDelete ? <Button
|
||||
sx={{
|
||||
width: "100%",
|
||||
borderTopLeftRadius: "unset",
|
||||
@@ -134,42 +145,10 @@ const UploadSystem = ({
|
||||
onClick={handleDeleteImage}
|
||||
>
|
||||
{t("delete")}
|
||||
</Button>
|
||||
</Button> : ""}
|
||||
<FormHelperText sx={{color: "#d32f2f"}}>{helperText}</FormHelperText>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default UploadSystem;
|
||||
|
||||
|
||||
//////****** usage document ******/////////
|
||||
// 1.) use <UploadSystem /> component inside your page
|
||||
// 2.) list of props that you need to send is down below
|
||||
// 2.1) selectedImage // this value come from useState that you need to write on your own component
|
||||
// 2.2) handleUploadChange // use on your own component (explain below more) you should set it to {(e) =>handleUploadChange[your special name]](e, props.setFieldValue)}
|
||||
// 2.3) setFieldValue // for setting value of file to null when user click on Delete button. you should set it to {props.setFieldValue}
|
||||
// 2.4) fieldname name that file field has on your formik initialValues.
|
||||
// 2.5) fileType // type of your file shows its document image etc...
|
||||
// 2.6) imageAlt // alt of your image.
|
||||
// 2.7) imageSize // this is size of your image box and value type is like that imageSize={ [width , height] }.
|
||||
// 2.9) setselectedImage // for making box empty when user click on delete button (explain below more)
|
||||
|
||||
// const [selectedImage[your special name]], setSelectedImage[your special name]] = useState(
|
||||
// "/images/upload-image.svg" // default image
|
||||
// );
|
||||
// const [fileType[your special name], setFileType[your special name]] = useState(null);
|
||||
// const [fileName[your special name], setFileName[your special name]] = useState(null);
|
||||
|
||||
|
||||
// const handleUploadChange[your special name]] = (event, setFieldValue) => {
|
||||
// const uploadedFile = event.target?.files?.[0];
|
||||
// const fileType = event.target.files[0].type;
|
||||
// const fileName = event.target.files[0].name;
|
||||
// if (uploadedFile) { // just check file is uploaded or not
|
||||
// setSelectedImage[your special name]](URL.createObjectURL(uploadedFile)); // set image value
|
||||
// setFileType[your special name]](fileType); // set fileType
|
||||
// setFileName[your special name]](fileName); // set fileName
|
||||
// setFieldValue("[your special name]]_img", uploadedFile); set field value for sending data (this automaticaly append value in initial state)
|
||||
// }
|
||||
// };
|
||||
//////****** end usage document ******/////////
|
||||
|
||||
Reference in New Issue
Block a user