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
Copy file name to clipboardExpand all lines: docs/how-to/how-to-use-image-uploader.md
+20-13Lines changed: 20 additions & 13 deletions
Original file line number
Diff line number
Diff line change
@@ -1,12 +1,12 @@
1
-
# How to add the Image Uploader
1
+
# How to add an image uploader
2
2
3
-
This topic describes how to add the image Uploader component to your content type. Find the source code for the Uploader here: `app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/uploader.ts`).
3
+
This topic describes how to add the image uploader component to your content type so that end-users can add images to a page.
4
4
5
5
6
6
7
-
## Step 1: Add configuration data for the Uploader
7
+
## Step 1: Add configuration data for the uploader
8
8
9
-
Use the `additional_data` element in your content type's config file to add a custom configuration for the image Uploader:
9
+
The first step is to customize the image uploader to suit your needs. To do this, you must add the `additional_data` element to your content type's config file, then use the `item` elements to create the data types and values to initialize the image uploader to meet your specific needs.
10
10
11
11
```xml
12
12
<?xml version="1.0"?>
@@ -43,9 +43,17 @@ Use the `additional_data` element in your content type's config file to add a cu
43
43
</config>
44
44
```
45
45
46
-
## Step 2: Create an instance of the Uploader
46
+
The Page Builder image uploader provides a wrapper around the Magento [ImageUploader component](https://devdocs.magento.com/guides/v2.3/ui_comp_guide/components/image-uploader/), which extends the Magento [FileUploader component](https://devdocs.magento.com/guides/v2.3/ui_comp_guide/components/ui-fileuploader.html). The documentation at those links describes most of the configuration properties. You can find the other properties (shown in the `additional_data` entries above) within these source files:
To create an instance of the image uploader in your preview component (`preview.js`), import the `Magento_PageBuilder/js/content-type/uploader` component as a dependency and call the Uploader constructor, passing in your content type's configuration options (added in step 1) and the other required arguments, as shown here :
50
+
51
+
**[Are these all the settings? Which of these settings is required?]**
52
+
53
+
54
+
## Step 2: Create an instance of the uploader
55
+
56
+
To create an instance of the image uploader in your preview component (`preview.js`), import the `Magento_PageBuilder/js/content-type/uploader` component as a dependency and call the uploader constructor, passing in your content type's configuration options (added in step 1) and the other required arguments, as shown here :
49
57
50
58
```js
51
59
define(['Magento_PageBuilder/js/content-type/uploader'], function (Uploader) {
@@ -64,22 +72,22 @@ define(['Magento_PageBuilder/js/content-type/uploader'], function (Uploader) {
| `name` | String | Used to locate the component in the UI registry. | yes | None |
73
81
| `uploaderConfig` | Object | Initializes the image uploader UI component with the configuration settings from the `additional_data` element. | yes | None |
74
-
| `contentTypeId` | String | The ID of the content type you are adding the Uploader to. | yes | None |
82
+
| `contentTypeId` | String | The ID of the content type you are adding the uploader to. | yes | None |
75
83
| `dataStore` | DataStore | The DataStore to store the selected image in. | yes | None |
76
-
| `initialValue` | Object[] | The image value to set for the initial state of the Uploader component. | yes | None |
84
+
| `initialValue` | Object[] | The image value to set for the initial state of the uploader component. | yes | None |
77
85
| `onChangeCallback` | Function | The callback to execute when the end-user selects an image. | no | Magento saves the image to the provided `dataStore` using `uploaderConfig.dataScope` as the key. |
78
86
| `onDeleteCallback` | Function | The callback to execute when the end-user deletes the current image from storage. | no | Magento removes the image from to the provided `dataStore` using `uploaderConfig.dataScope` as the key. |
79
87
80
-
## Step 3: Add markup for the Uploader
88
+
## Step 3: Add markup for the uploader
81
89
82
-
To add the image Uploader to your preview template (`preview.html`), use Knockout's `scope` binding element to render an instance of your configured Uploader component from the Magento registry, as shown here:
90
+
To add the image uploader to your preview template (`preview.html`), use Knockout's `scope` binding element to render an instance of your configured uploader component from the Magento registry, as shown here:
83
91
84
92
``` html
85
93
<div ...>
@@ -91,6 +99,5 @@ To add the image Uploader to your preview template (`preview.html`), use Knockou
91
99
</div>
92
100
```
93
101
94
-
95
102
{: .bs-callout .bs-callout-info }
96
-
When an end-user deletes a file from the media browser, Magento triggers the `fileDeleted` event on the window with the `mediabrowser` namespace. The passed argument is an object containing the `ids` property, which is an array of ID strings for each of the deleted files. Magento adds the IDs of the selected files in the objects dispatched by the `addFile` and `processFile` methods inside the image Uploader component.
103
+
When an end-user deletes a file from the media browser, Magento triggers the `fileDeleted` event on the window with the `mediabrowser` namespace. The passed argument is an object containing the `ids` property, which is an array of ID strings for each of the deleted files. Magento adds the IDs of the selected files in the objects dispatched by the `addFile` and `processFile` methods inside the image uploader component.
0 commit comments