Media Upload

<sw-media-upload>

ready
The sw-media-upload component is used wherever an upload is needed. It supports drag & drop-, file- and url-upload and comes in various forms.

Usage

<sw-media-upload
    uploadTag="my-upload-tag"
    variant="regular"
    allowMultiSelect="false"
    variant="regular"
    autoUpload="true"
    label="My image-upload">
</sw-media-upload>

Component properties

Property name Type Default
source [ {}, {} ]
variant String regular
uploadTag String
allowMultiSelect Boolean true
label String
defaultFolder String
targetFolderId String
helpText String

Methods

Method name Parameters
createdComponent No parameters
mountedComponent No parameters
beforeDestroyComponent No parameters
onDrop event
onDropMedia dragData
onDragEnter No parameters
onDragLeave event
stopEventPropagation event
onClickUpload No parameters
openUrlModal No parameters
closeUrlModal No parameters
toggleShowUrlFields No parameters
onClickOpenMediaSidebar No parameters
onRemoveMediaItem No parameters
onUrlUpload
onFileInputChange No parameters
handleUpload newMediaFiles
getMediaEntityForUpload No parameters
getDefaultFolderId No parameters
handleUploadStoreEvent

Imports

  • src/core/factory/criteria.factory
  • ./sw-media-upload.html.twig
  • ./sw-media-upload.scss

Watcher

  • defaultFolder

Mixins

  • notification

SASS variables

Variable name Value
$sw-media-upload-border-color $color-steam-cloud ($color-gray-300)
$sw-media-upload-color-highlighted $color-shopware-blue ($color-shopware-brand-500)
$sw-media-upload-color-switch-mode $color-shopware-blue ($color-shopware-brand-500)
$sw-media-upload-border-radius $border-radius-default (4px)
$sw-media-upload-upload-background-color $color-light-gray ($color-gray-100)
$sw-media-upload-background-color-highlighted $color-cadet-blue ($color-shopware-brand-50)
$sw-media-upload-caption-font-size $font-size-large (18px)
$sw-media-upload-caption-icon-color $color-steam-cloud ($color-gray-300)

Twig blocks

  • sw_media_upload_compact_button_file_upload
  • sw_media_upload_compact_button_context_menu
  • sw_media_upload_compact_url_form
  • sw_media_upload_compact
  • sw_media_upload_regular_header_label
  • sw_media_upload_regular_header_helptext
  • sw_media_upload_regular_header_switch
  • sw_media_upload_regular_header
  • sw_media_upload_regular_preview_file
  • sw_media_upload_regular_preview_fallback
  • sw_media_upload_regular_caption
  • sw_media_upload_preview
  • sw_media_upload_regular_actions_url
  • sw_media_upload_regular_upload_button
  • sw_media_upload_regular_media_sidebar_button
  • sw_media_upload_regular_actions_add
  • sw_media_upload_actions
  • sw_media_upload_regular_drop_zone
  • sw_media_upload_regular
  • sw_media_upload_file_input
  • sw_media_upload