CODEWITHSUNDEEP
javascriptreactjs
joe
joe

Reputation: 9503

React Form with file submission

I am now practicing upload a file by using Reactjs. This is a simple problem, but I could not connect the solution to axios. I know how the state and Form works, but my JavaScript callback values does not contains any of my given input. Or I could not find my values. Here is my case.

import React, {Component, Fragment} from 'react';
import tokamakConfig from './Configuration_icon_by_obsilion.png';
import {Form} from 'semantic-ui-react';

class Advance extends Component {
  handleSubmit(event, values){
    console.log(event);
    console.log(values);
  }

  render() {
    return (
      <Fragment>
        <h1>Please provide necessary information for the operation</h1>
        <img src={tokamakConfig} alt={'tokamak configuration'} />
        <Form onSubmit={this.handleSubmit}>
          <Form.Group inline>
            <label>Load input file</label>
            <input name={'file'} type='file' />
          </Form.Group>

          <Form.Group inline>
            <label>Comment</label>
            <input name={'comment'} type={'text'} placeholder={'This is an advanced mode'}/>
          </Form.Group>
          <button type={'submit'}>Submit</button>
        </Form>
      </Fragment>
    )
  }
}

export default Advance;

In my console.log(). I got proxy object and onSubmit object. I could not find any of my input there. Then I have no idea how can I dispatch my value to axios

Question:
How to POST file from form to endpoint

Upvotes: 1

Views: 2866

Answers (1)

Sangram Badi
Sangram Badi

Reputation: 4274

<input type="file" onChange={ (e) => this.handleChange(e.target.files) } />

You need to use onChange event to get the file data.

handleChange(selectorFiles: FileList)
    {
        console.log(selectorFiles);
    }

Then you need to get the file info inside the method

Upvotes: 2

Related Questions