upload files to media library
This commit is contained in:
Niels Lyngsø
@@ -1,7 +1,7 @@
|
||||
// https://github.com/sachinchoolur/angular-trix
|
||||
(function() {
|
||||
'use strict';
|
||||
angular.module('umbraco.directives').directive('trixEditor', function() {
|
||||
angular.module('umbraco.directives').directive('trixEditor', function(Upload, umbRequestHelper, localizationService, notificationsService) {
|
||||
return {
|
||||
restrict: 'E',
|
||||
require: 'ngModel',
|
||||
@@ -17,11 +17,12 @@
|
||||
trixAttachmentRemove: '&'
|
||||
*/
|
||||
},
|
||||
link: function($scope, element, attr, ngModel, notificationsService, localizationService) {
|
||||
link: function($scope, element, attr, ngModel) {
|
||||
|
||||
|
||||
// TODO: retrive from configuration:
|
||||
var acceptedFileTypes = ["image/jpeg", "image/png"];
|
||||
var maxFileSize = 37000000;
|
||||
|
||||
|
||||
var editorElement = element[0];
|
||||
@@ -117,15 +118,21 @@
|
||||
notificationsService.error(data[0], data[1]);
|
||||
});
|
||||
}
|
||||
|
||||
// Prevent attaching files > 1024 bytes
|
||||
//if (event.file.size > 1024) {
|
||||
// event.preventDefault()
|
||||
//}
|
||||
});
|
||||
|
||||
editorElement.addEventListener('trix-attachment-add', function(event) {
|
||||
|
||||
var attachment = event.attachment;
|
||||
|
||||
if (attachment.file) {
|
||||
|
||||
if (attachment.file) {
|
||||
|
||||
console.log('trix-attachment-add', attachment.file.name);
|
||||
|
||||
/*
|
||||
// set caption
|
||||
|
||||
@@ -137,11 +144,138 @@
|
||||
editor.activateAttribute("caption", "<Insert Caption>")
|
||||
editor.setSelectedRange(originalRange)
|
||||
*/
|
||||
|
||||
|
||||
if (attachment.file.size == 0) {
|
||||
attachment.remove();
|
||||
return;
|
||||
// You may personalize max_file_size
|
||||
} else if (attachment.file.size > maxFileSize) {
|
||||
attachment.remove();
|
||||
return;
|
||||
}
|
||||
|
||||
uploadAttachment(attachment);
|
||||
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
var attachmentsQueue = [];
|
||||
|
||||
function uploadAttachment(attachment) {
|
||||
attachmentsQueue.push(attachment);
|
||||
uploadNextAttachment();
|
||||
}
|
||||
function uploadNextAttachment() {
|
||||
if (attachmentsQueue.length > 0) {
|
||||
uploadAttachmentToMedia(attachmentsQueue.shift());
|
||||
}
|
||||
}
|
||||
|
||||
function uploadAttachmentToMedia(attachment) {
|
||||
|
||||
var file = attachment.file;
|
||||
|
||||
//attachment.attachment.attributes = attachment.attachment.attributes.add("data-udi", ".................");
|
||||
|
||||
Upload.upload({
|
||||
url: umbRequestHelper.getApiUrl("mediaApiBaseUrl", "PostAddFile"),
|
||||
fields: {
|
||||
'currentFolder': -1,
|
||||
'contentTypeAlias': "umbracoAutoSelect",
|
||||
'propertyAlias': "umbracoFile",
|
||||
'path': file.path
|
||||
},
|
||||
file: file
|
||||
})
|
||||
.progress(function(evt) {
|
||||
//if (file.uploadStat !== "done" && file.uploadStat !== "error") {
|
||||
// calculate progress in percentage
|
||||
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total, 10);
|
||||
// set percentage property on file
|
||||
//file.uploadProgress = progressPercentage;
|
||||
// set uploading status on file
|
||||
//file.uploadStatus = "uploading";
|
||||
|
||||
console.log("progressPercentage:", progressPercentage);
|
||||
attachment.setUploadProgress(progressPercentage);
|
||||
//}
|
||||
})
|
||||
.success(function(data, status, headers, config) {
|
||||
if (data.notifications && data.notifications.length > 0) {
|
||||
// set error status on file
|
||||
//file.uploadStatus = "error";
|
||||
// Throw message back to user with the cause of the error
|
||||
//file.serverErrorMessage = data.notifications[0].message;
|
||||
// Put the file in the rejected pool
|
||||
//scope.rejected.push(file);
|
||||
} else {
|
||||
// set done status on file
|
||||
//file.uploadStatus = "done";
|
||||
//file.uploadProgress = 100;
|
||||
// set date/time for when done - used for sorting
|
||||
//file.doneDate = new Date();
|
||||
// Put the file in the done pool
|
||||
//scope.done.push(file);
|
||||
|
||||
attachment.setUploadProgress(100);
|
||||
|
||||
|
||||
|
||||
console.log("File uploaded, data: ", data);
|
||||
|
||||
var file = data.uploadedfiles[0];
|
||||
if(file) {
|
||||
|
||||
// set UDI.. so far it has only been posible for me to set this attribute, which becomes part of the data-trix-attachment attribute on the figure element.
|
||||
attachment.setAttributes({"udi": file.Id});
|
||||
|
||||
// set the url, Trix will parse on this variable to the img element as src attribute.
|
||||
attachment.setAttributes({"url": file.TempFilePath});
|
||||
|
||||
} else {
|
||||
// something failed, so we will remove the file again.
|
||||
attachment.remove();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//after processing, test if everthing is done
|
||||
uploadNextAttachment();
|
||||
})
|
||||
.error(function(evt, status, headers, config) {
|
||||
// set status done
|
||||
file.uploadStatus = "error";
|
||||
//if the service returns a detailed error
|
||||
if (evt.InnerException) {
|
||||
file.serverErrorMessage = evt.InnerException.ExceptionMessage;
|
||||
//Check if its the common "too large file" exception
|
||||
if (evt.InnerException.StackTrace &&
|
||||
evt.InnerException.StackTrace.indexOf("ValidateRequestEntityLength") > 0) {
|
||||
file.serverErrorMessage = "File too large to upload";
|
||||
}
|
||||
} else if (evt.Message) {
|
||||
file.serverErrorMessage = evt.Message;
|
||||
}
|
||||
// If file not found, server will return a 404 and display this message
|
||||
if (status === 404) {
|
||||
file.serverErrorMessage = "File not found";
|
||||
}
|
||||
//after processing, test if everthing is done
|
||||
//scope.rejected.push(file);
|
||||
|
||||
attachment.remove();
|
||||
uploadNextAttachment();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
function registerEvent(type, callbackMethod) {
|
||||
|
||||
|
||||
Reference in New Issue
Block a user