You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
/** Unique id for the TextArea, also used to generate ids for accessible labels. */
13
13
id: string;
14
-
/** What type of file. Determines what is is passed to `onChange` and expected by `value` (a string for 'text' and 'dataURL', or a [File object](https://developer.mozilla.org/en-US/docs/Web/API/File) otherwise). */
14
+
/** What type of file. Determines what is is passed to `onChange` and expected by `value`
15
+
* (a string for 'text' and 'dataURL', or a File object otherwise. */
15
16
type?: 'text'|'dataURL';
16
-
/** Value of the file's contents (string if text file, [File object](https://developer.mozilla.org/en-US/docs/Web/API/File) otherwise) */
17
+
/** Value of the file's contents
18
+
* (string if text file, File object otherwise) */
17
19
value?: string|File;
18
20
/** Value to be shown in the read-only filename field. */
/** Unique id for the TextArea, also used to generate ids for accessible labels */
14
18
id: string;
15
-
/** What type of file. Determines what is is expected by `value` (a string for 'text' and 'dataURL', or a [File object](https://developer.mozilla.org/en-US/docs/Web/API/File) otherwise). */
19
+
/** What type of file. Determines what is is expected by `value`
20
+
* (a string for 'text' and 'dataURL', or a File object otherwise). */
16
21
type?: 'text'|'dataURL';
17
-
/** Value of the file's contents (string if text file, [File object](https://developer.mozilla.org/en-US/docs/Web/API/File) otherwise) */
22
+
/** Value of the file's contents
23
+
* (string if text file, File object otherwise) */
18
24
value?: string|File;
19
25
/** Value to be shown in the read-only filename field. */
The basic `FileUpload` component can handle simple text files via browse or drag-and-drop, loading them into memory and passing their contents as a string to an`onChange` prop.
14
+
The basic `FileUpload` component can accept a file via browse or drag-and-drop, and behaves like a standard form field with its `value`and `onChange` props. The `type` prop determines how the `FileUpload` component behaves upon accepting a file, what type of value it passes to its`onChange` prop, and what type it expects for its `value` prop.
15
15
16
-
```js title=Simple-text-file isBeta
16
+
### Text files
17
+
18
+
If `type="text"` is passed, a `TextArea` preview will be rendered underneath the filename bar. When a file is selected, its contents will be read into memory and passed to the `onChange` prop as a string (along with its filename). Typing/pasting text in the box will also call `onChange` with a string, and a string value is expected for the `value` prop.
@@ -27,7 +31,7 @@ class SimpleTextFileUpload extends React.Component {
27
31
}
28
32
29
33
render() {
30
-
const { value, filename } =this.state;
34
+
const { value, filename, isLoading } =this.state;
31
35
return (
32
36
<FileUpload
33
37
id="simple-text-file"
@@ -37,15 +41,17 @@ class SimpleTextFileUpload extends React.Component {
37
41
onChange={this.handleFileChange}
38
42
onReadStarted={this.handleFileReadStarted}
39
43
onReadFinished={this.handleFileReadFinished}
44
+
isLoading={isLoading}
45
+
showPreview
40
46
/>
41
47
);
42
48
}
43
49
}
44
50
```
45
51
46
-
Any [props accepted by `react-dropzone`'s `Dropzone` component](https://react-dropzone.js.org/#!/Dropzone) can be passed as a `dropzoneProps` object in order to customize the behavior of the Dropzone, such as restricting the size and type of files allowed. This example will only accept CSV files smaller than 1 KB.
52
+
Any [props accepted by `react-dropzone`'s `Dropzone` component](https://react-dropzone.js.org/#!/Dropzone) can be passed as a `dropzoneProps` object in order to customize the behavior of the Dropzone, such as restricting the size and type of files allowed. This example will only accept CSV files smaller than 1 KB:
@@ -79,12 +85,14 @@ class SimpleTextFileUploadWithRestrictions extends React.Component {
79
85
onChange={this.handleFileChange}
80
86
onReadStarted={this.handleFileReadStarted}
81
87
onReadFinished={this.handleFileReadFinished}
88
+
isLoading={isLoading}
82
89
dropzoneProps={{
83
90
accept:'.csv',
84
91
maxSize:1024,
85
92
onDropRejected:this.handleFileRejected
86
93
}}
87
94
validated={isRejected ?'error':'default'}
95
+
showPreview
88
96
/>
89
97
</FormGroup>
90
98
</Form>
@@ -93,9 +101,87 @@ class SimpleTextFileUploadWithRestrictions extends React.Component {
93
101
}
94
102
```
95
103
96
-
`FileUpload` is a thin wrapper around the `FileUploadField` presentational component. If you need to implement your own logic for accepting, reading or displaying files, you can instead render a `FileUploadField` directly, which does not include `react-dropzone` and requires additional props (e.g. `onBrowseButtonClick`, `onClearButtonClick`, `isDragActive`).
104
+
### Other file types
105
+
106
+
If no `type` prop is specified, the component will not read files directly. When a file is selected, a [`File` object](https://developer.mozilla.org/en-US/docs/Web/API/File) will be passed to `onChange` and your application will be responsible for reading from it (e.g. by using the [FileReader API](https://developer.mozilla.org/en-US/docs/Web/API/FileReader) or attaching it to a [FormData object](https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects)). A `File` object will also be expected for the `value` prop instead of a string, and a summary of the file's type and size will be rendered instead of the `TextArea`.
Regardless of `type`, the preview area (TextArea or type/size summary) can be removed by using `showPreview={false}`, and a custom one can be rendered by passing `children`.
Custom preview here for your {value.size}-byte file named {value.name}
172
+
</h1>
173
+
)}
174
+
</FileUpload>
175
+
);
176
+
}
177
+
}
178
+
```
179
+
180
+
### Bringing your own file browse logic
181
+
182
+
`FileUpload` is a thin wrapper around the `FileUploadField` presentational component. If you need to implement your own logic for accepting files, you can instead render a `FileUploadField` directly, which does not include `react-dropzone` and requires additional props (e.g. `onBrowseButtonClick`, `onClearButtonClick`, `isDragActive`).
0 commit comments