I have setup a simple form in react.js and trying to send the data onto the backend. The problem here is that the image is showing 0 bytes in backend but if you check it from the frontend and console.log then it is showing the size correctly, what's the problem, is there something wrong about the code or the backend itself.
Here is the code:
import * as React from "react";
import Avatar from "@mui/material/Avatar";
import Button from "@mui/material/Button";
import CssBaseline from "@mui/material/CssBaseline";
import TextField from "@mui/material/TextField";
import FormControlLabel from "@mui/material/FormControlLabel";
import Checkbox from "@mui/material/Checkbox";
import Link from "@mui/material/Link";
import Grid from "@mui/material/Grid";
import Box from "@mui/material/Box";
import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
import Typography from "@mui/material/Typography";
import Container from "@mui/material/Container";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import { Input, InputLabel } from "@mui/material";
import { FormControl, Select, MenuItem } from "@mui/material";
import axios from "axios";
import Loading from "./Loading";
import FormSubmitDialog from "./FormSubmitDialog";
const theme = createTheme();
export default function CharacterUploadForm() {
// const [characterType, setCharacterType] = React.useState("");
// const [characterMode, setCharacterMode] = React.useState("");
const [data, setData] = React.useState({
characterName: "",
characterPicture: null,
walk: "",
injuredWalk: "",
hit: "",
die: "",
attack: "",
groupFile: "",
characterType: "",
characterMode: "",
});
const [open, setOpen] = React.useState(false);
const [showDialog, setShowDialog] = React.useState(false);
const handleToggle = () => {
setOpen(!open);
};
const url = "https://hbhitsolution.com/trove-game-apis/characterUpload.php";
const handleSubmit = (event) => {
event.preventDefault();
console.log(data);
var formData = new FormData();
formData.append("charactername", data.characterName);
formData.append("characterpicture", data.characterPicture);
formData.append("walk", data.walk);
formData.append("injuredwalk", data.injuredWalk);
formData.append("hit", data.hit);
formData.append("die", data.die);
formData.append("attack", data.attack);
formData.append("groupFile", data.groupFile);
formData.append("charactertype", data.characterType);
formData.append("charactermode", data.characterMode);
axios
.post(url, formData)
.then((res) => {
console.log(res.data);
setOpen(false);
setShowDialog(true);
setInterval(() => {
setShowDialog(false);
}, 2000);
})
.catch((err) => {
console.log(err);
});
};
const handle = (e) => {
const newData = { ...data };
newData[e.target.name] = e.target.value;
setData(newData);
console.log(newData);
};
return (
<ThemeProvider theme={theme}>
<Container component="main" maxWidth="xs">
<Box
sx={{
marginTop: 2,
display: "flex",
flexDirection: "column",
alignItems: "center",
}}
>
<Box component="form" onSubmit={handleSubmit} sx={{ mt: 3 }}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography
component="h1"
variant="h5"
style={{
background: "#c9c3c3",
borderRadius: "5px",
marginBottom: "20px",
}}
>
Character Details
</Typography>
</Grid>
<Grid item xs={12}>
<TextField
autoComplete="characterName"
name="characterName"
required
fullWidth
id="characterName"
value={data.characterName}
onChange={(e) => {
handle(e);
}}
label="Character Name"
autoFocus
/>
</Grid>
<Grid
item
xs={12}
style={{
// border: "1px solid #c7c2c2",
marginLeft: "15px",
// marginTop: "15px",
// marginBottom: "10px",
borderRadius: "4px",
}}
>
<InputLabel htmlFor="my-input">Character Picture</InputLabel>
<input
required
fullWidth
type="file"
className="upload-box"
id="characterPicture"
name="characterPicture"
// value={data.characterPicture}
onChange={(e) => {
const newData = { ...data, characterPicture:e.target.files[0]};
// newData[e.target.name] = e.target.files;
setData(newData);
console.log(newData);
}}
style={{ marginTop: "5px", marginBottom: "10px" }}
/>
</Grid>
<Grid item xs={12}>
<Typography
component="h1"
variant="h5"
style={{
background: "#c9c3c3",
borderRadius: "5px",
marginBottom: "20px",
marginTop: "20px",
}}
>
Character Animation
</Typography>
</Grid>
<Grid item xs={12} sm={6}>
<InputLabel htmlFor="my-input">Walk</InputLabel>
<TextField
required
fullWidth
type="url"
id="walk"
label="Paste URL"
name="walk"
value={data.walk}
onChange={(e) => {
handle(e);
}}
autoComplete="walk"
/>
</Grid>
<Grid item xs={12} sm={6}>
<InputLabel htmlFor="my-input">Injured Walk</InputLabel>
<TextField
required
fullWidth
type="url"
id="injuredWalk"
label="Paste URL"
name="injuredWalk"
value={data.injuredWalk}
onChange={(e) => {
handle(e);
}}
autoComplete="injuredWalk"
/>
</Grid>
<Grid item xs={12} sm={6}>
<InputLabel htmlFor="my-input">Hit</InputLabel>
<TextField
required
fullWidth
type="url"
id="hit"
label="Paste URL"
name="hit"
value={data.hit}
onChange={(e) => {
handle(e);
}}
autoComplete="hit"
/>
</Grid>
<Grid item xs={12} sm={6}>
<InputLabel htmlFor="my-input">Die</InputLabel>
<TextField
required
fullWidth
type="url"
id="die"
label="Paste URL"
name="die"
value={data.die}
onChange={(e) => {
handle(e);
}}
autoComplete="die"
/>
</Grid>
<Grid item xs={12} sm={6}>
<InputLabel htmlFor="my-input">Attack</InputLabel>
<TextField
required
fullWidth
type="url"
id="attack"
label="Paste URL"
name="attack"
value={data.attack}
onChange={(e) => {
handle(e);
}}
autoComplete="attack"
/>
</Grid>
<Grid item xs={12} sm={6}>
<InputLabel htmlFor="my-input">Group File</InputLabel>
<TextField
required
fullWidth
type="url"
id="groupFile"
label="Paste URL"
name="groupFile"
value={data.groupFile}
onChange={(e) => {
handle(e);
}}
autoComplete="groupFile"
/>
</Grid>
<Grid item xs={12}>
<Typography
component="h1"
variant="h5"
style={{
background: "#c9c3c3",
borderRadius: "5px",
marginBottom: "20px",
marginTop: "20px",
}}
>
Character Type
</Typography>
</Grid>
<Grid item xs={12}>
<FormControl fullWidth>
<InputLabel id="character-type">
Select Character Type
</InputLabel>
<Select
labelId="demo-simple-select-label"
id="characterType"
// value={data.characterType}
name="characterType"
onChange={(e) => {
handle(e);
}}
label="Select Character Type"
required
>
<MenuItem value="Walking">Walking</MenuItem>
<MenuItem value="Flying">Flying</MenuItem>
<MenuItem value="Swimming">Swimming</MenuItem>
</Select>
</FormControl>
</Grid>
<Grid item xs={12}>
<Typography
component="h1"
variant="h5"
style={{
background: "#c9c3c3",
borderRadius: "5px",
marginBottom: "20px",
marginTop: "20px",
}}
>
Character Mode
</Typography>
</Grid>
<Grid item xs={12}>
<FormControl fullWidth>
<InputLabel id="character-mode">
Select Character Mode
</InputLabel>
<Select
labelId="demo-simple-select-label"
id="characterMode"
// value={data.characterMode}
name="characterMode"
onChange={(e) => {
handle(e);
}}
label="Select Character Mode"
required
>
<MenuItem value="Attacking">Attacking</MenuItem>
<MenuItem value="Non Attacking">Non Attacking</MenuItem>
</Select>
</FormControl>
</Grid>
</Grid>
<Button
type="submit"
fullWidth
variant="contained"
onClick={handleToggle}
sx={{ mt: 3, mb: 2 }}
>
Save
</Button>
<Loading open={open} />
<FormSubmitDialog showDialog={showDialog} />
<Grid container justifyContent="flex-end"></Grid>
</Box>
</Box>
</Container>
</ThemeProvider>
);
}
