Skip to content

Commit 41ca7f2

Browse files
shrieleneenathanjosiah
shrielenee
authored and
nathanjosiah
committed
MC-3420: Documentation for MC-2294
- Added documentation for changes in MC-2294
1 parent 65b084f commit 41ca7f2

File tree

1 file changed

+34
-34
lines changed

1 file changed

+34
-34
lines changed

‎app/code/Magento/PageBuilder/docs/image-uploader.md

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -107,40 +107,38 @@ Use `additional_data` in your `<YourModule>/view/base/pagebuilder/content_type/<
107107

108108
To update the `<YourModule>/view/adminhtml/web/js/content-type/<content_type_name>/preview.js` file:
109109

110-
1. Import the `Magento_PageBuilder/js/content-type/uploader` component as dependency:
111-
112-
For example:
113-
114-
``` js
115-
define(['Magento_PageBuilder/js/content-type/uploader'], function (Uploader) {
116-
```
117-
118-
**Constructor arguments**
119-
120-
| Argument | Type | Description | Required | Default |
121-
| ------------------ | --------- | ----------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------- |
122-
| `name` | string | Used to locate the component in the UIRegistry once it is created. | true | None |
123-
| `uploaderConfig` | object | Used to initialize the Image Uploader UIComponent. | true | None |
124-
| `contentTypeId` | string | The ID of the parent content type this will be used in. | true | None |
125-
| `dataStore` | DataStore | The DataStore that the selected image should be stored in. | true | None |
126-
| `initialValue` | Object[] | The value that should be used for the initial state of the component. | true | None |
127-
| `onChangeCallback` | Function | A callback that will be called when an image is selected. | false | The image will be saved to the provided `dataStore` using `uploaderConfig.dataScope` as the key. |
128-
| `onDeleteCallback` | Function | A callback that will be called when the current used image is deleted from storage. | false | The image will be removed from to the provided `dataStore` using `uploaderConfig.dataScope` as the key. |
129-
130-
An example extracted from the image content type:
131-
132-
```js
133-
var dataStore = this.parent.dataStore.get();
134-
var initialImageValue = dataStore[this.config.additional_data.uploaderConfig.dataScope] || "";
135-
136-
this.uploader = new Uploader(
137-
'imageuploader_' + this.parent.id,
138-
this.config.additional_data.uploaderConfig,
139-
this.parent.id,
140-
this.parent.dataStore,
141-
initialImageValue,
142-
);
143-
```
110+
1. Import the 'Magento_PageBuilder/js/content-type/uploader' component as a dependency:
111+
112+
``` js
113+
define(['Magento_PageBuilder/js/content-type/uploader'], function (Uploader) {
114+
```
115+
116+
**Constructor arguments**
117+
118+
| Argument | Type | Description | Required | Default |
119+
| ------------------ | --------- | ----------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------- |
120+
| `name` | String | Used to locate the component in the UI registry once it is created. | yes | None |
121+
| `uploaderConfig` | Object | Initializes the image uploader UI component. | yes | None |
122+
| `contentTypeId` | String | The ID of the parent content type this will be used in. | yes | None |
123+
| `dataStore` | DataStore | The DataStore that the selected image should be stored in. | yes | None |
124+
| `initialValue` | Object[] | The value to be used for the initial state of the component. | yes | None |
125+
| `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. |
126+
| `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. |
127+
128+
The following is an example extracted from the image content type:
129+
130+
```js
131+
var dataStore = this.parent.dataStore.get();
132+
var initialImageValue = dataStore[this.config.additional_data.uploaderConfig.dataScope] || "";
133+
134+
this.uploader = new Uploader(
135+
'imageuploader_' + this.parent.id,
136+
this.config.additional_data.uploaderConfig,
137+
this.parent.id,
138+
this.parent.dataStore,
139+
initialImageValue,
140+
);
141+
```
144142
145143
2. Add configuration for the uploader in the `<content-type-name>.xml` file to initialize the uploader.
146144
@@ -170,3 +168,5 @@ Update the preview template file, `bluefoot/app/code/Magento/PageBuilder/view/ad
170168
...
171169
</div>
172170
```
171+
172+
**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.

0 commit comments

Comments
 (0)