Unable to make post call and send file via html form in reactjs

Question

I'm new in reactjs and tried hard to find my answer but I still have the same problem. I've checked all same questions and answers like this , but non of them helped me so if you know any same Q&A please let me know.

I have a html form which suppose to accept one zip file and one string then want to pass them to the Web service via Post method.

I have the rest api server which I've written by Spring boot and now try to make a client test project for test it. The test by Postman is successful and I send the request and receive the response without issues, but with this API I was unsuccessful. I've changed a lot in my app through what I learnt from internet resources and this is the last step I got stuck

I would appreciate if anyone could help me to find the bug.

this is my ReactJs code:

import React, {Component} from 'react';
import img from "./images/test.jpg"
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css'; 

class DoPost extends Component {

    constructor(props) {
        super(props);
        this.handleSubmit  = this.handleSubmit.bind(this);
        this.state = {
            id:null,
            fileData:null,
            url:"http://localhost:8990/getId"
        };
    }





    handleSubmit(event) {

        let formData = new FormData();
        formData.append('fId', this.fId.value);
        formData.append('inputPackage', this.inputPackage.value); 
        console.log(this.fId.value);
        console.log(this.inputPackage.value);
        fetch(this.state.url, { 
            method: 'POST',
            body: formData
        }).then(res => {
            alert(res);
        });


    }



    render() {

        return (<div>
                <section className="login-block">
                    <div className="container">
                        <div className="row">
                            <div className="col-md-4 login-sec">
                                <form onSubmit={this.handleSubmit}>
                                    <label htmlFor="fId">fId Id:</label>
                                    <input type="text" name="fId" id="fId" ref={el => this.fId = el} /><br/><br/>
                                     <div className="form-group files color">
                                        <label>Upload Your File </label>
                                        <input type="file" name="inputPackage" ref={el => this.inputPackage = el}  required
                                                className="file-controller"/>
                                    </div>
                                    <div className="align-center">
                                        <input type="submit" className="btn btn-lg btn-info " value="Send the request" />
                                    </div>
                                </form>
                            </div>
                            <div className="col-md-8 banner-sec">
                                <div id="carouselExampleIndicators" className="carousel slide" data-ride="carousel">
                                    <div className="carousel-inner" role="listbox">
                                        <div className="carousel-item">
                                            <img className="d-block img-fluid" src={img} alt="First slide"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        );
    }
}

export default DoPost;

Answer 1

I don't know what was the error you get here but your fetch is somehow wrong. First response from fetch is a promise and you need to handle it.

fetch(this.state.url, { 
            method: 'POST',
            body: formData
        })
         .then( res => res.json())
         .then( res => {
            alert(res);
        })
);

Also, you need to add event.preventDefault() in your handleSubmit method to prevent refreshing after form submission.

handleSubmit(event) {
    event.preventDefault();
    let formData = new FormData();
    ...