FrontEnd Code :-
Output Image
Folder Structure :-
App.js Code :-
import React from 'react'
import { useState } from 'react'
import { Box, Grid, Typography } from "@mui/material";
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
import Avatar from '@mui/material/Avatar';
import TextField from '@mui/material/TextField';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import Select from '@mui/material/Select';
import Radio from '@mui/material/Radio';
import RadioGroup from '@mui/material/RadioGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import FormControl from '@mui/material/FormControl';
import FormLabel from '@mui/material/FormLabel';
import Checkbox from '@mui/material/Checkbox';
import FormGroup from '@mui/material/FormGroup';
import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';
import MuiAlert from '@mui/material/Alert';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import Snackbar from '@mui/material/Snackbar';
import IconButton from '@mui/material/IconButton';
import CloseIcon from '@mui/icons-material/Close';
function App() {
// eslint-disable-next-line
const [name, setName] = useState("");
// eslint-disable-next-line
const [email, setEmail] = useState("");
// eslint-disable-next-line
const [gender, setGender] = useState("");
const [loc, setLoc] = useState([]);
const getLocation = async (e) => {
const { checked, value } = e.target;
console.log("1loc", loc);
if (checked) {
await setLoc((item) => [...item, value]);
} else {
await setLoc(loc.filter((e) => e !== value));
}
console.log("2loc", loc);
}
const [error, setError] = useState({
status: false,
color: "",
msg: ""
})
const [pimage, setpimage] = useState("");
const handlepimage = (e) => {
setpimage(e.target.files[0])
}
const [rdoc, setrdoc] = useState("");
const [date, setDate] = useState(null);
const handleDate = (newValue) => {
setDate(newValue);
};
const [state, setState] = React.useState('');
const handlestate = (event) => {
setState(event.target.value);
};
const handleSubmit = (e) => {
e.preventDefault();
const form = new FormData();
form.append("name", name);
form.append("email", email);
form.append("date", date);
form.append("state", state);
form.append("gender", gender);
form.append("pjl", loc);
form.append("pimage", pimage);
form.append("rdoc", rdoc);
if (name && email && date && state && gender && loc && pimage && rdoc) {
setError({
status: true,
color: "success",
msg: "Form Submitted Successfully"
})
setOpen(true);
clearForm()
} else {
console.log(`name: ${form.get("name")}, email:- ${form.get("email")}, date:- ${form.get("date")}, state:- ${form.get("state")}, gender:- ${form.get("gender")}, location:- ${form.get("pjl")}, image:
- ${form.get("pimage")}, doc:- ${form.get("rdoc")}`)
console.log(form.get("pimage"));
setError({
status: true,
color: "error",
msg: "All Fields are Required"
})
setOpen(true);
}
};
const [open, setOpen] = React.useState(false);
const handleClose = (event, reason) => {
if (reason === 'clickaway') {
return;
}
setOpen(false);
};
// eslint-disable-next-line
const action = (
<React.Fragment>
<IconButton
size="small"
aria-label="close"
color="inherit"
onClick={handleClose}
>
<CloseIcon fontSize="small" />
</IconButton>
</React.Fragment>
);
const Alert = React.forwardRef(function Alert(props, ref) {
return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
});
const clearForm = () => {
setName("");
setEmail("");
setDate(null);
setGender("");
setLoc([]);
setpimage("");
setrdoc("");
setState("");
document.getElementById("resume-form").reset();
}
const vertical = "bottom";
const horizontal = "right";
return (
<>
{/* Mui snackbar */}
<Snackbar open={open} anchorOrigin={{ vertical, horizontal }} autoHideDuration={7000} onClose={handleClose} key="bottomright">
<Alert onClose={handleClose} severity={error.color} sx={{ width: '100%' }}>
{error.msg}
</Alert>
</Snackbar>
<Box display="flex" justifyContent="center" sx={{ backgroundColor: "error.light", textAlign: "center" }}>
<Typography variant="h3" component="div" sx={{ fontWeight: "bold", color: "white" }}> Resume Uploader </Typography>
</Box>
<Grid container justifyContent='center'>
<Grid item xs={12} md={5}>
<Box component="form" noValidate id="resume-form" sx={{ p: 3 }} onSubmit={handleSubmit}>
<TextField id="name" label="Name" autoFocus variant="outlined" name="name" margin="normal" required fullWidth value={name} onChange={(e) => setName(e.target.value)} />
<TextField id="email" value={email} label="Email" variant="outlined" name="email" required fullWidth onChange={(e) => setEmail(e.target.value)} />
{/* Date time picker */}
<Box mt={2}>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DateTimePicker
label="Date&Time picker"
// inputFormat="dd/mm/yyyy hh:mm a|pm"
value={date}
onChange={handleDate}
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider>
</Box>
{/* Select State Component */}
<FormControl fullWidth margin='normal'>
<InputLabel id="demo-simple-select-label">State</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={state}
label="Age"
onChange={handlestate}
>
<MenuItem value="Gujarat">Gujarat</MenuItem>
<MenuItem value="Rajkot">Rajkot</MenuItem>
<MenuItem value="Bangladesh">Bangladesh</MenuItem>
</Select>
</FormControl>
{/* Gender Component */}
<FormControl fullWidth margin='normal'>
<FormLabel id="demo-row-radio-buttons-group-label">Gender</FormLabel>
<RadioGroup
row
aria-labelledby="demo-row-radio-buttons-group-label"
name="gender"
>
<FormControlLabel value="female" onChange={((e) => setGender(e.target.value))} control={<Radio />} label="Female" />
<FormControlLabel value="male" onChange={((e) => setGender(e.target.value))} control={<Radio />} label="Male" />
<FormControlLabel value="other" onChange={((e) => setGender(e.target.value))} control={<Radio />} label="Other" />
</RadioGroup>
</FormControl>
{/* Multiple Checkbox */}
<FormControl margin="normal">
<FormLabel> Prefered Job Location</FormLabel>
<FormGroup row>
<FormControlLabel onChange={(e) => getLocation(e)} control={<Checkbox color='secondary' />} label="Delhi" value="Delhi" />
<FormControlLabel onChange={(e) => getLocation(e)} control={<Checkbox color='warning' />} label="Mumbai" value="Mumbai" />
<FormControlLabel onChange={getLocation} control={<Checkbox color='success' />} label="Banglore" value="Banglore" />
<FormControlLabel onChange={getLocation} control={<Checkbox color='primary' />} label="Ranchi" value="Ranchi" />
<FormControlLabel onChange={getLocation} control={<Checkbox />} label="Kolkata" value="Kolkata" />
</FormGroup>
</FormControl>
{/* Upload Button */}
<Stack direction="row" alignItems="center" spacing={2}>
<Button variant="contained" component="label">
UPLOAD PHOTO
<input hidden onChange={handlepimage} accept="image/*" name='aksh' id='profile-photo' type="file" />
</Button>
<Button variant="contained" component="label">
UPLOAD FILE
<input hidden accept="doc/*" onChange={(e) => setrdoc(e.target.files[0])} id='resume-file' type="file" />
</Button>
</Stack>
{/* Submit Button */}
<Button type='submit' variant='contained' sx={{ mt: 2, px: 5 }} color="error"> Submit </Button>
</Box>
</Grid>
<Grid item xs={12} md={7} sx={{ mt: 4 }} >
<Box display="flex" justifyContent="center" sx={{ backgroundColor: "info.light", }} padding="1">
<Typography variant="h5" component="div" sx={{ fontWeight: 'bold', color: "white" }}>
List of Candidate
</Typography>
</Box>
{/* Table Component */}
<TableContainer component={Paper}>
<Table sx={{ minWidth: 650 }} aria-label="simple table">
<TableHead>
<TableRow sx={{ backgroundColor: "secondary.dark" }}>
<TableCell align="center"> Name </TableCell>
<TableCell align="center"> Email </TableCell>
<TableCell align="center"> DOB </TableCell>
<TableCell align="center"> State </TableCell>
<TableCell align="center"> Gender </TableCell>
<TableCell align="center"> Location </TableCell>
<TableCell align="center"> Profile </TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow
key="aksh"
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell component="th" scope="row">
Aksh
</TableCell>
<TableCell align="center"> desaiaksh82@gmail.com </TableCell>
<TableCell align="center"> 21/07/2003 </TableCell>
<TableCell align="center"> Gujarat </TableCell>
<TableCell align="center"> Male </TableCell>
<TableCell align="center"> India </TableCell>
<TableCell align="center" > <Avatar alt="Aksh desai" src="/static/images/avatar/1.jpg" /> </TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
</Grid>
</Grid>
</>
);
}
export default App;
Top comments (0)