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
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`).
4
4
5
-
This topic describes how to add a reusable image uploader component to the PageBuilder stage for a content type.
5
+
6
6
7
-
## Overview
7
+
## Step 1: Add configuration data for the Uploader
8
8
9
-
To add image uploader customization to PageBuilder:
10
-
- [Add configuration for the uploader](#add-configuration-for-the-uploader)
11
-
- [Update the `<YourModule>/view/adminhtml/web/js/content-type/<content_type_name>/preview.js` file {#js-file}](#js-file)
12
-
- [Update the preview template to display the uploader component {#preview}](#preview)
13
-
14
-
## Add configuration for the uploader {#add-configuration-for-the-uploader}
15
-
16
-
Use `additional_data` in your `<YourModule>/view/base/pagebuilder/content_type/<content-type-name>.xml` XML config file to add the image uploader custom configuration to a content type:
9
+
Use the `additional_data` element in your content type's config file to add a custom configuration for the image Uploader:
| `contentTypeId` | String | The ID of the parent content type this will be used in. | yes | None |
69
-
| `dataStore` | DataStore | The DataStore that the selected image should be stored in. | yes | None |
70
-
| `initialValue` | Object[] | The value to be used for the initial state of the component. | yes | None |
71
-
| `onChangeCallback` | Function | A callback that will be called when an image is selected. | no | The image will be saved to the provided `dataStore` using `uploaderConfig.dataScope` as the key. |
72
-
| `onDeleteCallback` | Function | A callback that will be called when the current used image is deleted from storage. | no | The image will be removed from to the provided `dataStore` using `uploaderConfig.dataScope` as the key. |
46
+
## Step 2: Create an instance of the Uploader
73
47
74
-
The following is an example extracted from the image content type:
48
+
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 :
75
49
76
-
```js
77
-
var dataStore =this.parent.dataStore.getState();
78
-
var initialImageValue = dataStore[this.config.additional_data.uploaderConfig.dataScope] ||"";
79
-
80
-
this.uploader=newUploader(
81
-
'imageuploader_'+this.parent.id,
82
-
this.config.additional_data.uploaderConfig,
83
-
this.parent.id,
84
-
this.parent.dataStore,
85
-
initialImageValue,
86
-
);
87
-
```
50
+
```js
51
+
define(['Magento_PageBuilder/js/content-type/uploader'], function (Uploader) {
| `name` | String | Used to locate the component in the UI registry. | yes | None |
73
+
| `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 |
75
+
| `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 |
77
+
| `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
+
| `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. |
103
79
104
-
## Update the preview template to display the uploader component {#preview}
80
+
## Step 3: Add markup for the Uploader
105
81
106
-
Update the preview template file, `bluefoot/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/<content-type-name>/<ppearance_name>/preview.html`, to display the uploader component:
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:
107
83
108
84
``` html
109
-
<div>
85
+
<div...>
110
86
...
111
87
<scope args="getUploader().getUiComponent()">
112
88
<render />
@@ -115,4 +91,6 @@ Update the preview template file, `bluefoot/app/code/Magento/PageBuilder/view/ad
115
91
</div>
116
92
```
117
93
118
-
**Note:** When a file is deleted from the media browser, the `fileDeleted` event is triggered 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. The IDs of the selected files are provided in the objects dispatched by the `addFile` and `processFile` methods inside the image uploader UI Component.
94
+
95
+
{: .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.
0 commit comments