Hackforge Academy

Category: react

React frontend upload file

Published on 19 Jun 2026

Explanation

React frontend can upload files to a Spring Boot REST API using FormData. This is the most common and recommended approach.

Code:

const handleUpload = async () => {
    const formData = new FormData();
    formData.append('file', file);

    const response = await fetch(
'http://localhost:8080/upload', {
      method: 'POST',
      body: formData
    });

    const result = await response.text();
    alert(result);
  };

Explanation

If additional form fields are required, append them to FormData along with the file.

Code:

const formData = new FormData();
formData.append('file', file);
formData.append('userName', 'Praveen');
formData.append('course', 'React');

๐Ÿš€ Learn Spring Boot with real-world projects

๐Ÿ’ก Build REST APIs step by step

๐Ÿง  Improve backend development skills

๐ŸŽฏ Get career-ready practical training

Join Our Free WhatsApp Community

Direct access to niche-specific mentors and peers on WhatsApp.

๐Ÿ

Python Community

Discuss Django, FastAPI, AI integration, and automation scripts with 15k+ developers.

Join Python Community
โš›๏ธ

React Community

Master Next.js, Framer Motion, and State Management. Share your latest UI components.

Join React Community
โ˜•

Java Community

Deep dives into Spring Boot, Microservices architecture, and high-performance backend ops.

Join Java Community