Voeg een afbeelding uploader toe | Handleiding voor Adobe Commerce-ontwikkelaars
In dit onderwerp wordt beschreven hoe u de component voor het uploaden van afbeeldingen aan uw inhoudstype kunt toevoegen, zodat eindgebruikers indien nodig afbeeldingen kunnen toevoegen vanuit de beheerdersfase.
Configuratiegegevens voor de uploader toevoegen
De eerste stap is om de afbeeldingsuploader aan uw behoeften aan te passen. Om dit te doen, moet u de . toevoegen additional_data element toe aan het configuratiebestand van uw inhoudstype om de gegevenstypen en waarden te maken die nodig zijn om de afbeeldingsuploader te initialiseren voor uw specifieke behoeften.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_PageBuilder:etc/content_type.xsd">
<type name="example_quote"
...
<additional_data>
<item name="uploaderConfig" xsi:type="array">
<item name="isShowImageUploadInstructions" xsi:type="boolean">false</item>
<item name="isShowImageUploadOptions" xsi:type="boolean">true</item>
<item name="maxFileSize" xsi:type="object">ImageMaxFileSizeDesktop</item>
<item name="allowedExtensions" xsi:type="string">jpg jpeg gif png</item>
<item name="component" xsi:type="string">Magento_PageBuilder/js/form/element/image-uploader</item>
<item name="componentType" xsi:type="string">imageUploader</item>
<item name="dataScope" xsi:type="string">background_image</item>
<item name="formElement" xsi:type="string">imageUploader</item>
<item name="uploaderConfig" xsi:type="array">
<item name="url" xsi:type="object">Magento\PageBuilder\Model\Config\ContentType\AdditionalData\Provider\Uploader\SaveUrl</item>
</item>
<item name="previewTmpl" xsi:type="string">Magento_PageBuilder/form/element/uploader/preview</item>
<item name="template" xsi:type="string">Magento_PageBuilder/form/element/uploader/preview/image</item>
<item name="mediaGallery" xsi:type="array">
<item name="openDialogUrl" xsi:type="object">Magento\PageBuilder\Model\Config\ContentType\AdditionalData\Provider\Uploader\OpenDialogUrl</item>
<item name="openDialogTitle" xsi:type="string" translate="true">Insert Images...</item>
<item name="initialOpenSubpath" xsi:type="string">wysiwyg</item>
<item name="storeId" xsi:type="object">Magento\PageBuilder\Model\Config\ContentType\AdditionalData\Provider\StoreId</item>
</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
</item>
</item>
</additional_data>
</type>
</config>
Stap 2: Maak een instantie van de uploader
Om een instantie van de afbeeldingsuploader te maken in uw voorbeeldcomponent (preview.js), importeer de Magento_PageBuilder/js/content-type/uploader component als een afhankelijkheid en roep de uploader-constructor aan, waarbij u de configuratie-opties van uw inhoudstype doorgeeft (toegevoegd in stap 1) en de andere vereiste argumenten, zoals hier getoond:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
define(['Magento_PageBuilder/js/content-type/uploader'], function (Uploader) {
Preview.prototype.getUploader = function () {
var initialImageValue = this.contentType.dataStore
.get(this.config.additional_data.uploaderConfig.dataScope, "");
return new Uploader(
"imageuploader_" + this.contentType.id,
this.config.additional_data.uploaderConfig,
this.contentType.id,
this.contentType.dataStore,
initialImageValue,
);
};
Uploader-constructorargumenten
| Argument | Type | Beschrijving | Vereist | Standaard |
|---|---|---|---|---|
name |
Draad | Wordt gebruikt om het onderdeel in het UI-register te vinden. | ja | Geen |
uploaderConfig |
Voorwerp | Initialiseert de UI-component voor het uploaden van afbeeldingen met de configuratie-instellingen van de additional_data element. |
ja | Geen |
contentTypeId |
Draad | De ID van het inhoudstype waaraan u de uploader toevoegt. | ja | Geen |
dataStore |
Gegevensopslag | De DataStore om de geselecteerde afbeelding in op te slaan. | ja | Geen |
initialValue |
Voorwerp[] | De afbeeldingswaarde die moet worden ingesteld voor de beginstatus van de uploadercomponent. | ja | Geen |
onChangeCallback |
Functie | De callback die moet worden uitgevoerd wanneer de eindgebruiker een afbeelding selecteert. | nee | Magento slaat de afbeelding op in de meegeleverde dataStore gebruik makend van uploaderConfig.dataScope als de sleutel. |
onDeleteCallback |
Functie | De callback die moet worden uitgevoerd wanneer de eindgebruiker de huidige afbeelding uit de opslag verwijdert. | nee | Magento verwijdert de afbeelding van naar de verstrekte dataStore gebruik makend van uploaderConfig.dataScope als de sleutel. |
Stap 3: Voeg opmaak toe voor de uploader
Om de afbeeldingsuploader toe te voegen aan uw voorbeeldsjabloon (preview.html), gebruik Knockout’s scope bindingselement om een instantie van uw geconfigureerde uploadercomponent uit het Magento-register weer te geven, zoals hier wordt weergegeven:
1
2
3
4
5
6
7
<div ...>
...
<scope args="getUploader().getUiComponent()">
<render />
</scope>
...
</div>
Wanneer een eindgebruiker een bestand uit de mediabrowser verwijdert, activeert Magento de fileDeleted evenement op het raam met de mediabrowser naamruimte. Het doorgegeven argument is een object dat de . bevat ids eigenschap, wat een reeks ID-tekenreeksen is voor elk van de verwijderde bestanden. Magento voegt de ID’s van de geselecteerde bestanden toe aan de objecten die door de addFile en processFile methoden in de component voor het uploaden van afbeeldingen.
