score:0

one solution could be to send the image as a string (base64) to the backend to save the image. try to implement this in your react:

import { usestate } from "react";
import "./styles.css";

export default function app() {
  const [img, setimg] = usestate("image string will come here");
  const handlechangeimg = (e) => {
    console.log(e.target.files[0]);
    const reader = new filereader();
    reader.readasdataurl(e.target.files[0]);
    reader.onloadend = () => {
      setimg(reader.result);
    };
  };
  return (
    <div classname="app">
      <h1>hello codesandbox</h1>
      <h2>start editing to see some magic happen!</h2>

      <input onchange={handlechangeimg} type="file" name="image" />
      <button onclick={()=>setimg("image string will come here")}>reset</button>
      <h1>{img}</h1>
    </div>
  );
}

check the code iin codesandbox here.

related resources:


Related Query

More Query from same tag