MediaPicker drag-n-drop upload.

e107_admin/image.php

@@ -1094,14 +1094,17 @@ class media_admin_ui extends e_admin_ui
 		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;
 		}
 
@@ -1351,8 +1354,8 @@ class media_admin_ui extends e_admin_ui
 
 		$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-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()),
+			'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()),
 		);
@@ -1644,14 +1647,7 @@ class media_admin_ui extends e_admin_ui
 		}
 		else 
 		{
-			if(deftrue('e_DEBUG_MEDIAPICKER'))
+			$text = e107::getMedia()->mediaSelect($this->getQuery('for'),$this->getQuery('tagid'), $options); // eg. news, news-thumbnail
-			{
-				$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
-			}
 		}
 		
 		return $text;
@@ -1691,8 +1687,8 @@ class media_admin_ui extends e_admin_ui
 		foreach($images as $val)
 		{
 			$items[] = array(
-				//	'previewHtml'	=> $tp->toImage($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)),
+				//	'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'],
@@ -1728,7 +1724,7 @@ class media_admin_ui extends e_admin_ui
 	}
 
 		
-	private function audioTab($parm=array())
+	private function audioTab($cat='', $parm=array())
 	{
 		$tp = e107::getParser();
 
@@ -1747,7 +1743,7 @@ class media_admin_ui extends e_admin_ui
 
 		$items = array();
 
-		$audios = e107::getMedia()->getAudios();
+		$audios = e107::getMedia()->getAudios($cat);
 
 		foreach($audios as $val)
 		{
@@ -1785,7 +1781,7 @@ class media_admin_ui extends e_admin_ui
 	}
 
 
-	private function videoTab($parm=array())
+	private function videoTab($cat='', $parm=array())
 	{
 
 		$tp = e107::getParser();
@@ -1805,7 +1801,7 @@ class media_admin_ui extends e_admin_ui
 
 		$items = array();
 
-		$videos = e107::getMedia()->getVideos();
+		$videos = e107::getMedia()->getVideos($cat);
 
 
 

e107_handlers/form_handler.php

@@ -69,7 +69,6 @@ class e_form
 	protected $_field_warnings = array();
 
 
-
 	/**
 	 * @var user_class
 	 */
@@ -1413,6 +1412,7 @@ class e_form
 		}
 
 		$title = !empty($parms['help']) ? "title='".$parms['help']."'" : "";
+
 		$width = vartrue($parms['w'], 220);
 		$height = vartrue($parms['h'], 190);
 	// e107::getDebug()->log($parms);
@@ -1423,64 +1423,16 @@ class e_form
 	//	$default = '{e_PLUGIN}gallery/images/butterfly.jpg';
 	//	$default = 'NuIAYHVeFYs.youtube';
 	//	$default = ''; // empty
-
+	//	$default = '{e_MEDIA_IMAGE}2018-07/Jellyfish.jpg';
-		$type = e107::getMedia()->detectType($default);
 
 		$class = '';
 
-		switch($type)
+		$preview = e107::getMedia()->previewTag($default,array('w'=>$width, 'h'=>$height));
-		{
-
-			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
-
-		}
-
-
 
 		$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))
@@ -1488,20 +1440,20 @@ class e_form
 			$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>";
+		//	$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';
+			$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>
@@ -1511,6 +1463,56 @@ class e_form
 		$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;
 
 	}

e107_handlers/media_class.php

@@ -442,15 +442,15 @@ class e_media
 	}
 
 
-	public function getVideos($from=0, $amount = null, $search = null)
+	public function getVideos($cat, $from=0, $amount = null, $search = null)
 	{
-		return $this->getImages('_common_video', $from, $amount, $search);
+		return $this->getMedia('video', $cat, $from, $amount, $search);
 	}
 
 
-	public function getAudios($from=0, $amount = null, $search = null)
+	public function getAudios($cat='', $from=0, $amount = null, $search = null)
 	{
-		return $this->getImages('_common_audio', $from, $amount, $search);
+		return $this->getMedia('audio', $cat, $from, $amount, $search);
 	}
 
 	/**
@@ -462,6 +462,21 @@ class e_media
 	 * @return array
 	 */
 	public function getImages($cat='', $from=0, $amount=null, $search=null, $orderby=null)
