diff --git a/content/docs/forms.md b/content/docs/forms.md index b3af610a..32731dce 100644 --- a/content/docs/forms.md +++ b/content/docs/forms.md @@ -199,34 +199,9 @@ In HTML, a `` lets the user choose one or more files from the In React, a `` works similarly to a normal `` with some major differences. The `` in React is read-only and hence setting the value of a file programmatically is impossible. You can use the various File management API provided by Javascript to handle the files that are uploaded by the user. -```javascript{7-10,17} -class FileInput extends React.Component { - constructor(props) { - super(props); - this.handleSubmit = this.handleSubmit.bind(this); - } - - handleSubmit (event) { - event.preventDefault(); - alert(`Selected file - ${this.fileInput.files[0].name}`); - } - - render() { - return ( -
- -
- -
- ); - } -} -``` +`embed:forms/input-type-file.js` -[Try it on CodePen](codepen://components-and-props/input-type-file) +[Try it on CodePen](codepen://forms/input-type-file) Note how a `ref` to the file input is used to access the file(s) in the submit handler diff --git a/examples/components-and-props/input-type-file.js b/examples/forms/input-type-file.js similarity index 90% rename from examples/components-and-props/input-type-file.js rename to examples/forms/input-type-file.js index 18f2c6f1..5cc084d9 100644 --- a/examples/components-and-props/input-type-file.js +++ b/examples/forms/input-type-file.js @@ -3,7 +3,7 @@ class FileInput extends React.Component { super(props); this.handleSubmit = this.handleSubmit.bind(this); } - +// highlight-range{1-4} handleSubmit (event) { event.preventDefault(); alert(`Selected file - ${this.fileInput.files[0].name}`); @@ -14,6 +14,7 @@ class FileInput extends React.Component {