> {% block sw\_cms\_element\_link\_tile\_config\_media\_upload %}
> \
> \ v-model="element.config\[mediaField.name\]"
> :label="$tc('vc-scholl.sw-cms.elements.link-tile.config.label.' + mediaField.name)"
> value-types="entity"
> entity="media"
> \>
> \ :key="mediaField.name + '-upload-listener'"
> :upload-tag="mediaField.getUploadTag()"
> auto-upload
> @media-upload-finish="mediaField.onImageUpload"
> /\>
> \ :key="mediaField.name + '-media-upload'"
> variant="regular"
> :upload-tag="mediaField.getUploadTag()"
> :source="mediaField.getMedia()"
> :allow-multi-select="false"
> :default-folder="cmsPageState.pageEntityName"
> :caption="$tc('sw-cms.elements.general.config.caption.mediaUpload')"
> @media-upload-sidebar-open="mediaField.onOpenMediaModal"
> @media-upload-remove-image="mediaField.onImageRemove"
> /\>
>
> \
slot="preview"
> slot-scope="{ demoValue }"
> class="sw-cms-el-config-link-tile\_\_mapping-preview"
> \>
> \![]()
v-if="demoValue.url"
> :src="demoValue.url"
> alt=""
> \>
> \ v-else
> class="sw-cms-el-config-link-tile\_\_preview-info"
> variant="info"
> \>
> {{ $tc('sw-cms.detail.label.mappingEmptyPreview') }}
> \
> \
> \
> \
> {% endblock %}
>
> {% block sw\_cms\_element\_link\_tile\_config\_media\_modals %}
> \
> \ :key="mediaField.name + '-media-modal'"
> v-if="mediaField.mediaModalIsOpen"
> variant="regular"
> :caption="$tc('sw-cms.elements.general.config.caption.mediaUpload')"
> :entity-context="cmsPageState.entityName"
> :allow-multi-select="false"
> :initial-folder-id="cmsPageState.defaultMediaFolderId"
> @media-upload-remove-image="mediaField.onImageRemove"
> @media-modal-selection-change="mediaField.onSelectionChanges"
> @modal-close="mediaField.onCloseModal"
> /\>
> \
> {% endblock %}
> \
> {% endblock %}
> \`\`\`
>
> \
>
> \
> \media-field.mixin.js\
>
> \`\`\`js
> import MediaField from './media-field'
>
> const { Mixin } = Shopware;
>
> Mixin.register('cms-media-field', {
>
> inject: \['repositoryFactory'\],
>
> computed: {
> mediaRepository() {
> return this.repositoryFactory.create('media');
> },
> },
>
> methods: {
> createMediaField(mediaFieldName) {
> let media;
>
> if (
> this.element?.data &&
> this.element.data\[mediaFieldName\] &&
> this.element.data\[mediaFieldName\].id
> ) {
> media = this.element.data\[mediaFieldName\];
> } else {
> media = this.element.config\[mediaFieldName\].value
> }
>
> return new MediaField({
> name: mediaFieldName,
> parent: this,
> mediaRepository: this.mediaRepository,
> media,
> })
> }
> }
>
> });
> \`\`\`
>
> \
>
>
> \
> \media-field.js\
>
> \`\`\`js
> export default class MediaField {
> constructor({
> name,
> parent,
> mediaRepository,
> media = null,
> mediaModalIsOpen = false,
> initialFolderId = null,
> }) {
> if (!name) {
> throw new Error('MediaField requires a name');
> }
>
> if (!parent) {
> throw new Error('MediaField requires a parent');
> }
>
> if (!mediaRepository) {
> throw new Error('MediaField requires a mediaRepository');
> }
>
> this.name = name;
> this.parent = parent;
> this.mediaRepository = mediaRepository;
> this.media = media;
> this.mediaModalIsOpen = mediaModalIsOpen;
> this.initialFolderId = initialFolderId;
>
> this.onImageUpload = this.onImageUploadProxy.bind(this)
> this.onImageRemove = this.onImageRemoveProxy.bind(this)
> this.onOpenMediaModal = this.onOpenMediaModalProxy.bind(this)
> this.onCloseModal = this.onCloseModalProxy.bind(this)
> this.onSelectionChanges = this.onSelectionChangesProxy.bind(this)
> }
>
> getName() {
> return this.name;
> }
>
> isMediaModalOpen() {
> return this.mediaModalIsOpen;
> }
>
> setMediaModalIsOpen(mediaModalIsOpen) {
> this.mediaModalIsOpen = mediaModalIsOpen;
> }
>
> getMedia() {
> return this.media;
> }
>
> setMedia(media = null) {
> this.media = media;
> }
>
> getInitialFolderId() {
> return this.initialFolderId;
> }
>
> setInitialFolderId(initialFolderId) {
> this.initialFolderId = initialFolderId;
> }
>
> getUploadTag() {
> return \`cms-element-media-config-${this.parent.element.id}-${this.name}\`;
> }
>
> async onImageUploadProxy({ targetId }) {
> const mediaEntity = await this.mediaRepository.get(targetId);
>
> this.updateParentElementConfigValue(mediaEntity.id);
> this.setMedia(mediaEntity);
>
> this.updateParentElementData(mediaEntity);
>
> this.updateParent()
> }
>
> onImageRemoveProxy() {
> this.updateParentElementConfigValue(null);
> this.setMedia(null);
>
> this.updateParentElementData();
>
> this.updateParent();
> }
>
> onOpenMediaModalProxy() {
> this.setMediaModalIsOpen(true);
> }
>
> onCloseModalProxy() {
> this.setMediaModalIsOpen(false);
> }
>
> onSelectionChangesProxy(mediaEntity) {
> const media = mediaEntity\[0\];
> this.updateParentElementConfigValue(media.id);
> this.setMedia(media);
>
> this.updateParentElementData(media);
>
> this.updateParent();
> }
>
> updateParentElementData(media = null) {
> if (!this.parent.element.data) {
> this.parent.$set(this.parent.element, 'data', {
> \[this.name\]: media
> });
> } else {
> this.parent.$set(this.parent.element.data, this.name, media);
> }
> }
>
> updateParentElementConfigValue(mediaId) {
> this.parent.element.config\[this.name\].value = mediaId;
> }
>
> updateParent() {
> this.parent.$emit('element-update', this.parent.element);
> }
> }
> \`\`\`
>
> \
Das war für mich die Lösung. Anfangs hat er das mixin nicht gefunden, wenn ich es in der main.js einbinde. Erst als ich es in der /config/index.js imported habe, hat er es gefunden.
---
Ich versuche mich hier gerade auf ähnliche Weise an einem Image-Upload, habe die wesentlichen Dinge übernommen vom image Cms Element von SW. Ich bekomme aber das data Attribut nicht befüllt. Das data Attribut bleibt bei mir null. Hat jemand einen Hint wie ich hier weiterkomme?
Das einzige was ich finde ist das hier:
`this.initElementData('image');`
Und mir ist noch nicht so ganz klar was hier passiert.
Wovon hängt ab ob data gefüllt ist und wie wird es gefüllt?
---
Ok, durch diesen Thread bin ich einen Schritt weiter: [https://forum.shopware.com/t/bild-wird-in-cms-element-in-der-administration-nicht-richtig-angezeigt/71270](https://forum.shopware.com/t/bild-wird-in-cms-element-in-der-administration-nicht-richtig-angezeigt/71270)
Aber brauche ich wirklich einen eigenen DataResolver. Für sowas einfaches wie einen Image-Upload müsste es doch was geben oder? Kann ich das irgendwie analog machen wie das image Cms Element von SW?
Aber wie und wo passiert das?