+	{
+		return $this->getMedia('image', $cat, $from, $amount, $search, $orderby);
+	}
+
+
+	/**
+	 * Return an array of Images in a particular category
+	 * @param string $type image|audio|video
+	 * @param string $cat : category name. use + to include _common eg. 'news+'
+	 * @param $from
+	 * @param $amount
+	 * @param $search
+	 * @return array
+	 */
+	private function getMedia($type, $cat='', $from=0, $amount=null, $search=null, $orderby=null)
 	{
 		$inc 		= array();
 		$searchinc 	= array();
@@ -472,7 +487,7 @@ class e_media
 			// $inc[] = "media_category = '_common_image' ";
 		//	$inc[] = "media_category REGEXP '(^|,)(_common_image)(,|$)' "; 
 		//		$inc[] = "media_category LIKE '%_common_image%' "; 
-			$catArray[] = '_common_image';
+			$catArray[] = '_common_'.$type;
 		}
 		if($cat)
 		{
@@ -507,7 +522,9 @@ class e_media
 		
 		$fields = ($amount == 'all') ? "media_id" : "*";
 		
-		$query = "SELECT ".$fields." FROM #core_media WHERE `media_category` REGEXP '(^|,)".implode("|",$catArray)."(,|$)' AND `media_userclass` IN (".USERCLASS_LIST.")  " ;	
+		$query = "SELECT ".$fields." FROM #core_media WHERE `media_category` REGEXP '(^|,)".implode("|",$catArray)."(,|$)' 
+		AND `media_userclass` IN (".USERCLASS_LIST.") 
+		AND `media_type` LIKE '".$type."/%' " ;
 	//	$query = "SELECT ".$fields." FROM #core_media WHERE media_userclass IN (".USERCLASS_LIST.") AND ( ".implode(" OR ",$inc)." ) " ;	
 
 
@@ -1104,6 +1121,71 @@ class e_media
 	}
 
 
