Skip to content

Commit

Permalink
MediaPicker drag-n-drop upload.
Browse files Browse the repository at this point in the history
  • Loading branch information
@CaMer0n
CaMer0n committed Jul 27, 2018
1 parent baf5700 commit f132953
Show file tree
Hide file tree
Showing 8 changed files with 222 additions and 101 deletions.
32 changes: 14 additions & 18 deletions e107_admin/image.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1094,14 +1094,17 @@ function init()
if($this->getAction() === 'video')
{
$parm = array('search' => $tp->filter($_GET['search']));
echo $this->videoTab($parm);
$cat = $tp->filter($_GET['for']);
echo $this->videoTab($cat, $parm);

exit;
}

if($this->getAction() === 'audio')
{
$parm = array('search' => $tp->filter($_GET['search']));
echo $this->audioTab($parm);
$cat = $tp->filter($_GET['for']);
echo $this->audioTab($cat, $parm);
exit;
}

Expand Down Expand Up @@ -1351,8 +1354,8 @@ function mediaManagerTabs()

$tabOptions = array(
'core-media-image' => array('caption'=> $tp->toGlyph('fa-file-photo-o').ADLAN_105, 'text' => $this->imageTab2($cat,$options) ),
'core-media-video' => array('caption'=> $tp->toGlyph('fa-file-video-o').IMALAN_163, 'text' => $this->videoTab()),
'core-media-audio' => array('caption'=> $tp->toGlyph('fa-file-audio-o')."Audio", 'text' => $this->audioTab()),
'core-media-video' => array('caption'=> $tp->toGlyph('fa-file-video-o').IMALAN_163, 'text' => $this->videoTab($cat,$options)),
'core-media-audio' => array('caption'=> $tp->toGlyph('fa-file-audio-o')."Audio", 'text' => $this->audioTab($cat,$options)),
'core-media-youtube' => array('caption'=> $tp->toGlyph('fa-youtube-play')."Youtube", 'text' => $this->youtubeTab() ),
'core-media-glyphs' => array('caption'=> $tp->toGlyph('fa-flag')."Glyphs", 'text' => $this->glyphTab()),
);
Expand Down Expand Up @@ -1644,14 +1647,7 @@ function imageTab($type,$options)
}
else
{
if(deftrue('e_DEBUG_MEDIAPICKER'))
{
$text = $this->imageTab2($this->getQuery('for'),$options); // todo test with tinymce etc.
}
else
{
$text = e107::getMedia()->mediaSelect($this->getQuery('for'),$this->getQuery('tagid'), $options); // eg. news, news-thumbnail
}
$text = e107::getMedia()->mediaSelect($this->getQuery('for'),$this->getQuery('tagid'), $options); // eg. news, news-thumbnail
}

