Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Simple React File Upload
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
@sagarmemane92
Copy link

sagarmemane92 commented Nov 21, 2017

where the data can store??

@alokkarma
Copy link

alokkarma commented Dec 12, 2017

How to use the same for multiple files?

@RamMohan222
Copy link

RamMohan222 commented Jan 4, 2018

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.

@Gfast2
Copy link

Gfast2 commented Jan 30, 2018

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.

@pmidalwan
Copy link

pmidalwan commented Feb 2, 2018

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.

@rwakulkar
Copy link

rwakulkar commented Feb 16, 2018

where file upload path mention

@vitthaldc
Copy link

vitthaldc commented Feb 23, 2018

Actually its not Working.

@malixsys
Copy link

malixsys commented Feb 26, 2018

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

@behelit
Copy link

behelit commented Feb 28, 2018

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

@eneskaya
Copy link

eneskaya commented Jul 10, 2018

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

@Andrewzz909
Copy link

Andrewzz909 commented Sep 20, 2018

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

@jayeesha
Copy link

jayeesha commented Mar 19, 2019

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

@pierznj
Copy link

pierznj commented Jul 18, 2019

Thanks for keeping it simple! Just what I needed.

@phamduc1235
Copy link

phamduc1235 commented Aug 6, 2019

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

@kerorojason
Copy link

kerorojason commented Aug 11, 2019

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

Thanks!

@Manishasony
Copy link

Manishasony commented Mar 30, 2020

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.

@Manishasony
Copy link

Manishasony commented Mar 30, 2020

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

@jordanburke
Copy link

jordanburke commented Apr 13, 2020

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

@ptcampbell
Copy link

ptcampbell commented Apr 29, 2020

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

@ManalLiaquat
Copy link

ManalLiaquat commented Aug 21, 2020

How to use the same for multiple files?

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

@flyemirate0716
Copy link

flyemirate0716 commented Sep 26, 2020

How to use the same for multiple files?

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

Thanks

@DebRoy15
Copy link

DebRoy15 commented Nov 7, 2020

How to use the same for multiple files?

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

can you provide a link for the full code

@rjitsu
Copy link

rjitsu commented Feb 17, 2021

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

@ManalLiaquat
Copy link

ManalLiaquat commented Feb 17, 2021

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

@Ehtesham25
Copy link

Ehtesham25 commented Apr 5, 2021

its not working in React Native Any Solution??

@mirulnorazmi
Copy link

mirulnorazmi commented Apr 20, 2021

it works!!!!!!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment