diff --git a/plugins/box/filesmanager/css/style.css b/plugins/box/filesmanager/css/style.css new file mode 100644 index 0000000..5fa1ebc --- /dev/null +++ b/plugins/box/filesmanager/css/style.css @@ -0,0 +1,42 @@ +.upload-area { + border:2px dotted #0B85A1; + width:200px; + color:#92AAB0; + text-align: center; + padding-top:4px; + height: 34px; + display: inline-block; + float:left; + margin-left: 10px; +} + +.upload-area-dragenter { + border: 2px solid #ff85A1 !important; +} + +.upload-area-drop { + border: 2px dotted #0B85A1; +} + +.upload-area-dragover { + border: 2px dotted #0B85A1; +} + +.upload-progress { + height: 100%; + width: 0; + background-color: #0B85A1; + position: relative; + float: left; + max-width: 100%; + color: #ffffff; +} + +.upload-file-info { + display: inline-block; + float: left; +} + +.fileupload-controls { + float: left; +} diff --git a/plugins/box/filesmanager/filesmanager.admin.php b/plugins/box/filesmanager/filesmanager.admin.php index 0125f2c..95dfd87 100755 --- a/plugins/box/filesmanager/filesmanager.admin.php +++ b/plugins/box/filesmanager/filesmanager.admin.php @@ -1,5 +1,9 @@ assign('image_types', $image_types) ->assign('site_url', $site_url) ->assign('files_path', $files_path) - ->display(); + ->assign('fileuploader', array( + 'uploadUrl' => $site_url.'/admin/index.php?id=filesmanager&path='.$path, + 'csrf' => Security::token() + ))->display(); } diff --git a/plugins/box/filesmanager/js/fileuploader.js b/plugins/box/filesmanager/js/fileuploader.js new file mode 100644 index 0000000..a673b24 --- /dev/null +++ b/plugins/box/filesmanager/js/fileuploader.js @@ -0,0 +1,114 @@ +if (typeof $.monstra == 'undefined') $.monstra = {}; + +$.monstra.fileuploader = { + + conf: { + uploadUrl: '', + csrf: '' + }, + + init: function(conf){ + $.extend(this.conf, conf); + var area = $('#uploadArea'); + area.on('dragenter', function(e){ + e.stopPropagation(); + e.preventDefault(); + $(this).addClass('upload-area-dragenter'); + }); + area.on('dragover', function(e){ + e.stopPropagation(); + e.preventDefault(); + }); + area.on('drop', function(e){ + $(this).removeClass('upload-area-dragenter').removeClass('upload-area-dragover').addClass('upload-area-drop'); + e.preventDefault(); + var files = e.originalEvent.dataTransfer.files; + $.monstra.fileuploader.uploadFileHandle(files, area); + }); + $(document).on('dragover', function(e){ + e.stopPropagation(); + e.preventDefault(); + area.removeClass('upload-area-dragenter').removeClass('upload-area-drop').addClass('upload-area-dragover'); + }); + $(document).on('dragenter', function(e){ + e.stopPropagation(); + e.preventDefault(); + }); + $(document).on('drop', function(e){ + e.stopPropagation(); + e.preventDefault(); + }); + }, + + uploadFileHandle: function(files, area){ + for (var i = 0; i < files.length; i++){ + var fd = new FormData(); + fd.append('file', files[i]); + fd.append('upload_file', 'upload_file'); + fd.append('csrf', $.monstra.fileuploader.conf.csrf); + //this.setFileNameSize(files[i].name, files[i].size); + + this.uploadFile(fd, status); + } + }, + + uploadFile: function(formData, status){ + var jqXHR = $.ajax({ + url: $.monstra.fileuploader.conf.uploadUrl, + type: 'POST', + contentType: false, + processData: false, + cache: false, + data: formData, + xhr: function() { + var xhrobj = $.ajaxSettings.xhr(); + if (xhrobj.upload) { + xhrobj.upload.addEventListener('progress', function(event) { + var percent = 0; + var position = event.loaded || event.position; + var total = event.total; + if (event.lengthComputable) { + percent = Math.ceil(position / total * 100); + } + $.monstra.fileuploader.setProgress(percent); + }, false); + } + return xhrobj; + }, + success: function(data){ + $.monstra.fileuploader.setProgress(100); + location.href = $.monstra.fileuploader.conf.uploadUrl; + /*$('#fuProgress').fadeOut('slow', function(){ + $('#fuProgress').css({width: 0, display: 'block'}); + $('#fuPlaceholder').show(); + });*/ + } + }); + }, + + setProgress: function(progress){ + if (parseInt(progress) > 0) { + $('#fuPlaceholder').hide(); + } + var progressBarWidth = progress * $('#uploadArea').width() / 100; + $('#fuProgress').animate({ width: progressBarWidth }, 10).html(progress + "% "); + }, + + setFileNameSize: function(fname, fsize){ + var sizeStr = ''; + var sizeKB = fsize / 1024; + if(parseInt(sizeKB) > 1024){ + var sizeMB = sizeKB/1024; + sizeStr = sizeMB.toFixed(2)+' MB'; + } else { + sizeStr = sizeKB.toFixed(2)+' KB'; + } + + $('#fileInfo').html(fname +' '+ sizeStr); + } +}; + +$(document).ready(function(){ + $.monstra.fileuploader.init($.parseJSON($('#fUploaderInit').val())); +}); +