Image Upload in React

Question

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>
  );
}

Answer 1

I think you have problem with backend, you can use multer if you are using node.js as backend. This may solve your problem. You can find more details about multer here.