Image uploader
This commit is contained in:
dignajar
parent
14cad72e2e
commit
b667588d2e
|
|
@ -0,0 +1,2 @@
|
|||
/*! UIkit 2.23.0 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
|
||||
.uk-form-file{display:inline-block;vertical-align:middle;position:relative;overflow:hidden}.uk-form-file input[type=file]{position:absolute;top:0;z-index:1;width:100%;opacity:0;cursor:pointer;left:0;font-size:500px}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
/*! UIkit 2.23.0 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
|
||||
.uk-placeholder{margin-bottom:15px;padding:15px;border:1px dashed #ddd;background:#fafafa;color:#444}*+.uk-placeholder{margin-top:15px}.uk-placeholder>:last-child{margin-bottom:0}.uk-placeholder-large{padding-top:80px;padding-bottom:80px}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
/*! UIkit 2.23.0 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
|
||||
.uk-progress{box-sizing:border-box;height:20px;margin-bottom:15px;background:#eee;overflow:hidden;line-height:20px}*+.uk-progress{margin-top:15px}.uk-progress-bar{width:0;height:100%;background:#00a8e6;float:left;-webkit-transition:width .6s ease;transition:width .6s ease;font-size:12px;color:#fff;text-align:center}.uk-progress-mini{height:6px}.uk-progress-small{height:12px}.uk-progress-success .uk-progress-bar{background-color:#8cc14c}.uk-progress-warning .uk-progress-bar{background-color:#faa732}.uk-progress-danger .uk-progress-bar{background-color:#da314b}.uk-progress-striped .uk-progress-bar{background-image:-webkit-linear-gradient(-45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(-45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:30px 30px}.uk-progress-striped.uk-active .uk-progress-bar{-webkit-animation:uk-progress-bar-stripes 2s linear infinite;animation:uk-progress-bar-stripes 2s linear infinite}@-webkit-keyframes uk-progress-bar-stripes{0%{background-position:0 0}100%{background-position:30px 0}}@keyframes uk-progress-bar-stripes{0%{background-position:0 0}100%{background-position:30px 0}}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
/*! UIkit 2.23.0 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
|
||||
.uk-dragover{box-shadow:0 0 20px rgba(100,100,100,.3)}
|
||||
|
|
@ -15,11 +15,16 @@
|
|||
<link rel="stylesheet" type="text/css" href="./css/uikit.almost-flat.min.css?version=<?php echo BLUDIT_VERSION ?>">
|
||||
<link rel="stylesheet" type="text/css" href="./css/default.css?version=<?php echo BLUDIT_VERSION ?>">
|
||||
<link rel="stylesheet" type="text/css" href="./css/jquery.datetimepicker.css?version=<?php echo BLUDIT_VERSION ?>">
|
||||
<link rel="stylesheet" type="text/css" href="./css/upload.min.css?version=<?php echo BLUDIT_VERSION ?>">
|
||||
<link rel="stylesheet" type="text/css" href="./css/form-file.min.css?version=<?php echo BLUDIT_VERSION ?>">
|
||||
<link rel="stylesheet" type="text/css" href="./css/placeholder.min.css?version=<?php echo BLUDIT_VERSION ?>">
|
||||
<link rel="stylesheet" type="text/css" href="./css/progress.min.css?version=<?php echo BLUDIT_VERSION ?>">
|
||||
|
||||
<!-- Javascript -->
|
||||
<script charset="utf-8" src="./js/jquery.min.js?version=<?php echo BLUDIT_VERSION ?>"></script>
|
||||
<script charset="utf-8" src="./js/uikit.min.js?version=<?php echo BLUDIT_VERSION ?>"></script>
|
||||
<script charset="utf-8" src="./js/jquery.datetimepicker.js?version=<?php echo BLUDIT_VERSION ?>"></script>
|
||||
<script charset="utf-8" src="./js/upload.min.js?version=<?php echo BLUDIT_VERSION ?>"></script>
|
||||
|
||||
<!-- Plugins -->
|
||||
<?php Theme::plugins('adminHead') ?>
|
||||
|
|
|
|||
|
|
@ -125,4 +125,78 @@ class HTML {
|
|||
$html = '';
|
||||
}
|
||||
|
||||
}
|
||||
public static function uploader()
|
||||
{
|
||||
global $L;
|
||||
|
||||
$html = '
|
||||
<div id="upload-drop" class="uk-placeholder uk-text-center">
|
||||
<i class="uk-icon-cloud-upload uk-icon-medium uk-text-muted uk-margin-small-right"></i>'.$L->g('Upload Image').'<br><a class="uk-form-file">'.$L->g('Drag and drop or click here').'<input id="upload-select" type="file"></a>
|
||||
</div>
|
||||
|
||||
<div id="progressbar" class="uk-progress uk-hidden">
|
||||
<div class="uk-progress-bar" style="width: 0%;">0%</div>
|
||||
</div>
|
||||
';
|
||||
|
||||
$html .= '<select id="jsimageList" class="uk-width-1-1" size="10">';
|
||||
$imagesList = Filesystem::listFiles(PATH_UPLOADS,'*','*',true);
|
||||
foreach($imagesList as $file) {
|
||||
$html .= '<option value="">'.basename($file).'</option>';
|
||||
}
|
||||
$html .= '</select>';
|
||||
|
||||
$html .= '
|
||||
<div class="uk-form-row uk-margin-top">
|
||||
<button id="jsaddImage" class="uk-button uk-button-primary" type="button"><i class="uk-icon-angle-double-left"></i> '.$L->g('Insert Image').'</button>
|
||||
</div>
|
||||
';
|
||||
|
||||
$html .= '
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
|
||||
$("#jsaddImage").on("click", function() {
|
||||
var filename = $("#jsimageList option:selected").text();
|
||||
var textareaValue = $("#jscontent").val();
|
||||
$("#jscontent").val(textareaValue + filename + "\n");
|
||||
});
|
||||
|
||||
$(function()
|
||||
{
|
||||
var progressbar = $("#progressbar");
|
||||
var bar = progressbar.find(".uk-progress-bar");
|
||||
var settings =
|
||||
{
|
||||
type: "json",
|
||||
action: "'.HTML_PATH_ADMIN_ROOT.'ajax/uploader",
|
||||
allow : "*.(jpg|jpeg|gif|png)",
|
||||
|
||||
loadstart: function() {
|
||||
bar.css("width", "0%").text("0%");
|
||||
progressbar.removeClass("uk-hidden");
|
||||
},
|
||||
|
||||
progress: function(percent) {
|
||||
percent = Math.ceil(percent);
|
||||
bar.css("width", percent+"%").text(percent+"%");
|
||||
},
|
||||
|
||||
allcomplete: function(response) {
|
||||
bar.css("width", "100%").text("100%");
|
||||
setTimeout(function() { progressbar.addClass("uk-hidden"); }, 250);
|
||||
$("#jsimageList").prepend("<option value=\'"+response.filename+"\' selected=\'selected\'>"+response.filename+"</option>");
|
||||
}
|
||||
};
|
||||
|
||||
var select = UIkit.uploadSelect($("#upload-select"), settings);
|
||||
var drop = UIkit.uploadDrop($("#upload-drop"), settings);
|
||||
});
|
||||
|
||||
});
|
||||
</script>';
|
||||
|
||||
echo $html;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
/*! UIkit 2.23.0 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
|
||||
!function(e){var t;window.UIkit&&(t=e(UIkit)),"function"==typeof define&&define.amd&&define("uikit-upload",["uikit"],function(){return t||e(UIkit)})}(function(e){"use strict";function t(o,a){function r(t,n){var o=new FormData,a=new XMLHttpRequest;if(n.before(n,t)!==!1){for(var r,i=0;r=t[i];i++)o.append(n.param,r);for(var l in n.params)o.append(l,n.params[l]);a.upload.addEventListener("progress",function(e){var t=e.loaded/e.total*100;n.progress(t,e)},!1),a.addEventListener("loadstart",function(e){n.loadstart(e)},!1),a.addEventListener("load",function(e){n.load(e)},!1),a.addEventListener("loadend",function(e){n.loadend(e)},!1),a.addEventListener("error",function(e){n.error(e)},!1),a.addEventListener("abort",function(e){n.abort(e)},!1),a.open(n.method,n.action,!0),"json"==n.type&&a.setRequestHeader("Accept","application/json"),a.onreadystatechange=function(){if(n.readystatechange(a),4==a.readyState){var t=a.responseText;if("json"==n.type)try{t=e.$.parseJSON(t)}catch(o){t=!1}n.complete(t,a)}},n.beforeSend(a),a.send(o)}}if(!e.support.ajaxupload)return this;if(a=e.$.extend({},t.defaults,a),o.length){if("*.*"!==a.allow)for(var i,l=0;i=o[l];l++)if(!n(a.allow,i.name))return"string"==typeof a.notallowed?alert(a.notallowed):a.notallowed(i,a),void 0;var s=a.complete;if(a.single){var d=o.length,f=0,p=!0;a.beforeAll(o),a.complete=function(e,t){f+=1,s(e,t),a.filelimit&&f>=a.filelimit&&(p=!1),p&&d>f?r([o[f]],a):a.allcomplete(e,t)},r([o[0]],a)}else a.complete=function(e,t){s(e,t),a.allcomplete(e,t)},r(o,a)}}function n(e,t){var n="^"+e.replace(/\//g,"\\/").replace(/\*\*/g,"(\\/[^\\/]+)*").replace(/\*/g,"[^\\/]+").replace(/((?!\\))\?/g,"$1.")+"$";return n="^"+n+"$",null!==t.match(new RegExp(n,"i"))}return e.component("uploadSelect",{init:function(){var e=this;this.on("change",function(){t(e.element[0].files,e.options);var n=e.element.clone(!0).data("uploadSelect",e);e.element.replaceWith(n),e.element=n})}}),e.component("uploadDrop",{defaults:{dragoverClass:"uk-dragover"},init:function(){var e=this,n=!1;this.on("drop",function(n){n.dataTransfer&&n.dataTransfer.files&&(n.stopPropagation(),n.preventDefault(),e.element.removeClass(e.options.dragoverClass),e.element.trigger("dropped.uk.upload",[n.dataTransfer.files]),t(n.dataTransfer.files,e.options))}).on("dragenter",function(e){e.stopPropagation(),e.preventDefault()}).on("dragover",function(t){t.stopPropagation(),t.preventDefault(),n||(e.element.addClass(e.options.dragoverClass),n=!0)}).on("dragleave",function(t){t.stopPropagation(),t.preventDefault(),e.element.removeClass(e.options.dragoverClass),n=!1})}}),e.support.ajaxupload=function(){function e(){var e=document.createElement("INPUT");return e.type="file","files"in e}function t(){var e=new XMLHttpRequest;return!!(e&&"upload"in e&&"onprogress"in e.upload)}function n(){return!!window.FormData}return e()&&t()&&n()}(),e.support.ajaxupload&&e.$.event.props.push("dataTransfer"),t.defaults={action:"",single:!0,method:"POST",param:"files[]",params:{},allow:"*.*",type:"text",filelimit:!1,before:function(){},beforeSend:function(){},beforeAll:function(){},loadstart:function(){},load:function(){},loadend:function(){},error:function(){},abort:function(){},progress:function(){},complete:function(){},allcomplete:function(){},readystatechange:function(){},notallowed:function(e,t){alert("Only the following file types are allowed: "+t.allow)}},e.Utils.xhrupload=t,t});
|
||||
|
|
@ -57,6 +57,7 @@ echo '<div class="uk-width-large-3-10">';
|
|||
// Tabs, general and advanced mode
|
||||
echo '<ul class="uk-tab" data-uk-tab="{connect:\'#tab-options\'}">';
|
||||
echo '<li><a href="">'.$L->g('General').'</a></li>';
|
||||
echo '<li><a href="">'.$L->g('Images').'</a></li>';
|
||||
echo '<li><a href="">'.$L->g('Advanced').'</a></li>';
|
||||
echo '</ul>';
|
||||
|
||||
|
|
@ -86,6 +87,13 @@ echo '<div class="uk-width-large-3-10">';
|
|||
|
||||
echo '</li>';
|
||||
|
||||
// ---- IMAGES TAB ----
|
||||
echo '<li>';
|
||||
|
||||
HTML::uploader();
|
||||
|
||||
echo '</li>';
|
||||
|
||||
// ---- ADVANCED TAB ----
|
||||
echo '<li>';
|
||||
|
||||
|
|
|
|||
|
|
@ -51,6 +51,7 @@ echo '<div class="uk-width-large-3-10">';
|
|||
// Tabs, general and advanced mode
|
||||
echo '<ul class="uk-tab" data-uk-tab="{connect:\'#tab-options\'}">';
|
||||
echo '<li><a href="">'.$L->g('General').'</a></li>';
|
||||
echo '<li><a href="">'.$L->g('Images').'</a></li>';
|
||||
echo '<li><a href="">'.$L->g('Advanced').'</a></li>';
|
||||
echo '</ul>';
|
||||
|
||||
|
|
@ -80,6 +81,13 @@ echo '<div class="uk-width-large-3-10">';
|
|||
|
||||
echo '</li>';
|
||||
|
||||
// ---- IMAGES TAB ----
|
||||
echo '<li>';
|
||||
|
||||
HTML::uploader();
|
||||
|
||||
echo '</li>';
|
||||
|
||||
// ---- ADVANCED TAB ----
|
||||
echo '<li>';
|
||||
|
||||
|
|
|
|||
|
|
@ -44,8 +44,10 @@ echo '<div class="uk-width-large-3-10">';
|
|||
// Tabs, general and advanced mode
|
||||
echo '<ul class="uk-tab" data-uk-tab="{connect:\'#tab-options\'}">';
|
||||
echo '<li><a href="">'.$L->g('General').'</a></li>';
|
||||
echo '<li><a href="">'.$L->g('Images').'</a></li>';
|
||||
echo '<li><a href="">'.$L->g('Advanced').'</a></li>';
|
||||
echo '</ul>';
|
||||
|
||||
echo '<ul id="tab-options" class="uk-switcher uk-margin">';
|
||||
|
||||
// ---- GENERAL TAB ----
|
||||
|
|
@ -72,6 +74,13 @@ echo '<div class="uk-width-large-3-10">';
|
|||
|
||||
echo '</li>';
|
||||
|
||||
// ---- IMAGES TAB ----
|
||||
echo '<li>';
|
||||
|
||||
HTML::uploader();
|
||||
|
||||
echo '</li>';
|
||||
|
||||
// ---- ADVANCED TAB ----
|
||||
echo '<li>';
|
||||
|
||||
|
|
|
|||
|
|
@ -44,6 +44,7 @@ echo '<div class="uk-width-large-3-10">';
|
|||
// Tabs, general and advanced mode
|
||||
echo '<ul class="uk-tab" data-uk-tab="{connect:\'#tab-options\'}">';
|
||||
echo '<li><a href="">'.$L->g('General').'</a></li>';
|
||||
echo '<li><a href="">Images</a></li>';
|
||||
echo '<li><a href="">'.$L->g('Advanced').'</a></li>';
|
||||
echo '</ul>';
|
||||
|
||||
|
|
@ -73,6 +74,13 @@ echo '<div class="uk-width-large-3-10">';
|
|||
|
||||
echo '</li>';
|
||||
|
||||
// ---- IMAGES TAB ----
|
||||
echo '<li>';
|
||||
|
||||
HTML::uploader();
|
||||
|
||||
echo '</li>';
|
||||
|
||||
// ---- ADVANCED TAB ----
|
||||
echo '<li>';
|
||||
|
||||
|
|
|
|||
|
|
@ -97,4 +97,4 @@ class dbJSON
|
|||
return unserialize($data);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<?php header('Content-Type: application/json');
|
||||
|
||||
// Source
|
||||
$source = $_FILES['files']['tmp_name'][0];
|
||||
|
||||
// Filename
|
||||
$filename = Text::lowercase($_FILES['files']['name'][0]);
|
||||
$fileExtension = pathinfo($filename, PATHINFO_EXTENSION);
|
||||
$filename = pathinfo($filename, PATHINFO_FILENAME);
|
||||
$filename = Text::replace(' ', '', $filename);
|
||||
$filename = Text::replace('_', '', $filename);
|
||||
|
||||
if( file_exists(PATH_UPLOADS.$filename.'.'.$fileExtension) )
|
||||
{
|
||||
$number = 0;
|
||||
$tmpName = $filename.'_'.$number.'.'.$fileExtension;
|
||||
while(file_exists(PATH_UPLOADS.$tmpName)) {
|
||||
$number++;
|
||||
$tmpName = $filename.'_'.$number.'.'.$fileExtension;
|
||||
}
|
||||
}
|
||||
|
||||
if(empty($tmpName)) {
|
||||
$tmpName = $filename.'.'.$fileExtension;
|
||||
}
|
||||
|
||||
move_uploaded_file($source, PATH_UPLOADS.$tmpName);
|
||||
|
||||
exit(json_encode(array(
|
||||
'status'=>0,
|
||||
'filename'=>$tmpName,
|
||||
'date'=>date("F d Y H:i:s.", filemtime(PATH_UPLOADS.$tmpName))
|
||||
)));
|
||||
|
||||
?>
|
||||
|
|
@ -16,7 +16,7 @@ class Filesystem {
|
|||
return $directories;
|
||||
}
|
||||
|
||||
public static function listFiles($path, $regex='*', $extension)
|
||||
public static function listFiles($path, $regex='*', $extension='*', $sortByDate=false)
|
||||
{
|
||||
$files = glob($path.$regex.'.'.$extension);
|
||||
|
||||
|
|
@ -24,6 +24,10 @@ class Filesystem {
|
|||
return array();
|
||||
}
|
||||
|
||||
if($sortByDate) {
|
||||
usort($files, create_function('$a,$b', 'return filemtime($b) - filemtime($a);'));
|
||||
}
|
||||
|
||||
return $files;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ echo '<script>'.PHP_EOL;
|
|||
echo 'var HTML_PATH_ROOT = "'.HTML_PATH_ROOT.'";'.PHP_EOL;
|
||||
echo 'var HTML_PATH_ADMIN_ROOT = "'.HTML_PATH_ADMIN_ROOT.'";'.PHP_EOL;
|
||||
echo 'var HTML_PATH_ADMIN_THEME = "'.HTML_PATH_ADMIN_THEME.'";'.PHP_EOL;
|
||||
echo 'var HTML_PATH_UPLOADS = "'.HTML_PATH_UPLOADS.'";'.PHP_EOL;
|
||||
|
||||
echo 'var NO_PARENT_CHAR = "'.NO_PARENT_CHAR.'";'.PHP_EOL;
|
||||
|
||||
|
|
|
|||
|
|
@ -199,5 +199,9 @@
|
|||
"manage-users": "Manage users",
|
||||
"view-and-edit-your-profile": "View and edit your profile.",
|
||||
|
||||
"password-must-be-at-least-6-characters-long": "Password must be at least 6 characters long"
|
||||
"password-must-be-at-least-6-characters-long": "Password must be at least 6 characters long",
|
||||
"images": "Images",
|
||||
"upload-image": "Upload image",
|
||||
"drag-and-drop-or-click-here": "Drag and drop or click here",
|
||||
"insert-image": "Insert image"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,9 @@
|
|||
This version of SimpleMDE have a little changes for Bludit.
|
||||
|
||||
--- Image preview hack ---
|
||||
|
||||
Original
|
||||
<img src="'+e+'"
|
||||
|
||||
Bludit hack
|
||||
<img src="'+HTML_PATH_UPLOADS+e+'"
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -46,10 +46,13 @@ class pluginsimpleMDE extends Plugin {
|
|||
// Path plugin.
|
||||
$pluginPath = $this->htmlPath();
|
||||
|
||||
// Load CSS
|
||||
// SimpleMDE css
|
||||
$html .= '<link rel="stylesheet" href="'.$pluginPath.'css/simplemde.min.css">';
|
||||
|
||||
// Load Javascript
|
||||
// Font-awesome is a dependency of SimpleMDE
|
||||
$html .= '<link rel="stylesheet" href="'.$pluginPath.'css/font-awesome.min.css">';
|
||||
|
||||
// SimpleMDE js
|
||||
$html .= '<script src="'.$pluginPath.'js/simplemde.min.js"></script>';
|
||||
|
||||
// Hack for Bludit
|
||||
|
|
@ -85,11 +88,19 @@ class pluginsimpleMDE extends Plugin {
|
|||
toolbarGuideIcon: true,
|
||||
autofocus: false,
|
||||
lineWrapping: true,
|
||||
autoDownloadFontAwesome: false,
|
||||
indentWithTabs: true,
|
||||
tabSize: '.$this->getDbField('tabSize').',
|
||||
spellChecker: false,
|
||||
toolbar: ['.Sanitize::htmlDecode($this->getDbField('toolbar')).']
|
||||
});';
|
||||
|
||||
$html .= '$("#jsaddImage").on("click", function() {
|
||||
var filename = $("#jsimageList option:selected" ).text();
|
||||
var text = simplemde.value();
|
||||
simplemde.value(text + "![alt text]("+filename+")" + "\n");
|
||||
});';
|
||||
|
||||
$html .= '}); </script>';
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue