React Form with file submission

Question

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

your content type should be `'Content-Type': 'application/x-www-form-urlencoded'` — Sangram Badi, Jun 19 '18 at 10:07
@SangramBadi Thank you for your comment. What should I do? Where do I need to put that argument? — joe, Jun 19 '18 at 10:10
are you using axios? if yes then you need to pass `Content-Type` there. could you please post your axios code ? — Sangram Badi, Jun 19 '18 at 10:11
check this https://stackoverflow.com/questions/41878838/how-do-i-set-multipart-in-axios-with-react — Sangram Badi, Jun 19 '18 at 10:12
@SangramBadi I have to get the value first. And then dispatch. `axios` I know how to `POST` to backend. — joe, Jun 19 '18 at 10:14

score 2 · Accepted Answer · answered Jun 19 '18 at 10:18

2

<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

answered Jun 19 '18 at 10:18

Sangram Badi

4,054
9
45
78

Thank you very much! I have never known that I have to use `.bind`. This is a minor question. What kind of the topic I can read on `.bind()` technique? – joe Jun 19 '18 at 10:51
1

you need to check javascript ES6 – Sangram Badi Jun 19 '18 at 10:58
1

Got it. I will enroll in the ES6 class soon. – joe Jun 19 '18 at 11:07

React Form with file submission

1 Answers1