You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
59 lines
3.2 KiB
59 lines
3.2 KiB
mixin renderFileUploadImage (actionUrl, containerId, imageId, imageClass, defaultImage, currentImage, cropperOptions)
|
|
div(id= containerId).dtp-file-upload
|
|
form(method="POST", action= actionUrl, enctype="multipart/form-data", onsubmit= "return dtp.app.submitImageForm(event);").uk-form
|
|
.uk-margin
|
|
.uk-card.uk-card-default.uk-card-small
|
|
.uk-card-body
|
|
div(uk-grid).uk-flex-middle.uk-flex-center
|
|
div(class="uk-width-1-1 uk-width-auto@m")
|
|
.upload-image-container.size-512
|
|
if !!currentImage
|
|
img(id= imageId, src= `/image/${currentImage._id}`, class= imageClass).sb-large
|
|
else
|
|
img(id= imageId, src= defaultImage, class= imageClass).sb-large
|
|
|
|
div(class="uk-width-1-1 uk-width-auto@m")
|
|
.uk-text-small.uk-margin(hidden= !!currentImage)
|
|
if !currentImage
|
|
#file-select
|
|
.uk-margin(class="uk-text-center uk-text-left@m")
|
|
span.uk-text-middle Select an image
|
|
div(uk-form-custom).uk-margin-small-left
|
|
input(
|
|
type="file",
|
|
formenctype="multipart/form-data",
|
|
accept=".jpg,.png,image/jpeg,image/png",
|
|
data-file-select-container= containerId,
|
|
data-file-select="test-image-upload",
|
|
data-file-size-element= "file-size",
|
|
data-file-max-size= 15 * 1024000,
|
|
data-image-id= imageId,
|
|
data-cropper-options= cropperOptions,
|
|
onchange="return dtp.app.selectImageFile(event);",
|
|
)
|
|
button(type="button", tabindex="-1").uk-button.dtp-button-default Select
|
|
|
|
#file-info(class="uk-text-center uk-text-left@m", hidden)
|
|
#file-name.uk-text-bold
|
|
if currentImage
|
|
div resolution: #[span#image-resolution-w= numeral(currentImage.metadata.width).format('0,0')]x#[span#image-resolution-h= numeral(currentImage.metadata.height).format('0,0')]
|
|
div size: #[span#file-size= numeral(currentImage.metadata.size).format('0,0.00b')]
|
|
div last modified: #[span#file-modified= moment(currentImage.created).format('MMM DD, YYYY')]
|
|
else
|
|
div resolution: #[span#image-resolution-w 512]x#[span#image-resolution-h 512]
|
|
div size: #[span#file-size N/A]
|
|
div last modified: #[span#file-modified N/A]
|
|
|
|
.uk-card-footer
|
|
div(class="uk-flex-center", uk-grid)
|
|
#remove-btn(hidden= !currentImage).uk-width-auto
|
|
button(
|
|
type= "button",
|
|
data-image-type= imageId,
|
|
onclick= "return dtp.app.removeImageFile(event);",
|
|
).uk-button.uk-button-danger Remove
|
|
|
|
#file-save-btn(hidden).uk-width-auto
|
|
button(
|
|
type="submit",
|
|
).uk-button.uk-button-primary Save
|
|
|