Vishal Raj
7 years ago
1 changed files with 27 additions and 10 deletions
@ -1,27 +1,44 @@ |
|||
class FileInput extends React.Component { |
|||
constructor(props) { |
|||
super(props); |
|||
this.handleSubmit = this.handleSubmit.bind(this); |
|||
this.handleSubmit = this.handleSubmit.bind( |
|||
this |
|||
); |
|||
} |
|||
// highlight-range{1-4}
|
|||
handleSubmit (event) { |
|||
// highlight-range{5}
|
|||
handleSubmit(event) { |
|||
event.preventDefault(); |
|||
alert(`Selected file - ${this.fileInput.files[0].name}`); |
|||
alert( |
|||
`Selected file - ${ |
|||
this.fileInput.files[0].name |
|||
}` |
|||
); |
|||
} |
|||
|
|||
render() { |
|||
return ( |
|||
<form onSubmit={this.handleSubmit}> |
|||
<form |
|||
onSubmit={this.handleSubmit}> |
|||
<label> |
|||
Upload file: |
|||
{/* highlight-next-line */} |
|||
<input type='file' ref={input => {this.fileInput = input}} /> |
|||
{/* highlight-range{1-6} */} |
|||
<input |
|||
type="file" |
|||
ref={input => { |
|||
this.fileInput = input; |
|||
}} |
|||
/> |
|||
</label> |
|||
<br/> |
|||
<button type='submit'>Submit</button> |
|||
<br /> |
|||
<button type="submit"> |
|||
Submit |
|||
</button> |
|||
</form> |
|||
); |
|||
} |
|||
} |
|||
|
|||
ReactDOM.render(<FileInput />, document.getElementById('root')); |
|||
ReactDOM.render( |
|||
<FileInput />, |
|||
document.getElementById('root') |
|||
); |
|||
|
Loading…
Reference in new issue