How to send an image file from React.js to Spring Boot Rest API without using Axios?

How to save an Image using Springboot rest api and React.js

I am trying to make a react application and also I have a Spring boot Rest API. I have created following code and it is working well with POSTMAN. My problem is, I don't know how to send the image file from react to my api. Plese provide me the full react code part. (I don't want use axios)

This is my Springboot Rest API part (This is working without any problem)

@PostMapping("/uploadFile")
@CrossOrigin
public ResponseEntity<Object> fileUpload(@RequestParam("File") MultipartFile file) throws IOException{
File myfile = new File(FILE_DIRECTORY+file.getOriginalFilename());
myfile.createNewFile();
FileOutputStream fos = new FileOutputStream(myfile);
fos.write(file.getBytes());
FileName = file.getOriginalFilename();
fos.close();
return new ResponseEntity<Object>("Success.."+FileName,HttpStatus.OK);
} 

This is my React part

import React, { useEffect, useState } from 'react';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
import Postview from '../componant/postview';
import Navigation from '../componant/navigation';
import Card from 'react-bootstrap/Card';
import '../pages/profile.css';
export default function Profile() {
var userId = sessionStorage.getItem("userID");
const [imgOne, setImgOne] = useState()
const [postBody, setPostBody] = useState()
const [postTitle, setPostTitle] = useState()
return (
<Container>
<Navigation /><br />
<Row>
<Col md="9">
<Postview />
</Col>
<Col md="3">
<Card >
<Card.Body >
<Form>
<Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
<Form.Label>Images</Form.Label>
<Form.Control type="file" value={imgOne} onChange={(e) => setImgOne(e.target.value)} />
</Form.Group>
<Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
<Form.Label>Title</Form.Label>
<Form.Control type="email" value={postTitle} onChange={(e) => setPostTitle(e.target.value)} />
</Form.Group>
<Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1">
<Form.Label>Description</Form.Label>
<Form.Control as="textarea" rows={3} value={postBody} onChange={(e) => setPostBody(e.target.value)} />
</Form.Group>
<Button id='postBtn' variant="primary">Post</Button>
</Form>
</Card.Body>
</Card>
</Col>
</Row>
</Container>
);
}

Also I have call some api using following way and it is also worked. I want a code for above problem just like below

  const registerClick = (e) => {
try {
let result = fetch('http://localhost:8080/user-save', {
method: 'post',
headers: {
'Accept': 'application/json',
'Content-type': 'application/json',
},
body: JSON.stringify({
"email": "" + email + "",
"name": "" + name + "",
"password": "" + password + "",
})
});
navigate('/');
} catch (e) {
console.log(e);
}
}

Thank you very much

The following code snippets for React and Sprint-Boot should be enough to get you started.

Explaination:

I've created 3 state variables that simply look for form changes. Whenever the form gets dirty, the state variables capture the changes. The submit button calls the handleForm(e) handler that submits the data to your spring @RestController which runs on localhost with port 8080

React implementation:

import { useState } from "react";

export default function Form() {
  const [title, setTitle] = useState("");
  const [desc, setDesc] = useState("");
  const [file, setFile] = useState("");

  function handleForm(e) {
    e.preventDefault();

    const data = new FormData();
    data.append("image", file);
    data.append("title", title);
    data.append("desc", desc);

    fetch("http://localhost:8080/upload", {
      method: "POST",
      body: data,
    });
  }

  function handleFileChange(e) {
    if (e.target.files && e.target.files[0]) setFile(e.target.files[0]);
  }

  return (
    <>
      <form>
        <input
          type="text"
          name="title"
          placeholder="title"
          onKeyUp={(e) => setTitle(e.target.value)}
        />
        <input
          type="text"
          name="description"
          placeholder="description"
          onKeyUp={(e) => setDesc(e.target.value)}
        />
        <input type="file" name="image" onChange={handleFileChange} />
        <button type="submit" onClick={(e) => handleForm(e)}>
          Submit
        </button>
      </form>
    </>
  );
}

Spring-Boot implementation

package com.springboot.learning.controllers;

import java.io.File;

import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

@RestController
public class HomeController {

	private static final String UPLOAD_PATH = "/home/user/eclipse-workspace/project-name/src/main/resources/static/images/";

	@PostMapping("/upload")
	@CrossOrigin
	public ResponseEntity<String> handleFileUpload(@RequestParam("image") MultipartFile file,
			@RequestParam String title, @RequestParam String desc) {

		String fileName = file.getOriginalFilename();
		System.out.println(title);
		System.out.println(desc);
		System.out.println(fileName);
		try {
			file.transferTo(new File(UPLOAD_PATH + fileName));
			return ResponseEntity.ok("File uploaded successfully.");
		} catch (Exception e) {
			e.printStackTrace();
			return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).build();
		}

	}

}

P.S: You may need to create the folder resources/static/images in your project if not already existing.