div(
@dragenter="onDragEnter"
:class=`[
"gb-field-image-uploader",
"gb-field-image-uploader--" + size,
"gb-field-image-uploader--" + computedTheme,
"gb-field-image-uploader--" + computedStatus,
{
"gb-field-image-uploader--disabled": disabled,
"gb-field-image-uploader--dragging": dragging || dragError,
"gb-field-image-uploader--full-width": fullWidth
}
]`
)
.gb-field-image-uploader__container
div(
v-if="label"
class="gb-field-image-uploader__information"
)
field-label(
:for-field="uuid"
:required="required"
:size="size"
:theme="theme"
class="gb-field-image-uploader__label"
) {{ label }}
field-message(
v-if="fieldMessageStatus"
:message="fieldMessageContent"
:size="size"
:status="fieldMessageStatus"
:theme="theme"
class="gb-field-image-uploader__message"
)
label(
@keypress.prevent="onLabelKeypress"
:for="uuid"
class="gb-field-image-uploader__upload js-tag-for-autofocus"
tabindex="0"
)
span.gb-field-image-uploader__focuser
base-icon(
name="cloud_upload"
class="gb-field-image-uploader__icon"
)
input(
@change="onFieldChange"
:disabled="disabled"
:id="uuid"
:name="name"
accept="image/*"
class="gb-field-image-uploader__field"
type="file"
)
div(
v-if="hasPreview && innerValue"
class="gb-field-image-uploader__preview"
)
div(
class="gb-field-image-uploader__image"
:style=`{
backgroundImage: innerValue ? "url(" + innerValue + ")" : null
}`
)
base-button(
v-if="clearable"
@confirm="onRemoveImage"
:color="theme === 'dark' ? 'white' : 'black'"
:confirmation="true"
:full-width="true"
:reverse="true"
class="gb-field-image-uploader__remove"
left-icon="delete_outline"
size="mini"
) Remove image
div(
v-if="dragging || dragError"
@dragenter="onDragEnter"
@dragleave="onDragLeave"
@dragover="onDragOver"
@drop="onDrop"
:class=`[
"gb-field-image-uploader__dropzone",
{
"gb-field-image-uploader__dropzone--invalid": dragError
}
]`
)
base-icon(
:name="dragError ? 'cloud_off' : 'cloud_upload'"
class="gb-field-image-uploader__icon"
)
span(
v-if="dragError"
class="gb-field-image-uploader__error"
) The file is not an image