mLIB Media Manager

Introduction

mLIB is a PHP, MYSQL and jQuery based media upload library. It can be used to upload files and select them for use on fly. This plugin is better suited for admin part of any CMS which lacks a good media uploader. Features :

• Drag-n-drop upload support for all modern browsers and manual upload option for old browsers.
• Can be integrated easily with CK Editor and TinyMCE WYSIWYG editors.
• All modern browsers are supported. Internet Explorer 6 and below are not supported.
• File extensions restriction to select different file type on different locations.
• File size restriction to save bandwidth.
• Custom return type enables you to return the data as you like. You can design how you want to return the selected data.
• Supports parallel uploads to save your time.
• Supports returning data to a custom javascript function so that you can manipulate the output as needed.

---

Installation

1. Download the zip file and extract the contents.
2. Upload the contents of script folder to your domain root so that mlib-config.php is accessible like

   http://your-site-here.com/mlib/mlib-config.php

   considering your-site-here.com is your website.
3. Open mlib/mlib-includes/js/init.js in a text editor and change the value of main_domain in line 2 so that it reads something like this

   main_domain = 'http://your-site-here.com/';
   

   please note that URL must end with slash at the end.
4. Open mlib/mlib-config.php in a text editor and change the values as needed. Everything is explained in php comments in that file.
5. On all pages, wherever a media uploader is needed, please include jQuery and only this javascript in head tag.

   <script src="http://your-site-here.com/mlib/mlib-includes/js/jquery-3.7.0.min.js" type="text/javascript"></script>
   <script src="http://your-site-here.com/mlib/mlib-includes/js/init.js" type="text/javascript"></script>
   

6. Please import the sql file provided in the mlib folder mlib/mlib.sql into your database via PHPMyAdmin interface if availiable, so that related tables are created.
7. Installation is complete.

---

Usage Instructions

• To use the script, you have to use the below code, in jQuery style.

  $('.picurlbtn').mlibready({returnto:'#picurl', maxselect:1});

• In the example above, .picurlbtn is css selector of the element on which it needs to run. returnto and maxselect are its options. There are many options availiable, they are explained below :
   

  Option	Default	Notes
  allowed	"jpg,png,gif,jpeg"	File extensions that you want to allow. Each extension is separated by comma(,). All extensions must be enclosed by single or double quotes.
  minselect	1	Minimum no of files that must be selected. Selection will not trigger until at least these no of files are selected.
  maxselect	999999999999	Maximum no of files that must be selected. Selection will not trigger if less no of files are selected.
  folderID		Any alphanumeric value can be used. Used for uniqly categorising the uploads. For example, content uploaded under "fruits" will not appear in "grains" folderID.
  returnto		This is the target element where output after selecting the files will be returned. If input element is used, output will be applied as value else as innerHTML will be changed.
  returnas	0	ID of Import Option(return type) to be applied on the selected files before returning data to target element.
  runfunction		This is the name of JavaScript function that should be run after applying the output to target element. That function will receive 2 arguments automatically. First argument holds the html information of selected files while second argument holds the css selector of element as defined in returnto.
  maxFilesize	1000	Maximum size of each file in MB(MegaBytes) that can be uploaded.
  parallelUploads	4	No of files that can be uploaded in parallel.

• return-type is the way you want to receive the output data. It can be pre-formatted, edited and deleted in the media uploader itself. To enable this option, simply add "admin:1" in options. To return custom output to the specified element, please add the following as explained here in description:
   

  Option	Notes
  %%id%%	ID used in the database for the file
  %%url%%	only URL of the file
  %%thumb%%	thumbnail URL OR icon URL of non-image files
  %%sthumb%%	thumbnail file name
  %%fullsize%%	size of the file in Kb, Mb, Gb
  %%bytesize%%	size of the file in bytes
  %%title%%	title of the file
  %%caption%%	caption of the file
  %%type%%	file extention
  %%url%%	Full url to the uploaded file
  %%surl%%	Filename of the uploaded file
  %%time%%	Unix timestamp of file when it was uploaded
  %%date%%	Shows day, date and time of file in readable format when it was uploaded

  
  Please note that all these can be used together to get the desired output. For example, the code below will generate a clickable thumbnail to full image.

  <a href="%%url%%" target="_blank"><img src="%%thumb%%" /></a>
  

---

CK Editor Integration (Optional)

• Download the latest CK Editor package from official website and extract the content of the zip package.
• Copy the contents of CK Editor to the root of your script folder. Example : http://your-website.com/ckeditor
• Copy the contents inside ckeditor_plugin directory to ckeditor/plugins that you just created, that you had downloaded from codecanyon.
• Open the config.js file in ckeditor direcotry in a text editor and add an extra line in configuration so that it becomes

  CKEDITOR.editorConfig = function( config ) {
  config.extraPlugins = 'medialib';
  };

• Include the ckeditor js file in head tag of your document.

  <script src="http://your-website.com/ckeditor/ckeditor.js"></script>

• Now, at the end of page, enable the ckeditor for textarea by javascript. Please note that cktextarea is name for textarea and also used in javascript, if your textarea name is different, use that name in script.

  <textarea name="cktextarea"></textarea>
  <script>editor = CKEDITOR.replace('cktextarea');</script>
  

• Integration is complete. Look for Insert Media button in insert toolbar of ckeditor. Clicking that will launch the editor.

---

TinyMCE Integration (Optional)

• Include the TinyMCE script in head tag of your document.

  <script src="http://your-website.com/mlib/mlib-includes/js/mce_mlib.js"></script>

• Initialize the javascript variables and textarea element. Please note id and name of textarea must be same for this to work. In this example, mytextarea is the name of textarea.

  <script>
  tinymce.init({
      selector: '#mytextarea',
      plugins: 'mce_mlib',
      toolbar: 'mce_mlib'
  });
  </script>
  <textarea name="mytextarea" id="mytextarea"></textarea>
  

• Integration is complete. Look for Insert Media button in interface of TinyMCE WYSIWYG editor. Clicking that will launch the editor.