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

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!!!!!!!