How To Add Custom Media In Admin Config Settings In Shopware 6

When working with the Shopware 6 admin interface, you can upload the file in the Shopware 6 system configuration. The admin interface in Shopware 6 accepts all types of input types such as text files, radio buttons, drop-downs, and multiple selects that are plain, encrypted, or serialized and then displayed in various ways such as grids, forms, simple fields, and images.

Shopware, in particular, allows you to extend the default interface, allowing you to freely add fields. In this guide, we will learn How to Add Custom Media in Shopware 6 Admin Config Settings.

1. Add the code to this location

custom/plugins/PluginName/src/Resources/app/administration/src/module/sw-cms/elements/elementFolderName/index.js

code example : To add custom Media

defaultConfig: {
customImageMedia:{
source: 'static',
value: '',
entity: {
name: 'customImageMedia'
}
}
}


2. After that you need to add block in the config template

add the given code on the given location :

custom/plugins/PluginName/src/Resources/app/administration/src/module/sw-cms/elements/elementFolderName/config/FileTemplateName.html.twig

{% block sw_cms_element_image_config_customImageMedia_upload %}
<sw-cms-mapping-field label="Image" valueTypes="entity" entity="customImageMedia" v-model="element.config.customImageMedia">
<sw-media-upload-v2 variant="regular"
:uploadTag="uploadCustomImageMediaTag"
:source="previewCustomImageMediaSource"
:allowMultiSelect="false"
:defaultFolder="cmsPageState.pageEntityName"
:caption="$tc('sw-cms.elements.general.config.caption.mediaUpload')"
@media-upload-sidebar-open="onOpenCustomImageMediaModal"
@media-upload-remove-image="onCustomImageMediaRemove">
</sw-media-upload-v2>
</sw-cms-mapping-field>
<sw-upload-listener
:uploadTag="uploadCustomImageMediaTag"
autoUpload
@media-upload-finish="onCustomImageMediaUpload">
</sw-upload-listener>
{% endblock %}
{% block sw_cms_element_image_config_customImageMedia_modal %}
<sw-media-modal-v2
variant="regular"
v-if="customImageMediaModalIsOpen"
:caption="$tc('sw-cms.elements.general.config.caption.mediaUpload')"
:entityContext="cmsPageState.entityName"
:allowMultiSelect="false"
:initialFolderId="cmsPageState.defaultMediaFolderId"
@media-upload-remove-image="onCustomImageMediaRemove"
@media-modal-selection-change="onCustomImageMediaSelectionChanges"
@modal-close="onCustomImageMediaCloseModal">
</sw-media-modal-v2>
{% endblock %}


3. After that you need to add the given code on the given location:

custom/plugins/PluginName/src/Resources/app/administration/src/module/sw-cms/elements/elementFolderName/config/index.js


data() {
return {
initialFolderId: null,
customImageMediaModalIsOpen: false
};
},

computed: {
uploadCustomImageMediaTag() {
return `cms-element-advancedslider-customImageMedia-config-${this.element.id}`;
},
previewCustomImageMediaSource() {
if (this.element.data && this.element.data.customImageMedia && this.element.data.customImageMedia.id) {
return this.element.data.customImageMedia;
}
return this.element.config.customImageMedia.value;
},
customImageMediaRepository() {
return this.repositoryFactory.create(‘media’);
}
}

methods: {
async createdComponent() {
this.initElementConfig(‘media’);
},
onOpenCustomImageMediaModal() {
this.customImageMediaModalIsOpen = true;
},
onCustomImageMediaRemove() {
this.element.config.customImageMedia.value = null;
this.updateCustomImageMediaElementData();
this.$emit(‘element-update’, this.element);
},
async onCustomImageMediaUpload({ targetId }) {
const mediaEntity = await this.customImageMediaRepository.get(targetId);

this.element.config.customImageMedia.value = mediaEntity.id;

this.updateCustomImageMediaElementData(mediaEntity);

this.$emit(‘element-update’, this.element);
},
updateCustomImageMediaElementData(customImageMedia = null) {
const customImageMediaId = customImageMedia === null ? null : customImageMedia.id;
if (!this.element.data) {
this.$set(this.element, ‘data’, { customImageMediaId });
this.$set(this.element, ‘data’, { customImageMedia });
} else {
this.$set(this.element.data, ‘customImageMediaId’, customImageMediaId);
this.$set(this.element.data, ‘customImageMedia’, customImageMedia);
}
},
onCustomImageMediaCloseModal() {
this.customImageMediaModalIsOpen = false;
},

onCustomImageMediaSelectionChanges(mediaEntity) {
const customImageMedia = mediaEntity[0];
this.element.config.customImageMedia.value = customImageMedia.id;
this.updateCustomImageMediaElementData(customImageMedia);
this.$emit(‘element-update’, this.element);
},
}

4. Afterwards you will get the output like the given image in the element config setting.

5. You can upload media by clicking on upload file select image then save, after that, you will find the config setting image like the given screenshot.