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

where the data can store??

How to use the same for multiple files?

Hi I'm sending the formData with multipart files array but i'm getting 400 error it is treating that files array as an array of strings so i'm getting error can you please suggest me. I'm using spring boot services.

Lastly I figured out the problem for me:
The virtual DOM of React created everything indeed: from <form/> to <input/>. They work from the "visual" aspect also like they should. But in real everything here has only one name "javascript". (Wellcome to the jungle baby 👍 ) So Lastly the <form/> that we used to get the payload from the selected file from <input/> won't do what it should do as it should when you talking about pure HTML5 + Javascript.

line 26 & 27 enlight me:

const formData = new FormData();
formData.append('file',file)

This saying: create a virtual <form/> and add the payload from that <input/> manually. because in the Javascript world, this is no more default.

Hi Ashik,

Could you please let me know how to upload files in a ftp server in reactjs. The example you gave is for http server file upload.

where file upload path mention

Actually its not Working.

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