Show SVG preview on upload (#8387)
This commit is contained in:
Bjarne Fyrstenborg
committed by
GitHub
GitHub
parent
f02a16f094
commit
68ed7c908b
@@ -120,7 +120,9 @@
|
||||
isImage: mediaHelper.detectIfImageByExtension(file),
|
||||
extension: getExtension(file)
|
||||
};
|
||||
|
||||
f.fileSrc = getThumbnail(f);
|
||||
|
||||
return f;
|
||||
});
|
||||
|
||||
@@ -230,19 +232,22 @@
|
||||
var index = i; //capture
|
||||
|
||||
var isImage = mediaHelper.detectIfImageByExtension(files[i].name);
|
||||
var extension = getExtension(files[i].name);
|
||||
|
||||
//save the file object to the files collection
|
||||
vm.files.push({
|
||||
var f = {
|
||||
isImage: isImage,
|
||||
extension: getExtension(files[i].name),
|
||||
extension: extension,
|
||||
fileName: files[i].name,
|
||||
isClientSide: true
|
||||
});
|
||||
};
|
||||
|
||||
// Save the file object to the files collection
|
||||
vm.files.push(f);
|
||||
|
||||
//special check for a comma in the name
|
||||
newVal += files[i].name.split(',').join('-') + ",";
|
||||
|
||||
if (isImage) {
|
||||
if (isImage || extension === "svg") {
|
||||
|
||||
var deferred = $q.defer();
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
</div>
|
||||
|
||||
<div class="crop-slider-wrapper" ng-if="loaded">
|
||||
<i class="icon-picture"></i>
|
||||
<i class="icon-picture" aria-hidden="true"></i>
|
||||
|
||||
<div class="crop-slider">
|
||||
<umb-range-slider
|
||||
@@ -19,7 +19,7 @@
|
||||
</umb-range-slider>
|
||||
</div>
|
||||
|
||||
<i class="icon-picture" style="font-size: 22px"></i>
|
||||
<i class="icon-picture" aria-hidden="true" style="font-size: 22px"></i>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,107 +1,105 @@
|
||||
<div data-element="dropzone" class="umb-file-dropzone">
|
||||
|
||||
<ng-form name="uploadForm" umb-isolate-form>
|
||||
<ng-form name="uploadForm" umb-isolate-form>
|
||||
|
||||
<!-- Drag and drop files area -->
|
||||
<div ngf-drop
|
||||
ng-hide="hideDropzone === 'true'"
|
||||
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 }">
|
||||
<!-- Drag and drop files area -->
|
||||
<div ngf-drop
|
||||
ng-hide="hideDropzone === 'true'"
|
||||
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" >
|
||||
<p>
|
||||
<localize key="media_dragAndDropYourFilesIntoTheArea">Drag and drop your file(s) into the area</localize>
|
||||
</p>
|
||||
|
||||
<div class="content" >
|
||||
<p>
|
||||
<localize key="media_dragAndDropYourFilesIntoTheArea">Drag and drop your file(s) into the area</localize>
|
||||
</p>
|
||||
<!-- Drag and drop illustration -->
|
||||
<img class="illustration" src="assets/img/uploader/upload-illustration.svg" alt="" draggable="false" />
|
||||
<!-- Drag and drop illustration -->
|
||||
<img class="illustration" src="assets/img/uploader/upload-illustration.svg" alt="" draggable="false" />
|
||||
|
||||
|
||||
<!-- Select files -->
|
||||
<button
|
||||
type="button"
|
||||
prevent-default
|
||||
data-element="button-uploadMedia"
|
||||
class="file-select"
|
||||
ngf-select
|
||||
ng-model="filesHolder"
|
||||
ngf-change="handleFiles($newFiles, $event)"
|
||||
ngf-multiple="true"
|
||||
ngf-pattern="{{ accept }}"
|
||||
ngf-max-size="{{ maxFileSize }}">
|
||||
- <localize key="media_orClickHereToUpload">or click here to choose files</localize>
|
||||
</button>
|
||||
<!-- Select files -->
|
||||
<button
|
||||
type="button"
|
||||
data-element="button-uploadMedia"
|
||||
class="file-select"
|
||||
ngf-select
|
||||
ng-model="filesHolder"
|
||||
ngf-change="handleFiles($newFiles, $event)"
|
||||
ngf-multiple="true"
|
||||
ngf-pattern="{{ accept }}"
|
||||
ngf-max-size="{{ maxFileSize }}">
|
||||
- <localize key="media_orClickHereToUpload">or click here to choose files</localize>
|
||||
</button>
|
||||
</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">
|
||||
<!-- 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">
|
||||
<!-- 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>
|
||||
<!-- 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>
|
||||
<!-- upload success -->
|
||||
<div class="file-icon" ng-if="file.uploadStatus == 'done'">
|
||||
<i class="icon icon-check color-green" aria-hidden="true"></i>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
</li>
|
||||
|
||||
<li class="file" ng-if="currentFile">
|
||||
<li class="file" ng-if="currentFile">
|
||||
|
||||
<!-- file name -->
|
||||
<div class="file-name">{{ currentFile.name }}</div>
|
||||
<!-- 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>
|
||||
<!-- 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">
|
||||
<!-- 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>
|
||||
<!-- file name -->
|
||||
<div class="file-name">{{ queued.name }}</div>
|
||||
</li>
|
||||
|
||||
<li class="file" ng-repeat="file in rejected">
|
||||
<li class="file" ng-repeat="file in rejected">
|
||||
|
||||
<!-- file name -->
|
||||
<div class="file-description">
|
||||
<!-- file name -->
|
||||
<div class="file-description">
|
||||
|
||||
<strong>{{ file.name }}</strong>
|
||||
<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.$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>
|
||||
<span class="file-error" ng-if="file.serverErrorMessage">
|
||||
<span class="errorMessage color-red">{{file.serverErrorMessage}}</span>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- upload error -->
|
||||
<div class="file-icon">
|
||||
<i class="icon icon-delete color-red"></i>
|
||||
</div>
|
||||
<!-- upload error -->
|
||||
<div class="file-icon">
|
||||
<i class="icon icon-delete color-red" aria-hidden="true"></i>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</ng-form>
|
||||
</ng-form>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -3,10 +3,8 @@
|
||||
<ng-form name="vm.fileUploadForm" ng-class="{ 'drag-over': vm.dragover }">
|
||||
<input type="hidden" ng-model="mandatoryValidator" ng-required="vm.required && !vm.files.length" />
|
||||
|
||||
<div class="fileinput-button umb-upload-button-big"
|
||||
style="margin-bottom: 5px;"
|
||||
ng-hide="vm.files.length > 0">
|
||||
<i class="icon icon-page-up"></i>
|
||||
<div class="fileinput-button umb-upload-button-big" ng-hide="vm.files.length > 0">
|
||||
<i class="icon icon-page-up" aria-hidden="true"></i>
|
||||
<p><localize key="media_clickToUpload">Click to upload</localize></p>
|
||||
<umb-single-file-upload></umb-single-file-upload>
|
||||
</div>
|
||||
@@ -19,8 +17,8 @@
|
||||
<div ng-if="file.isImage || file.extension === 'svg'">
|
||||
<div class="gravity-container">
|
||||
<div class="viewport">
|
||||
<img ng-if="file.isClientSide" ng-src="{{file.fileSrc}}" style="max-width: 100%; max-height: 100%" alt="{{file.fileName}}"/>
|
||||
<a ng-if="!file.isClientSide" href="{{file.fileSrc}}" target="_blank">
|
||||
<img ng-if="file.isClientSide" ng-src="{{file.fileSrc}}" style="max-width: 100%; max-height: 100%" alt="{{file.fileName}}" />
|
||||
<a ng-if="!file.isClientSide" href="#" ng-href="{{file.fileSrc}}" target="_blank">
|
||||
<img ng-src="{{file.fileSrc}}" style="max-width: 100%; max-height: 100%" alt="{{file.fileName}}" />
|
||||
</a>
|
||||
</div>
|
||||
@@ -28,7 +26,7 @@
|
||||
</div>
|
||||
|
||||
<div ng-if="!file.isImage && file.extension !== 'svg'">
|
||||
<a class="span6 thumbnail tc" ng-show="!file.isClientSide" ng-href="{{file.fileName}}" target="_blank">
|
||||
<a class="span6 thumbnail tc" ng-show="!file.isClientSide" href="#" ng-href="{{file.fileName}}" target="_blank">
|
||||
<umb-file-icon
|
||||
extension="{{file.extension}}"
|
||||
size="m">
|
||||
|
||||
Reference in New Issue
Block a user