+	/**
+	 * @param string $default eg. {e_MEDIA_VIDEO}2018-10/myvideo.mp4
+	 * @param array $options
+	 * @return bool|string
+	 */
+	public function previewTag($default, $options=array())
+	{
+		$tp = e107::getParser();
+
+		$type = $this->detectType($default);
+
+		$width = vartrue($options['w'], 220);
+		$height = vartrue($options['h'], 190);
+
+		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 = null;
+
+		}
+
+		return $preview;
+	}
+
+
+
 
 	public function mediaData($sc_path)
 	{
@@ -1280,11 +1362,11 @@ class e_media
 	{
 		$close  = (E107_DEBUG_LEVEL > 0) ? "" : "  data-close='true' ";	//
 		$select = (E107_DEBUG_LEVEL > 0) ? '' : " e-dialog-save e-dialog-close";
-		$style  = varset($data['style'],'float:left');
+		$style  = varset($data['style'],'');
 		$class  = varset($data['class'],'');
-		$dataPreview = !empty($data['previewHtml']) ? base64_encode($data['previewHtml']) : $data['previewUrl'];
+		$dataPreview = !empty($data['previewHtml']) ? base64_encode($data['previewHtml']) : '';
 
-		$linkTag = "<a data-toggle='context' class='e-media-select e-tip".$select." ".$class."' ".$close." data-id='".$data['id']."' data-width='".$data['width']."' data-height='".$data['height']."' data-src='".$data['previewUrl']."' data-type='".$data['type']."' data-bbcode='".$data['bbcode']."' data-target='".$data['tagid']."' data-path='".$data['saveValue']."' data-preview='".$dataPreview."'  title=\"".$data['title']."\" style='".$style."' href='#' >";
+		$linkTag = "<a data-toggle='context' class='e-media-select e-tip".$select." ".$class."' ".$close." data-id='".$data['id']."' data-width='".$data['width']."' data-height='".$data['height']."' data-src='".$data['previewUrl']."' data-type='".$data['type']."' data-bbcode='".$data['bbcode']."' data-target='".$data['tagid']."' data-path='".$data['saveValue']."' data-preview='".$data['previewUrl']."'  data-preview-html='".$dataPreview."' title=\"".$data['title']."\" style='".$style."' href='#' >";
 
 		return $linkTag;
 
@@ -1377,7 +1459,7 @@ class e_media
 
 						$text .= $linkTag;
 						$text .= "<span>";
-						$text .= '<img class="img-responsive img-fluid" alt="" src="'.$data['thumbUrl'].'" style="width:100%;display:inline-block" />';
+						$text .= '<img class="img-responsive img-fluid" alt="" src="'.$data['thumbUrl'].'" style="display:inline-block" />';
 						$text .= "</span>";
 						$text .= "\n</a>\n\n";
 

e107_themes/bootstrap3/admin_style.css

@@ -269,17 +269,19 @@ td.right, th.right 			{ text-align:right }
 #media-browser-container-glyph{ margin-left: 15px }
 
 .media-carousel-item-image .well  { height: 200px; overflow:hidden }
-.media-carousel-item-image span  { display:block; height:150px;  }
+.media-carousel-item-image span  { display:block; height:150px; text-align: center; }
-.media-carousel-item-image img  { width:100%; max-height: 100%;  }
+.media-carousel-item-image img  { max-height: 100%;  }
 .media-carousel-item-video .video-responsive { padding-top: 0; }
 .media-carousel-item-video video { max-width: 100%; max-height: 200px; }
 .media-carousel .well:hover { border:1px solid silver }
 
 .media-carousel-item-container { position: relative; min-height:100px; }
 .media-carousel-item-controls { /*position: absolute;bottom:7px; right: 10px */  margin-top:5px; clear: both;}
+.media-carousel-item-container video,
 .media-carousel-item-container audio { width: 100% }
 .media-carousel-item-glyph { width: 64px; height:64px; overflow:hidden; margin-right:5px; margin-bottom:5px }
 
+.mediaselector-preview { height: 140px; overflow: hidden }
 .mediaselector-preview img,
 .mediaselector-preview video,
 .mediaselector-preview audio {	max-width: 100% 	}
@@ -297,6 +299,22 @@ width: 100%;
 right: 10px;
 }
 
+/* dropzone */
+
+.dropzone { min-height: 100px; padding: 0 }
+.dropzone .dz-preview { display: block }
+.dropzone .dz-preview .dz-image { width: auto }
+.dropzone .dz-filename { margin-top: 30px; }
+.dz-message span {
+	display: block;
+	margin-top: 35%;
+	text-align: center;
+	opacity: 0.2;
+	}
+
+.dz-drag-hover { outline:2px dotted silver }
+
+
 /* image picker */
 
 .imgselector-container {

e107_web/js/core/mediaManager.js

@@ -299,6 +299,7 @@ var e107 = e107 || {'settings': {}, 'behaviors': {}};
 		// Path of the Media Manager Item.
 		var path = $this.attr('data-path');
 		var preview = $this.attr('data-preview');
+		var previewHTML = $this.attr('data-preview-html');
 		var src = $this.attr('data-src');
 		// TinyMce/Textarea insert mode-
 		var bbcode = $this.attr('data-bbcode');
@@ -375,7 +376,20 @@ var e107 = e107 || {'settings': {}, 'behaviors': {}};
 
 		$('img#' + target + "_prev", window.top.document).attr('src', preview); // set new value
 
-		if(type === 'glyph')
+
+		if(previewHTML) // mediapicker() method. New in v2.1.9
+		{
+			console.log("Mode: MediaPicker");
+			console.log("Preview Raw: "+previewHTML);
+
+			if($htmlHolder.length > 0)
+			{
+				$htmlHolder.val(previewHTML);
+			}
+
+			preview = atob(previewHTML).trim();
+		}
+		else if(type === 'glyph')
 		{
 			preview = "<span class='" + src + "'>&nbsp;</span>";
 
@@ -393,17 +407,6 @@ var e107 = e107 || {'settings': {}, 'behaviors': {}};
 		{
 			preview = name;
 		}
-		else if(type === 'video' || type === 'audio') // mediapicker() method. 
-		{
-			console.log("Preview 392: "+preview);
-
-			if($htmlHolder.length > 0)
-			{
-				$htmlHolder.val(preview);
-			}
-
-			preview = atob(preview).trim();
-		}
 		else // image
 		{
 			e107.mediaManager.eMediaAttribute($this, bbcode);
@@ -421,7 +424,7 @@ var e107 = e107 || {'settings': {}, 'behaviors': {}};
 			{
 				preview = preview.replace(e107_plugins_directory, '');
 			}
-			console.log("Mode: Image/Video");
+			console.log("Mode: Image");
 		}
 
 

e107_web/js/plupload/upload.php

@@ -47,9 +47,17 @@
 	$fileName = isset($_REQUEST["name"]) ? $_REQUEST["name"] : '';
 
 
+
 // Clean the fileName for security reasons
 	$fileName = preg_replace('/[^\w\._]+/', '_', $fileName);
 
+	$fileName= 'hello.jpg';
+
+	if(!empty($_FILES['file']['name'])) // dropzone support v2.1.9
+	{
+		$fileName = $_FILES['file']['name'];
+	}
+
 // Make sure the fileName is unique but only if chunking is disabled
 	if($chunks < 2 && file_exists($targetDir . DIRECTORY_SEPARATOR . $fileName))
 	{
@@ -143,8 +151,10 @@
 		}
 		else
 		{
-			die('{"jsonrpc" : "2.0", "error" : {"code": 103, "message": "Failed to move uploaded file."}, "id" : "id"}');
+			die('{"jsonrpc" : "2.0", "error" : {"code": 103, "message": "Failed to move uploaded file. '.ini_get('upload_max_filesize').'"}, "id" : "id"}');
 		}
+
+
 	}
 	else
 	{
@@ -211,6 +221,11 @@
 	$log['filename'] = $fileName;
 	$log['filesize'] = $fileSize;
 	$log['status'] = ($result) ? 'ok' : 'failed';
+	$log['_files'] = $_FILES;
+//	$log['_get'] = $_GET;
+//	$log['_post'] = $_POST;
+
+
 
 	
 
@@ -218,7 +233,9 @@
 
 	e107::getLog()->add('LAN_AL_MEDIA_01', print_r($log, true), $type, 'MEDIA_01');
 
-	$array = array("jsonrpc" => "2.0", "result" => $result, "id" => "id");
+
+	$preview = e107::getMedia()->previewTag($result);
+	$array = array("jsonrpc" => "2.0", "result" => $result, "id" => "id", 'preview' => $preview, 'data'=>$_FILES );
 
 	echo json_encode($array);
 // Return JSON-RPC response