Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 724d04a

Browse files
doboothdobooth
authored
Merge pull request magento#6170 from serhiyzhovnir/update-File-Uploader-UI-component-documentation
Update documentation for the FileUploader UI component
2 parents e0918fa + 3541e68 commit 724d04a

File tree

2 files changed

+14
-183
lines changed

2 files changed

+14
-183
lines changed

‎src/common/images/ui_comps/ui-fileuploader-result.png

2.21 KB
Loading

‎src/guides/v2.2/ui_comp_guide/components/ui-fileuploader.md

Lines changed: 14 additions & 183 deletions
Original file line numberDiff line numberDiff line change
@@ -7,189 +7,16 @@ The File Uploader component is an [adapter](https://glossary.magento.com/adapter
77

88
## Configuration options
99

10-
<table>
11-
<tbody>
12-
<tr>
13-
<th>
14-
Title
15-
</th>
16-
<th>
17-
Description
18-
</th>
19-
<th>
20-
Type
21-
</th>
22-
<th>
23-
Default Value
24-
</th>
25-
</tr>
26-
<tr>
27-
<td>
28-
<code>allowedExtensions</code>
29-
</td>
30-
<td>
31-
List of allowed file extensions. For example, <code>'jpg
32-
jpeg gif png svg'</code>. If set to "false" - then no
33-
extension is allowed, "true" - any extension is allowed.
34-
</td>
35-
<td>
36-
Boolean/String
37-
</td>
38-
<td>
39-
<code>false</code>
40-
</td>
41-
</tr>
42-
<tr>
43-
<td>
44-
<code>component</code>
45-
</td>
46-
<td>
47-
The path to the component’s JS constructor in terms of
48-
RequireJS.
49-
</td>
50-
<td>
51-
String
52-
</td>
53-
<td>
54-
<code>Magento_Ui/js/form/element/file-uploader</code>
55-
</td>
56-
</tr>
57-
<tr>
58-
<td>
59-
<code>dropZone</code>
60-
</td>
61-
<td>
62-
CSS selector of a drop zone element.
63-
</td>
64-
<td>
65-
String
66-
</td>
67-
<td>
68-
<code>[data-role=drop-zone]</code>
69-
</td>
70-
</tr>
71-
<tr>
72-
<td>
73-
<code>isMultipleFiles</code>
74-
</td>
75-
<td>
76-
Defines whether multiple files can be uploaded.
77-
</td>
78-
<td>
79-
Boolean
80-
</td>
81-
<td>
82-
<code>false</code>
83-
</td>
84-
</tr>
85-
<tr>
86-
<td>
87-
<code>maxFileSize</code>
88-
</td>
89-
<td>
90-
Defines the maximum allowed file size in bytes.
91-
</td>
92-
<td>
93-
Boolean/Number
94-
</td>
95-
<td>
96-
<code>false</code>
97-
</td>
98-
</tr>
99-
<tr>
100-
<td>
101-
<code>placeholderType</code>
102-
</td>
103-
<td>
104-
Defines the preview type. (When set to
105-
<code>document</code>, the file information is displayed.)
106-
</td>
107-
<td>
108-
<code>document</code> | <code>image</code> |
109-
<code>video</code>
110-
</td>
111-
<td>
112-
<code>document</code>
113-
</td>
114-
</tr>
115-
<tr>
116-
<td>
117-
<code>previewTmpl</code>
118-
</td>
119-
<td>
120-
Path to the file's preview <code>.html</code> template
121-
</td>
122-
<td>
123-
String
124-
</td>
125-
<td>
126-
<code>ui/form/element/uploader/preview</code>
127-
</td>
128-
</tr>
129-
<tr>
130-
<td>
131-
<code>template</code>
132-
</td>
133-
<td>
134-
The path to the field’s general <code>.html</code>
135-
template.
136-
</td>
137-
<td>
138-
String
139-
</td>
140-
<td>
141-
<code>ui/form/element/uploader/uploader</code>
142-
</td>
143-
</tr>
144-
<tr>
145-
<td>
146-
<code>uploaderConfig</code>
147-
<ul>
148-
<li><code>dataType</code>
149-
</li>
150-
<li><code>sequentialUploads</code>
151-
</li>
152-
<li><code>formData</code>
153-
</li>
154-
</ul>
155-
</td>
156-
<td>
157-
Configuration passed to jquery-file-upload plugin:
158-
<ul>
159-
<li>type of data
160-
</li>
161-
<li>sequential data uploads
162-
</li>
163-
<li>additional form data
164-
</li>
165-
</ul>
166-
</td>
167-
<td>
168-
Object
169-
<ul>
170-
<li>String
171-
</li>
172-
<li>Boolean
173-
</li>
174-
<li>Object
175-
</li>
176-
</ul>
177-
</td>
178-
<td>
179-
<ul>
180-
<li>
181-
<code>json</code>
182-
</li>
183-
<li><code>true</code>
184-
</li>
185-
<li>
186-
<code>{ 'form_key': window.FORM_KEY }</code>
187-
</li>
188-
</ul>
189-
</td>
190-
</tr>
191-
</tbody>
192-
</table>
10+
| Title | Description | Type | Default Value |
11+
| --- | --- | --- | --- |
12+
| `allowedExtensions` | List of allowed file extensions. For example, `'jpg jpeg gif png svg'`. If set to "false" - then no extension is allowed, "true" - any extension is allowed. | Boolean/String | `false` |
13+
| `component` | The path to the component’s JS constructor in terms of RequireJS. | String | `'Magento_Ui/js/form/element/file-uploader'` |
14+
| `dropZone` | CSS selector of a drop zone element. | String | `[data-role=drop-zone]` |
15+
| `isMultipleFiles` | Defines whether multiple files can be uploaded. | Boolean | `false` |
16+
| `maxFileSize` | Defines the maximum allowed file size in bytes. | Boolean/Number | `false` |
17+
| `placeholderType` | Defines the preview type. (When set to `document`, the file information is displayed.) | `document` \| `image` \| `video` | `document` |
18+
| `previewTmpl` | Path to the file's preview `.html` template | String | `ui/form/element/uploader/preview` |
19+
| `uploaderConfig` | Configuration passed to jquery-file-upload plugin. | Object | `{dataType: 'json', sequentialUploads: true, formData: {'form_key': window.FORM_KEY}}` |
19320

19421
## Examples {#example}
19522

@@ -223,6 +50,10 @@ Here is an example of how File Uploader component integrates with [Form]({{ page
22350
</form>
22451
```
22552

53+
### Result
54+
55+
![FileUploader Component example]({{ site.baseurl }}/common/images/ui_comps/ui-fileuploader-result.png)
56+
22657
## Source files
22758

22859
Extends `abstract`:

0 commit comments

Comments
 (0)