Simple React File Upload

react-file-upload.js

import React from 'react'
import axios, { post } from 'axios';

class SimpleReactFileUpload extends React.Component {

  constructor(props) {
    super(props);
    this.state ={
      file:null
    }
    this.onFormSubmit = this.onFormSubmit.bind(this)
    this.onChange = this.onChange.bind(this)
    this.fileUpload = this.fileUpload.bind(this)
  }
  onFormSubmit(e){
    e.preventDefault() // Stop form submit
    this.fileUpload(this.state.file).then((response)=>{
      console.log(response.data);
    })
  }
  onChange(e) {
    this.setState({file:e.target.files[0]})
  }
  fileUpload(file){
    const url = 'http://example.com/file-upload';
    const formData = new FormData();
    formData.append('file',file)
    const config = {
        headers: {
            'content-type': 'multipart/form-data'
        }
    }
    return  post(url, formData,config)
  }

  render() {
    return (
      <form onSubmit={this.onFormSubmit}>
        <h1>File Upload</h1>
        <input type="file" onChange={this.onChange} />
        <button type="submit">Upload</button>
      </form>
   )
  }
}



export default SimpleReactFileUpload

Should also handle onClick with a setState({file:null})...

No progress? Do sites still do this? Isn't it horrible ux?

For multiple files:

...

formData.append('file[]', files[0])
formData.append('file[]', files[1])
....

See https://developer.mozilla.org/en-US/docs/Web/API/FormData/append

I tried it but I have this error:
Content type 'multipart/form-data;boundary=----WebKitFormBoundaryprgHUtVK2ez7ORTh;charset=UTF-8' not supported

Changing line no. 33 to return axios.post(url,...) worked for me.

Thanks for keeping it simple! Just what I needed.

hi, i also want to upload some description, anyone can help/?

Changing line no. 33 to return axios.post(url,...) worked for me.

Thanks!

multiple files are not uploading only single file uploaded.what is the way to upload multiple files.pls anyone suggest me.and where we have to change the code.explain briefly.thanks in advance.

we have to change only line 33 axios.post(url,...) working fine ?in these after url the 3 dots are mentioned for which purpose

Thanks, this was a helpful starter. I used it to create a Function component version that uses S3 here: https://gist.github.com/jordanburke/2bf85946d2bd716d3cf74c297291c46e

Does anyone know why the images look scrambled and corrupted, like they are tuned to a dead channel?

How to use the same for multiple files?

just add mutiple={true} prop to <input />

How to use the same for multiple files?

just add mutiple={true} prop to <input />

Thanks

How to use the same for multiple files?

just add mutiple={true} prop to <input />

can you provide a link for the full code

How do I make this example to send other data like email, password,etc along with the file?

How to use the same for multiple files?

just add mutiple={true} prop to <input />

can you provide a link for the full code

<input type="file" onChange={e => console.log(e.target.files, 'all selected files')} multiple/>

its not working in React Native Any Solution??

it works!!!!!!!