tinymce.PluginManager.add('jdragdrop', function(editor) {
// Reset the drop area border
tinyMCE.DOM.bind(document, 'dragleave', function(e) {
e.stopPropagation();
e.preventDefault();
tinyMCE.activeEditor.contentAreaContainer.style.borderWidth = '1px 0 0';
return false;
});
// The upload logic
function UploadFile(file) {
var fd = new FormData();
fd.append('Filedata', file);
fd.append('folder', tinyMCE.activeEditor.settings.mediaUploadPath);
var xhr = new XMLHttpRequest();
xhr.upload.onprogress = function(e) {
var percentComplete = (e.loaded / e.total) * 100;
document.querySelector('.bar').style.width = percentComplete + '%';
};
removeProgessBar = function(){
setTimeout(function(){
var loader = document.querySelector('#jloader');
loader.parentNode.removeChild(loader);
editor.contentAreaContainer.style.borderWidth = '1px 0 0 0';
}, 200);
};
xhr.onload = function() {
var resp = JSON.parse(xhr.responseText);
if (xhr.status == 200) {
if (resp.status == '0') {
removeProgessBar();
editor.windowManager.alert(resp.message + ': ' + tinyMCE.activeEditor.settings.setCustomDir + resp.location);
}
if (resp.status == '1') {
removeProgessBar();
// Create the image tag
var newNode = tinyMCE.activeEditor.getDoc().createElement ('img');
newNode.src= tinyMCE.activeEditor.settings.setCustomDir + resp.location;
tinyMCE.activeEditor.execCommand('mceInsertContent', false, newNode.outerHTML);
}
} else {
removeProgessBar();
}
};
xhr.onerror = function() {
removeProgessBar();
};
xhr.open("POST", tinyMCE.activeEditor.settings.uploadUri, true);
xhr.send(fd);
}
// Listers for drag and drop
if (typeof FormData != 'undefined'){
// Fix for Chrome
editor.on('dragenter', function(e) {
e.stopPropagation();
return false;
});
// Notify user when file is over the drop area
editor.on('dragover', function(e) {
e.preventDefault();
editor.contentAreaContainer.style.borderStyle = 'dashed';
editor.contentAreaContainer.style.borderWidth = '5px';
return false;
});
// Logic for the dropped file
editor.on('drop', function(e) {
// We override only for files
if (e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files.length > 0) {
for (var i = 0, f; f = e.dataTransfer.files[i]; i++) {
// Only images allowed
if (f.name.toLowerCase().match(/\.(jpg|jpeg|png|gif)$/)) {
// Create and display the progress bar
var container, innerDiv, progressBar = '';
container = document.createElement('div');
container.id = 'jloader';
innerDiv = document.createElement('div');
innerDiv.classList.add('progress');
innerDiv.classList.add('progress-success');
innerDiv.classList.add('progress-striped');
innerDiv.classList.add('active');
innerDiv.style.width = '100%';
innerDiv.style.height = '30px';
progressBar = document.createElement('div');
progressBar.classList.add('bar');
progressBar.style.width = '0';
innerDiv.appendChild(progressBar);
container.appendChild(innerDiv);
document.querySelector('.mce-toolbar-grp').appendChild(container);
// Upload the file(s)
UploadFile(f);
}
e.preventDefault();
}
}
editor.contentAreaContainer.style.borderWidth = '1px 0 0';
});
} else {
Joomla.renderMessages({'error': [Joomla.JText._("PLG_TINY_ERR_UNSUPPORTEDBROWSER")]});
editor.on('drop', function(e) {
e.preventDefault();
return false;
});
}
});