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