1
I created an React component to be my custom input button:
getFormData(){
var formData = new FormData();
var imagefile = document.querySelector('#btn_file_logo');
formData.append("image", imagefile.files[0]);
return formData;
}
render() {
return (
<div>
<div className="logo_input" onClick={() => this.abirInputFile()}><i className="fa fa-upload"> </i> {this.props.texto}</div>
<input type="file" className="form-control-file" id="btn_file_logo" name="btn_file_logo" />
</div>
);
}
But I’m having a hard time using formData
. The function getFormData()
must return the formData
to another component, which will pick it up and add with append
the rest of the parameters that will be sent to the server (I use PHP with Slim Framework on the server-side):
cadastrar(){
this.refs.load.openLoad();
var formData = this.refs.input_logo.getFormData();
formData.append('nome',this.state.nome);
formData.append('cnpj',this.state.cnpj);
axios.post(config.urlBase + 'adicionar_empresa', {empresa:formData}).then(res => {
if(res.data.status){
this.refs.sucesso.openSucesso(2000);
this.refs.load.closeLoad();
this.limparCampos();
}else{
this.refs.erro.openErro(3000);
this.refs.load.closeLoad();
}
})
}
The problem is that on the server arrive empty parameters.