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

This comment has been minimized.

Copy link

sagarmemane92 commented Nov 21, 2017

where the data can store??

@alokkarma

This comment has been minimized.

Copy link

alokkarma commented Dec 12, 2017

How to use the same for multiple files?

@RamMohan222

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

Copy link

rwakulkar commented Feb 16, 2018

where file upload path mention

@vitthaldc

This comment has been minimized.

Copy link

vitthaldc commented Feb 23, 2018

Actually its not Working.

@malixsys

This comment has been minimized.

Copy link

malixsys commented Feb 26, 2018

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

@behelit

This comment has been minimized.

Copy link

behelit commented Feb 28, 2018

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

@eneskaya

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

Copy link

jayeesha commented Mar 19, 2019

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

@pierznj

This comment has been minimized.

Copy link

pierznj commented Jul 18, 2019

Thanks for keeping it simple! Just what I needed.

@phamduc1235

This comment has been minimized.

Copy link

phamduc1235 commented Aug 6, 2019

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

@kerorojason

This comment has been minimized.

Copy link

kerorojason commented Aug 11, 2019

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

Thanks!

@Manishasony

This comment has been minimized.

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

This comment has been minimized.

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.