return $text;
Expand Down Expand Up @@ -1691,8 +1687,8 @@ private function imageTab2($category,$option=array())
foreach($images as $val)
{
$items[] = array(
// 'previewHtml' => $tp->toImage($val['media_url'], array('w'=>210, 'h'=>140)),
'previewUrl' => $tp->thumbUrl($val['media_url'], array('w'=>210, 'h'=>140)),
'previewHtml' => $tp->toImage($val['media_url'], array('w'=>210, 'h'=>140)),
// 'previewUrl' => $tp->thumbUrl($val['media_url'], array('w'=>210, 'h'=>140)),
'saveValue' => $val['media_url'],
'thumbUrl' => $tp->thumbUrl($val['media_url'], array('w'=>340, 'h'=>220)),
'title' => $val['media_name'],
Expand Down Expand Up @@ -1728,7 +1724,7 @@ private function imageTab2($category,$option=array())
}


private function audioTab($parm=array())
private function audioTab($cat='', $parm=array())
{
$tp = e107::getParser();

Expand All @@ -1747,7 +1743,7 @@ private function audioTab($parm=array())

$items = array();

$audios = e107::getMedia()->getAudios();
$audios = e107::getMedia()->getAudios($cat);

foreach($audios as $val)
{
Expand Down Expand Up @@ -1785,7 +1781,7 @@ private function audioTab($parm=array())
}


private function videoTab($parm=array())
private function videoTab($cat='', $parm=array())
{

$tp = e107::getParser();
Expand All @@ -1805,7 +1801,7 @@ private function videoTab($parm=array())

$items = array();

$videos = e107::getMedia()->getVideos();
$videos = e107::getMedia()->getVideos($cat);



Expand Down
114 changes: 58 additions & 56 deletions e107_handlers/form_handler.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,6 @@ class e_form
protected $_field_warnings = array();



/**
* @var user_class
*/
Expand Down Expand Up @@ -1413,6 +1412,7 @@ function mediapicker($name, $default, $parms = '')
}

$title = !empty($parms['help']) ? "title='".$parms['help']."'" : "";

$width = vartrue($parms['w'], 220);
$height = vartrue($parms['h'], 190);
// e107::getDebug()->log($parms);
Expand All @@ -1423,85 +1423,37 @@ function mediapicker($name, $default, $parms = '')
// $default = '{e_PLUGIN}gallery/images/butterfly.jpg';
// $default = 'NuIAYHVeFYs.youtube';
// $default = ''; // empty

$type = e107::getMedia()->detectType($default);
// $default = '{e_MEDIA_IMAGE}2018-07/Jellyfish.jpg';

$class = '';

switch($type)
{

case "video":
$preview = $tp->toVideo($default, array('w'=>$width, 'h'=> ($height - 50)));
$previewURL = $tp->toVideo($default, array('mode'=>'url'));
break;

case "audio":
$preview = $tp->toAudio($default);
$previewURL = false;
break;

case "image":
/*
if('{' != $default[0]) // legacy path or one without {}
{
list($default_thumb,$default) = $this->imagepickerDefault($default, $parms);
}
$default = $tp->replaceConstants($default, 'abs');
*/

$preview = $tp->toImage($default, array('w'=>$width, 'h'=>$height, 'class'=>'image-selector img-responsive img-fluid'));
$previewURL = $tp->thumbUrl($default, array('w'=>800));


break;

case "application": // file.
// $preview = $tp->toImage($default, array('w'=>$width, 'h'=>$height, 'class'=>'image-selector img-responsive img-fluid'));
// $previewURL = $tp->thumbUrl($default, array('w'=>800));
break;

case "glyph":
$preview = $tp->toGlyph($default, array('size'=>'3x'));
$previewURL = false;
break;

default: // blank

}


$preview = e107::getMedia()->previewTag($default,array('w'=>$width, 'h'=>$height));

$cat = $tp->toDB(vartrue($parms['media']));


$ret = "<div class='mediaselector-container e-tip well well-small ".$class."' {$title} style='position:relative;vertical-align:top;margin-right:25px; display:inline-block; width:".$width."px;min-height:".$height."px;'>";


$parms['class'] = 'btn btn-sm btn-default';

if(empty($preview))
{
$parms['title'] = LAN_ADD;
$editIcon = $this->mediaUrl($cat, $tp->toGlyph('fa-plus', array('fw'=>1)), $name_id,$parms);
$previewIcon = '';
$previewClass = 'mediaselector-preview mediaselector-preview-empty';
$previewClass = 'mediaselector-preview dropzone';

// @todo drag-n-drop upload code in here.
}
else
{
$editIcon = $this->mediaUrl($cat, $tp->toGlyph('fa-edit', array('fw'=>1)), $name_id,$parms);
$previewIcon = "<a title='".LAN_PREVIEW."' class='btn btn-sm btn-default btn-secondary e-modal' data-modal-caption='".LAN_PREVIEW."' href='".$previewURL."'>".$tp->toGlyph('fa-search', array('fw'=>1))."</a>";
$previewClass = 'mediaselector-preview';
// $previewIcon = "<a title='".LAN_PREVIEW."' class='btn btn-sm btn-default btn-secondary e-modal' data-modal-caption='".LAN_PREVIEW."' href='".$previewURL."'>".$tp->toGlyph('fa-search', array('fw'=>1))."</a>";
$previewClass = 'mediaselector-preview';
$previewIcon = '';
}

$ret .= "<div id='{$name_id}_prev' class='".$previewClass."'>";

$ret .= $preview; // image, video. audo tag etc.
$ret .= $preview; // image, video. audio tag etc.

$ret .= '</div><div class="overlay">
<div class="text">'.$editIcon.$previewIcon.'</div>
Expand All @@ -1511,6 +1463,56 @@ function mediapicker($name, $default, $parms = '')
$ret .= "<input type='hidden' name='{$name}' id='{$name_id}' value='{$default}' />";
$ret .= "<input type='hidden' name='mediameta_{$name}' id='{$meta_id}' value='' />";

// Drag-n-Drop Upload
// @see https://www.dropzonejs.com/#server-side-implementation

e107::js('footer', e_WEB_ABS."lib/dropzone/dropzone.min.js");
e107::css('url', e_WEB_ABS."lib/dropzone/dropzone.min.css");
e107::css('inline', "
.dropzone { background: transparent; border:0 }
");

$INLINEJS = "
Dropzone.autoDiscover = false;
$(function() {
$('#".$name_id."_prev').dropzone({
url: '".e_JS."plupload/upload.php?for=".$cat."',
createImageThumbnails: false,
maxFilesize: ".(int) ini_get('upload_max_filesize').",
success: function (file, response) {
file.previewElement.classList.add('dz-success');
// console.log(response);
if(response)
{
var decoded = jQuery.parseJSON(response);
console.log(decoded);
if(decoded.preview && decoded.result)
{
$('#".$name_id."').val(decoded.result);
$('#".$name_id."_prev').html(decoded.preview);
}
else if(decoded.error)
{
file.previewElement.classList.add('dz-error');
$('#".$name_id."_prev').html(decoded.error.message);
}
}
},
error: function (file, response) {
file.previewElement.classList.add('dz-error');
}
});
});
";


e107::js('footer-inline', $INLINEJS);

return $ret;

}
Expand Down
Loading

0 comments on commit f132953

Please sign in to comment.