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;

You already had a good suggestion from @devserkan but could you add the result of the alert(res) or even better replace the alert by a console.log and post the log of what happens during the submit. It will also help other users who may encounter the same issue. — remix23
– remix23, Commented Sep 20, 2018 at 23:38
Thanks @remix23, I've put console.log but first of all my problem is there is no actions after it reach to "fetch" part. it even not stop in breakpoints ( I'm using Webstorm) — Far Zad
– Far Zad, Commented Sep 20, 2018 at 23:42

devserkan · Accepted Answer · 2018-09-20 23:46:02Z

0

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();
    ...

edited Sep 20, 2018 at 23:46

answered Sep 20, 2018 at 23:26

devserkan

17.7k4 gold badges34 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

19 Comments

Far Zad Over a year ago

Thanks @devserkan, The problem is when I run the api, it shows the data received from form (id and file path) but after that it does nothing and the page is refresh only, also the data goes to the url as like as GET method!!!

devserkan Over a year ago

Add event.preventDefault() in the first line of your handleSubmit method and let see what will happen.

Far Zad Over a year ago

in this situation which I tested as well. it shows the value of id and file path from ref but before fetch when I check the "formData" it is empty!! it means it send nothing to API

devserkan Over a year ago

How do you check your formData? You can't see directly logging formData values. You need to use formData.getAll("fId") to get all the values of fId for example.

devserkan Over a year ago

Also, as a suggestion, try to use the state instead of refs.

|

Collectives™ on Stack Overflow

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

1 Answer 1

19 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

19 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related