import axios from
'axios'
;
import React,{Component} from
'react'
;
class App extends Component {
state = {
selectedFile:
null
};
onFileChange = event => {
this
.setState({ selectedFile: event.target.files[0] });
};
onFileUpload = () => {
const formData =
new
FormData();
formData.append(
"myFile"
,
this
.state.selectedFile,
this
.state.selectedFile.name
);
console.log(
this
.state.selectedFile);
axios.post(
"api/uploadfile"
, formData);
};
fileData = () => {
if
(
this
.state.selectedFile) {
return
(
<div>
<h2>File Details:</h2>
<p>File Name: {
this
.state.selectedFile.name}</p>
<p>File Type: {
this
.state.selectedFile.type}</p>
<p>
Last Modified:{
" "
}
{
this
.state.selectedFile.lastModifiedDate.toDateString()}
</p>
</div>
);
}
else
{
return
(
<div>
<br />
<h4>Choose before Pressing the Upload button</h4>
</div>
);
}
};
render() {
return
(
<div>
<h1>
GeeksforGeeks
</h1>
<h3>
File Upload using React!
</h3>
<div>
<input type=
"file"
onChange={
this
.onFileChange} />
<button onClick={
this
.onFileUpload}>
Upload!
</button>
</div>
{
this
.fileData()}
</div>
);
}
}
export
default
App;