mLIB media manager is a file management tool that helps to upload and import files easily. It is similar to WordPress's media uploader, so if you are familiar with it, it will be very easy for you to understand.
This example shows very basic usage. When you click choose button, mlib UI will pop-up. You can either upload files from your PC or select a file from already uploaded file. Please look for horizontal double arrow button, then click Insert from existing to view old files. You can click a thumbnail to select it, then press Insert button.
Allowed image filetypes are jpg, jpeg, png, gif. You can click HTML or JAVASCRIPT tabs to see their markups.
<input type="text" id="pic1" name="pic1" />
<button id="pic1btn">Choose</button>jQuery(document).ready(function(){
jQuery('#pic1btn').mlibready({returnto:'#pic1', maxselect:1});
});Choose a single photo and get its thumbnail, size, upload date, title and description in pre-formatted output. It can be applied to any HTML element, not just textbox, textarea or other form elements. Its upto you how you will handle your data.
Click on the button below and upload or choose a picture just like you did in example 1 above. This text will be replaced with image information as soon as you click import button.
When upload window is open, if you click double arraw button, you will see Import options tab. Click on it and here you can edit the output for receiving. Please visit return-type in usage instructions for complete information.
<div id="info1"></div>
<button id="info1btn">Get photo information</button>jQuery(document).ready(function(){
jQuery('#info1btn').mlibready({returnto:'#info1', returnas:10, admin:1, maxselect:1});
});Here we are not going to get the full URL, as happened in example 1. Only uploaded file names will be received so that you may use them with databases more easily. Also we are not setting any maximum limit of files this time.
Once you have selected many files, you can see that filenames are separated using a space and newline charector. Also you may note that only filenames are displayed instead of full URL.
<textarea id="mult1" name="mult1"></textarea>
<button id="mult1btn">Choose</button>While using Insert from existing option, you can see that files used in previous examples are not shown here. This is because we have used a different folderID for this example. folderID can be alphanumeric charectors only.
jQuery(document).ready(function(){
jQuery('#mult1btn').mlibready({returnto:'#mult1', folderID:'ttyy67', returnas:2});
});This time you will see additional tab in uploader called Import options. To activate this mode, admin:1 needs to be added to code. Here you can create, modify or delete different markups. Please check JAVASCRIPT tab for better understanding.
To create gallery, we will use a different, custom made markup using returnas. Also we have used same folderID from previous example. Hence you can use same photos else you can upload new ones.
<div id="pics2"></div>
<button id="pics2btn">Choose Photos</button>jQuery(document).ready(function(){
jQuery('#pics2btn').mlibready({
returnto:'#pics2',
maxselect:10,
minselect:3,
folderID:'ttyy67',
returnas:6,
admin:1
});
});This example will work with different file types. We must use allowed option to modify the file types that can be uploaded. Please note that even if you allow some format here that is not allowed in the mlib-config.php file, it wont upload. This works like an added security layer to prevent uploading malicious files.
Allowed file types are pdf, doc, docx, ppt, pptx, xls, xlsx, txt, zip, rar, apk. JPG, PNG and GIF are also supported by script but not by this example, hence images will not upload.
<div id="docs1"></div>
<button id="docs1btn">Choose Files</button>jQuery(document).ready(function(){
jQuery('#docs1btn').mlibready({
returnto:'#docs1',
maxselect:5,
minselect:3,
folderID:'files675',
allowed:'pdf,doc,docx,ppt,pptx,xls,xlsx,txt,zip,rar,apk',
returnas:3,
admin:1
});
});Sometimes, you may want to run a custom javascript function to modify the output even before it is displayed. We will make use of runfunction option of the plugin.
At the bottom right of this tab, you can see some text in red color, showing no of files and their total size. When you have selected the files, that text will change according to the selection.
0 files selected, 0 bytes total<textarea id="func1" name="func1"></textarea>
<button id="func1btn">Choose</button>
<span id="func1span">0 files selected, 0 bytes total</span>// this function processes the input and sets output to external element
function my_custom_function(a, b) {
const files = a.split("\n");
var bytes = 0;
var f = 0;
for (var i = 0; i < files.length; i++) {
var fdata = files[i].trim();
if (fdata.length > 0) {
const xdata = fdata.split("|");
bytes = bytes + parseInt(xdata[1]);
f++;
}
}
document.getElementById('func1span').innerHTML = f + ' files selected, ' + bytes + ' bytes total';
}
// setting options for mlib
jQuery(document).ready(function() {
jQuery('#func1btn').mlibready({
returnto: '#func1',
folderID: 'ttyy67',
runfunction: 'my_custom_function',
returnas: 9
});
});
TinyMCE editor integration works for self-hosted version only. Also all versions of TinyMCE 4 is compatible with this version of mLIB media manager. However you need to know and understand how tinyMCE works.
Below you can see my customized version of tinyMCE WYSIWYG editor in action. To use mLIB, just click on Insert Media button.
<script type="text/javascript" src="http://your-site-here.com/mlib/mlib-includes/tinymce/tinymce.min.js"></script>
<script type="text/javascript" src="http://your-site-here.com/mlib/mlib-includes/js/mce_mlib.js"></script>
Use below html anywhere in page where you want tinyMCE editor to appear.
<textarea name="mytextarea" rows="15" id="mytextarea"></textarea>tinymce.init({
selector: '#mytextarea',
plugins: 'mce_mlib',
toolbar: 'mce_mlib | bold italic underline | alignleft aligncenter alignright alignjustify | undo redo'
});CKeditor integration works for self-hosted version only. Also all versions of CKeditor 4 is compatible with this version of mLIB media manager.
Below you can see my customized version of CKeditor in action. To use mLIB, just click on Insert Media button.
CKEDITOR.editorConfig = function( config ) {
config.extraPlugins = 'medialib';
};<script src="http://your-site-here.com/mlib/mlib-includes/ckeditor/ckeditor.js"></script>Use below html where you want CKeditor to appear.
<textarea name="ckedit" rows="15" id="ckedit"></textarea>editor = CKEDITOR.replace('ckedit');This is the end of live demo for mLIB media manager 1.1. For documentation, please visit usage instructions for complete information.