diff --git a/content/docs/forms.md b/content/docs/forms.md index b8a3c1bf8..989e89fd2 100644 --- a/content/docs/forms.md +++ b/content/docs/forms.md @@ -189,6 +189,7 @@ 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). @@ -197,13 +198,7 @@ In HTML, an `` lets the user choose one or more files from th ``` -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) +Because its value is read-only, it is an **uncontrolled** component in React. It is discussed together with other uncontrolled components [later in the documentation](/docs/uncontrolled-components.html#the-file-input-tag). ## Handling Multiple Inputs diff --git a/content/docs/uncontrolled-components.md b/content/docs/uncontrolled-components.md index f1bf1cdc9..4bd742921 100644 --- a/content/docs/uncontrolled-components.md +++ b/content/docs/uncontrolled-components.md @@ -64,3 +64,20 @@ render() { ``` Likewise, `` and `` support `defaultChecked`, and `` and `` supports `defaultValue`. + +## 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 `` is always an uncontrolled component because its value can only be set by a user, and not programmatically. + +You should use the File API to interact with the files. The following example shows how to create a [ref to the DOM node](/docs/refs-and-the-dom.html) to access file(s) in a submit handler: + +`embed:uncontrolled-components/input-type-file.js` + +[Try it on CodePen](codepen://uncontrolled-components/input-type-file) + diff --git a/examples/forms/input-type-file.js b/examples/uncontrolled-components/input-type-file.js similarity index 100% rename from examples/forms/input-type-file.js rename to examples/uncontrolled-components/input-type-file.js