diff --git a/content/docs/forms.md b/content/docs/forms.md index f85cd6f32..b8a3c1bf8 100644 --- a/content/docs/forms.md +++ b/content/docs/forms.md @@ -189,6 +189,21 @@ Overall, this makes it so that ``, ``, and ````js > >``` +## The file input Tag + +In HTML, an `` lets the user choose one or more files from their device storage to be uploaded to a server or manipulated by JavaScript via the [File API](https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications). + +```html + +``` + +In React, an `` works similarly to a normal `` with one important difference: **it is read-only**. (You can't set the value programmatically.) Instead, you should use the File API to interact with the files. + +The following example shows how a `ref` can be used to access file(s) in a submit handler: + +`embed:forms/input-type-file.js` + +[Try it on CodePen](codepen://forms/input-type-file) ## Handling Multiple Inputs diff --git a/examples/forms/input-type-file.js b/examples/forms/input-type-file.js new file mode 100644 index 000000000..93dd13fc9 --- /dev/null +++ b/examples/forms/input-type-file.js @@ -0,0 +1,44 @@ +class FileInput extends React.Component { + constructor(props) { + super(props); + this.handleSubmit = this.handleSubmit.bind( + this + ); + } + // highlight-range{5} + handleSubmit(event) { + event.preventDefault(); + alert( + `Selected file - ${ + this.fileInput.files[0].name + }` + ); + } + + render() { + return ( + + + Upload file: + {/* highlight-range{1-6} */} + { + this.fileInput = input; + }} + /> + + + + Submit + + + ); + } +} + +ReactDOM.render( + , + document.getElementById('root') +);