score:44

Accepted answer

to post the formdata using axios, you need specify in header that you are sending formdata, for that content-type should be multipart/form-data.

check this, how to use formdata with axios:

let formdata = new formdata();    //formdata object

formdata.append('name', 'abc');   //append the values with key, value pair
formdata.append('age', 20);

const config = {     
    headers: { 'content-type': 'multipart/form-data' }
}

axios.post(url, formdata, config)
    .then(response => {
        console.log(response);
    })
    .catch(error => {
        console.log(error);
    });

score:0

you can update your changes to your state dynamically. see the example here

constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handlechange = this.handlechange.bind(this);
    this.handlesubmit = this.handlesubmit.bind(this);
  }

bind all your fields to your state. exampkle

this.sate = { name: '', username: '', select: '' }

and then

_renderelement: function(group){
    switch(group.type){
      case 'text':
      return <input classname={group.cssclassname} 
      id={group.label} 
      placeholder={group.placeholder}
      value={this.state[group.name]}
      onchange={this.handleusernamechange}
      required={group.mandatory == 'y'? true:   false}/>

      case 'dropdown':
      return <select classname={group.cssclassname}>
      onchange={this.handledropdropdownchange}
      <option value="">{group.placeholder} </option>
      {group.values.map(el => <option>{el.value}</option>)}
      </select>



      </div>
    }
  }

note group.name can be username, name or what ever you name your control.

handleusernamechange(event) {
    this.setstate({username: event.target.value});
  }

handledropdownchange(event) {
    this.setstate({select: event.target.value});
  }

and then when posting

axios.post(url, this.state, config)
    .then(response => {
        console.log(response);
    })
    .catch(error => {
        console.log(error);
    });

don't forget to update your render to

render: function() {
    return (    
      <div classname="container">
      <br/>
      <div classname="panel panel-primary">
      <div classname="panel-heading">form</div>
      <div classname="panel-body">
      <form onsubmit={this.handlesubmit}>
      <div classname="form-group">
      <div classname="col-xs-5">


      {this.renderform()}


             <input type="submit" value="submit" />
      </div>
      </div>
      </form>
      </div>      
      </div>
      </div>
      )}
  });

have a look at the doc here https://facebook.github.io/react/docs/forms.html

score:0

using fetch


function uploadfile(file) {
  fetch('https://path/to/api', {
    // content-type header should not be specified!
    method: 'post',
    body: file,
  })
    .then(response => response.json())
    .then(success => {
      // do something with the successful response
    })
    .catch(error => console.log(error)
  );
}

score:17

you can access formdata like this:

handlesubmit(event) {
    // prevent default behavior
    event.preventdefault();

    const data = new formdata(event.target);
    // access formdata fields with `data.get(fieldname)`
    // for example, converting to upper case
    data.set('username', data.get('username').touppercase());

    // do your axios stuff here
}

this is the code for the form:

render() {
    return (
      <form onsubmit={this.handlesubmit}>
        <label htmlfor="username">enter username</label>
        <input id="username" name="username" type="text" />
        <button>send data!</button>
      </form>
    );

Related Query

More Query from same tag