152 lines
5.8 KiB
HTML
152 lines
5.8 KiB
HTML
<form ng-controller="Umbraco.Overlays.MediaPickerController" id="fileupload"
|
|
method="POST"
|
|
enctype="multipart/form-data"
|
|
umb-image-upload="options">
|
|
|
|
<div on-drag-leave="dragLeave()"
|
|
on-drag-end="dragLeave()"
|
|
on-drag-enter="dragEnter()">
|
|
|
|
<div class="umb-control-group umb-mediapicker-upload">
|
|
|
|
<umb-load-indicator ng-if="loading">
|
|
</umb-load-indicator>
|
|
|
|
<div class="form-search">
|
|
<i class="icon-search"></i>
|
|
<input class="umb-search-field search-query -full-width-input"
|
|
ng-model="searchOptions.filter"
|
|
localize="placeholder"
|
|
placeholder="@placeholders_search"
|
|
ng-change="changeSearch()"
|
|
type="text"
|
|
no-dirty-check />
|
|
</div>
|
|
|
|
<div class="upload-button">
|
|
<umb-button type="button"
|
|
label-key="general_upload"
|
|
action="upload()"
|
|
disabled="lockedFolder"
|
|
button-style="info"
|
|
ng-if="acceptedMediatypes.length > 0">
|
|
</umb-button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="row umb-control-group" ng-show="!searchOptions.filter">
|
|
<ul class="umb-breadcrumbs">
|
|
<li ng-hide="startNodeId != -1" class="umb-breadcrumbs__ancestor">
|
|
<a href ng-click="gotoFolder()" prevent-default>Media</a>
|
|
<span class="umb-breadcrumbs__seperator">/</span>
|
|
</li>
|
|
|
|
<li ng-repeat="item in path" class="umb-breadcrumbs__ancestor">
|
|
<a href ng-click="gotoFolder(item)" prevent-default>{{item.name}}</a>
|
|
<span class="umb-breadcrumbs__seperator">/</span>
|
|
</li>
|
|
|
|
<li class="umb-breadcrumbs__ancestor" ng-show="!lockedFolder">
|
|
<a href ng-hide="showFolderInput" ng-click="showFolderInput = true">
|
|
<i class="icon icon-add small"></i>
|
|
</a>
|
|
|
|
<input type="text"
|
|
class="umb-breadcrumbs__add-ancestor"
|
|
ng-show="showFolderInput"
|
|
ng-model="newFolderName"
|
|
ng-keydown="enterSubmitFolder($event)"
|
|
on-blur="submitFolder()"
|
|
focus-when="{{showFolderInput}}" />
|
|
</li>
|
|
</ul>
|
|
<div class="umb-loader" ng-if="creatingFolder"></div>
|
|
</div>
|
|
|
|
<umb-file-dropzone ng-if="acceptedMediatypes.length > 0 && !loading && !lockedFolder"
|
|
accepted-mediatypes="acceptedMediatypes"
|
|
parent-id="{{currentFolder.id}}"
|
|
files-uploaded="onUploadComplete"
|
|
files-queued="onFilesQueue"
|
|
accept="{{acceptedFileTypes}}"
|
|
max-file-size="{{maxFileSize}}"
|
|
hide-dropzone="{{!activeDrag && images.length > 0 || searchOptions.filter }}"
|
|
compact="{{ images.length > 0 }}">
|
|
</umb-file-dropzone>
|
|
|
|
<umb-media-grid ng-if="!loading"
|
|
items="images"
|
|
on-click="clickHandler"
|
|
on-click-name="clickItemName"
|
|
item-max-width="150"
|
|
item-max-height="150"
|
|
item-min-width="100"
|
|
item-min-height="100"
|
|
only-images={{onlyImages}}>
|
|
</umb-media-grid>
|
|
|
|
<div class="flex justify-center">
|
|
<umb-pagination ng-if="searchOptions.totalPages > 0 && !loading"
|
|
page-number="searchOptions.pageNumber"
|
|
total-pages="searchOptions.totalPages"
|
|
on-change="changePagination(pageNumber)">
|
|
</umb-pagination>
|
|
</div>
|
|
|
|
<umb-empty-state ng-if="searchOptions.filter && images.length === 0 && !loading"
|
|
position="center">
|
|
<localize key="general_searchNoResult"></localize>
|
|
</umb-empty-state>
|
|
|
|
</div>
|
|
|
|
<umb-overlay ng-if="mediaPickerDetailsOverlay.show"
|
|
model="mediaPickerDetailsOverlay"
|
|
position="right">
|
|
|
|
<div class="umb-control-group">
|
|
|
|
<div ng-if="target.url">
|
|
<umb-image-gravity src="target.url"
|
|
center="target.focalPoint">
|
|
</umb-image-gravity>
|
|
</div>
|
|
|
|
<div ng-if="cropSize">
|
|
|
|
<h5>
|
|
<localize key="general_preview">Preview</localize>
|
|
</h5>
|
|
|
|
<umb-image-thumbnail center="target.focalPoint"
|
|
src="target.url"
|
|
height="{{cropSize.height}}"
|
|
width="{{cropSize.width}}"
|
|
max-size="400">
|
|
</umb-image-thumbnail>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="umb-control-group">
|
|
<label><localize key="@general_url"></localize></label>
|
|
<input type="text"
|
|
localize="placeholder"
|
|
placeholder="@general_url"
|
|
class="umb-editor umb-textstring"
|
|
ng-model="target.url"
|
|
ng-disabled="target.id" />
|
|
</div>
|
|
|
|
<div class="umb-control-group">
|
|
<label><localize key="@content_altTextOptional"></localize></label>
|
|
<input type="text" class="umb-editor umb-textstring" ng-model="target.altText" />
|
|
</div>
|
|
|
|
|
|
</umb-overlay>
|
|
|
|
</form>
|