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))
    }
}

score 1 · Answer 1 · answered Oct 29 '17 at 13:22

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.

answered Oct 29 '17 at 13:22

Ioan Ungurean

319
1
15

I have written an action, by using async wait with axios. I've updated the question with the action I've mentioned earlier. But even with the async - await thingy, it still shows an empty list of files in the request payload. – Moldovan Andrei Oct 29 '17 at 18:21

React JS file upload

1 Answers1