React JS file upload

Question

I'm trying to upload a single image file and save its path into the database. However, when I'm trying to send the uploaded images (their details being saved in the app's state), the request's payload is empty, regarding the sent images.

Here's my Component:

    renderForm() {
        return (
            <div>
                <form onSubmit={ this.handleSubmit }>
                    <div className="uniform">
                        <div className="12u 12u%(medium)">
                            <ImageUploader 
                                withIcon={ true }
                                buttonText='Upload'
                                onChange={ this.onDrop }
                                imgExtension={ ['.jpg', '.png'] }
                                maxFileSize={ 6291456 }
                            />
                        </div>
                    </div>
                </form>
                <input /*onClick={ this.handleSubmit }*/ type="submit" value="Submit" />
            </div>
        );
    }

Here's my onDrop handler:

    onDrop(picture) {
        this.setState({
            images: this.state.images.concat(picture)
        });
    }

And the handleSubmit:

handleSubmit(event) {
    event.preventDefault();
    console.log(this.state.images) // at this point, the list of files is populated, as present in the image below.
    axios.post('http://127.0.0.1/scoala-de-iarna/api/web/api/create-sponsor', {
        name: this.state.name,
        images: this.state.images
    });
}

This is the files-to-be-uploaded list.

This is the request's data.

Update - createSponsor function in actions folder:

export function createSponsor(values) {
    return async (dispatch, getState) => {
        await axios({
            url: `${ROOT_URL}api/create-sponsor`,
            method: 'post',
            data: {
                name: values.name,
                images: values.images
            }
        })//.then((response) => dispatch(dispatchCreateSponsor(response)));
        .then(response => console.log(response))
    }
}

Answer 1

I'm not seeing any promises in your code. When you upload your images, because the process is asynchronous, you should use promises or async await and when the promise is resolved make your post request with axios.

handleUpload() { return newPromise((resolve, reject) => { ... }) }

handleUpload.then( (res) => { // make your post request }, (rej) => { // handle rejection} );

Here you have an accurate example, maybe it will help you.