How to submit file input along with text input to backend in react?

Question

I am trying to submit a file and text input to backend with POST request, the code looks like this,

state={
   text:'',
   file:''
}

handleTextChange = (e) => {
   this.setState({[e.target.name]:e.target.value})
}

handleFileChange = (e) => {
   this.setState({file:e.target.files[0]})
}

handleSubmit = (e) => {
   const {text,file} = this.state

   //POST request with text and file
}

But the file is always empty, If I console.log(e.target.files[0]), it shows a FileList in console but somehow it is not updated in state I am quite new in react, your help is very much appreciated, thanks

EDIT: the form looks like this

<form action="" className="w-100" onSubmit={(e) => this.handleSubmit(e)}>
   <div className="pt-1 pb-3">
    <TextAreaAutosize
         className="form-control"
         placeholder="write some text here"
         minRows="4"
         name="text"
         onChange={(e) => this.handleChange(e)}
     />
   </div>
   <div className="w-100 d-flex justify-content-between align-items-center">
      <div>
          <input
               type="file"
               className="form-control-file"
               name="file"
               onChange={(e) => this.handleFileChange(e)}
          />
       </div>
       <div>
           <button type="submit" className="btn btn-primary">
              Post
           </button>
       </div>
     </div>
 </form>

React, {component} and TextAreaAutoSize are the only packages used and form is simple 'textarea' and 'file input' in a bootstrap modal — Kritish Bhattarai
– Kritish Bhattarai, Commented Jun 17, 2020 at 10:04

Naor Tedgi · Accepted Answer · 2020-06-17 11:25:05Z

sandbox:

https://codesandbox.io/s/friendly-banzai-8ifw4?fontsize=14&hidenavigation=1&theme=dark

try this one works just fine

before install

run npm install @material-ui/core

import React, { Component } from 'react';
import './App.css';
import { TextareaAutosize } from '@material-ui/core';



class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      text: '',
      file: ''
    }
    this.handleFileChange=this.handleFileChange.bind(this)
    this.handleTextChange=this.handleTextChange.bind(this)
    this.handleSubmit=this.handleSubmit.bind(this)
  }
  handleTextChange = (e) => {
    this.setState({ [e.target.name]: e.target.value })
  }

  handleFileChange = (e) => {
    console.log(e.target.files[0])
    this.setState({ file: e.target.files[0] })
  }

  handleSubmit = (e) => {
    const { text, file } = this.state

  }

  render() {
    return (
      <div className="App">
        <form action="" className="w-100" onSubmit={(e) => this.handleSubmit(e)}>
          <div className="pt-1 pb-3">
            <TextareaAutosize
              className="form-control"
              placeholder="write some text here"
              minRows="4"
              name="text"
              onChange={(e) => this.handleChange(e)}
            />
          </div>
          <div className="w-100 d-flex justify-content-between align-items-center">
            <div>
              <input
                type="file"
                className="form-control-file"
                name="file"
                onChange={(e) => this.handleFileChange(e)}
              />
            </div>
            <div>
              <button type="submit" className="btn btn-primary">
                Post
           </button>
            </div>
          </div>
        </form>
      </div>
    );
  }
}

export default App;

Collectives™ on Stack Overflow

How to submit file input along with text input to backend in react?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related