102 lines
3.4 KiB
HTML
102 lines
3.4 KiB
HTML
<div class="umb-file-dropzone-directive">
|
|
|
|
<ng-form name="uploadForm">
|
|
|
|
<!-- Drag and drop files area -->
|
|
<div ngf-drop
|
|
ng-hide="hideDropzone"
|
|
ng-model="filesHolder"
|
|
ngf-change="handleFiles($files, $event)"
|
|
class="dropzone"
|
|
ngf-drag-over-class="drag-over"
|
|
ngf-multiple="true"
|
|
ngf-allow-dir="true"
|
|
ngf-pattern="{{ accept }}"
|
|
ngf-max-size="{{ maxFileSize }}"
|
|
ng-class="{'is-small': compact!=='false' || (done.length+queue.length) > 0 }">
|
|
|
|
|
|
<div class="content" >
|
|
|
|
<!-- Drag and drop illustration -->
|
|
<img class="illustration" src="assets/img/uploader/upload-illustration.svg" alt="" draggable="false" />
|
|
|
|
|
|
<!-- Select files -->
|
|
<div class="file-select"
|
|
ngf-select
|
|
ng-model="filesHolder"
|
|
ngf-change="handleFiles($files, $event)"
|
|
ngf-multiple="true"
|
|
ngf-pattern="{{ accept }}"
|
|
ngf-max-size="{{ maxFileSize }}">
|
|
- <localize key="media_orClickHereToUpload">or click here to choose files</localize>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- List of uploading/uploaded files -->
|
|
<ul class="file-list" ng-show="done.length > 0 || queue.length > 0 || rejected.length > 0 || filesHolder.length > 0">
|
|
|
|
<!-- make list sort order the same as photo grid. The last uploaded photo in the top -->
|
|
<li class="file" ng-repeat="file in done">
|
|
|
|
<!-- file name -->
|
|
<div class="file-description">{{ file.name }}</div>
|
|
|
|
<!-- upload success -->
|
|
<div class="file-icon" ng-if="file.uploadStatus == 'done'">
|
|
<i class="icon icon-check color-green"></i>
|
|
</div>
|
|
|
|
</li>
|
|
|
|
<li class="file" ng-if="currentFile">
|
|
|
|
<!-- file name -->
|
|
<div class="file-name">{{ currentFile.name }}</div>
|
|
|
|
<!-- upload progress bar -->
|
|
<div class="file-progress">
|
|
<span class="file-progress-indicator"
|
|
ng-style="{'width': currentFile.uploadProgress + '%'}"></span>
|
|
</div>
|
|
</li>
|
|
|
|
<!-- make list sort order the same as photo grid. The last uploaded photo in the top -->
|
|
<li class="file" ng-repeat="queued in queue">
|
|
|
|
<!-- file name -->
|
|
<div class="file-name">{{ queued.name }}</div>
|
|
</li>
|
|
|
|
<li class="file" ng-repeat="file in rejected">
|
|
|
|
<!-- file name -->
|
|
<div class="file-description">
|
|
|
|
<strong>{{ file.name }}</strong>
|
|
|
|
<span class="file-error" ng-if="file.$error">
|
|
<span ng-if="file.$error === 'pattern'" class="errorMessage color-red"><localize key="media_disallowedFileType"></localize></span>
|
|
<span ng-if="file.$error === 'maxSize'" class="errorMessage color-red"><localize key="media_maxFileSize"></localize> "{{maxFileSize}}"</span>
|
|
</span>
|
|
|
|
<span class="file-error" ng-if="file.serverErrorMessage">
|
|
<span class="errorMessage color-red">{{file.serverErrorMessage}}</span>
|
|
</span>
|
|
|
|
</div>
|
|
|
|
<!-- upload error -->
|
|
<div class="file-icon">
|
|
<i class="icon icon-delete color-red"></i>
|
|
</div>
|
|
|
|
</li>
|
|
</ul>
|
|
|
|
</ng-form>
|
|
|
|
</div>
|