PHPackages nauvalazhar/midia - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [File & Storage](/categories/file-storage) 4. / 5. nauvalazhar/midia ActiveLibrary[File & Storage](/categories/file-storage) nauvalazhar/midia ================= Simple Media manager for your Laravel project v1.2.2(7y ago)0114MITJavaScriptPHP >=5.6.0 Since Dec 6Pushed 6y ago1 watchersCompare [ Source](https://github.com/nauvalazhar/midia)[ Packagist](https://packagist.org/packages/nauvalazhar/midia)[ RSS](/packages/nauvalazhar-midia/feed)WikiDiscussions master Synced 1mo ago READMEChangelogDependencies (1)Versions (9)Used By (0) Midia [![](https://camo.githubusercontent.com/8bb50fd2278f18fc326bf71f6e88ca8f884f72f179d3e555e20ed30157190d0d/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d677265656e2e737667)](https://camo.githubusercontent.com/8bb50fd2278f18fc326bf71f6e88ca8f884f72f179d3e555e20ed30157190d0d/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d677265656e2e737667) [![](https://camo.githubusercontent.com/eb25f8062c1be78bf2a8cfb5f378c07a97f033d065125602c83426896e362485/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6d61696e7461696e65642d4b6f64696e6765722d6f72616e67652e737667)](https://camo.githubusercontent.com/eb25f8062c1be78bf2a8cfb5f378c07a97f033d065125602c83426896e362485/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6d61696e7461696e65642d4b6f64696e6765722d6f72616e67652e737667) [![](https://camo.githubusercontent.com/ed581efe4912c2634ba2d5e939e89ee7b75581749b87284a5d9be8f5f30d6e06/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f7068702d352e362e302d626c75652e737667)](https://camo.githubusercontent.com/ed581efe4912c2634ba2d5e939e89ee7b75581749b87284a5d9be8f5f30d6e06/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f7068702d352e362e302d626c75652e737667) =========================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================== [](#midia---) Simple media manager for your Laravel project. This package lets you open your files as inline modal. All directories in the folder will be ignored. In other words, can only read the file. [![midia](https://camo.githubusercontent.com/cb2e2c157769c2c96d5adb0b40d4dc1925499f464358fd3f9011054f3aec082a/68747470733a2f2f692e696d6775722e636f6d2f4b4f6a716f66622e676966)](https://camo.githubusercontent.com/cb2e2c157769c2c96d5adb0b40d4dc1925499f464358fd3f9011054f3aec082a/68747470733a2f2f692e696d6775722e636f6d2f4b4f6a716f66622e676966) Features ======== [](#features) - Fully responsive - Read, rename, delete file - Infinite scroll - Search - Upload multiple - Multiple thumbnail sizes - Multiple directories - Multiple instance - Configurable - More ... Todo List ========= [](#todo-list) - Multiple images selection - Multi language - Multi user - UI improvement - Thumbnail Requirements ============ [](#requirements) - PHP >= 5.6.4 - jQuery >= 1.12 (Recommended: 1.12) - intervention/image - Dropzone.js - Laravel 5 Tested ====== [](#tested) - Laravel 5.7 - Laravel 5.6 - Laravel 5.5 - Laravel 5.4 - Laravel 5.3 - Laravel 5.2 - Laravel 5.1 - Laravel 5.0 Installation ============ [](#installation) Now, this package is available for production. You can install this package using these steps. 1. Install through Composer ``` composer require itskodinger/midia ``` If you're using Laravel 5.6 you can skip this step, since it will be auto discovered by Laravel. 2. Put this line into `config/app.php` in the `providers` key ``` Itskodinger\Midia\MidiaServiceProvider::class, ``` 3. Done! Usage ===== [](#usage) 1. Publish required assets. ``` php artisan vendor:publish --tag=midia ``` 2. Put this code in the `` tag ``` ``` 3. Add these lines before the `` tag ``` // or using helpers {!! midia_css() !!} ``` 4. Make sure you've included jQuery before and put these lines after jQuery ``` // or using helpers {!! midia_js() !!} ``` **Note:** Default, all files that are read and uploaded will be stored in the `storage/media` folder, so create a folder named `media` in the `storage` folder if you have not already created it or you can change the location of the folders you want in `config/midia.php`. Integration =========== [](#integration) Here we have documented how to use it with TinyMCE 4 and as a stand-alone button. But, you can also try it yourself to be integrated with other editors like: CKEditor, Summernote, etc. If you successfully integrate with other editors, then you can either create `issue` or change the `readme.md` file to document how you do it. ### TinyMCE 4 [](#tinymce-4) ``` var editor_config = { path_absolute: "{{url('')}}/", selector: "textarea.tinymce", plugins: [ "advlist autolink lists link image charmap print preview hr anchor pagebreak", "searchreplace wordcount visualblocks visualchars code fullscreen", "insertdatetime media nonbreaking save table contextmenu directionality", "emoticons template paste textcolor colorpicker textpattern" ], toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media", relative_urls: false, file_browser_callback: function(field_name, url, type, win) { var x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth; var y = window.innerHeight|| document.documentElement.clientHeight|| document.getElementsByTagName('body')[0].clientHeight; var cmsURL = editor_config.path_absolute + 'midia/open/tinymce4?field_name=' + field_name; tinyMCE.activeEditor.windowManager.open({ file: cmsURL, title: 'Filemanager', width: x * 0.8, height: y * 0.8, resizable: "yes", close_previous: "no" }); } }; tinymce.init(editor_config); ``` ### Summernote [](#summernote) ``` var midia = function(options, cb) { var route_prefix = (options && options.prefix) ? options.prefix : '/midia'; if(options && options.prefix) delete options.prefix; window.open(route_prefix + "?" + $.param(options) || 'file', 'Midia', 'width=900,height=600'); window.SetUrl = cb; }; var MButton = function(context) { var ui = $.summernote.ui; var button = ui.button({ contents: ' ', tooltip: 'Insert image with filemanager', click: function() { midia({type: 'image', prefix: '/midia/open/summernote', title: 'Midia Library', locale: 'en'}, function(url, path) { context.invoke('insertImage', url); }); } }); return button.render(); }; $('.summernote').summernote({ minHeight: 150, toolbar: [ ['style', ['bold', 'italic', 'underline', 'clear']], ['font', ['strikethrough']], ['insert', ['link']], ['popovers', ['midia']], ], buttons: { midia: MButton } }) ``` ### Standalone Button [](#standalone-button) #### Popup [](#popup) ``` Select File $(".midia-toggle").midia({ base_url: '{{url('')}}' }); ``` #### Inline [](#inline) ``` $("#media").midia({ inline: true, base_url: '{{url('')}}' }); ``` #### Multiple Instance With Different Directories [](#multiple-instance-with-different-directories) ``` $("#media1").midia({ inline: true, base_url: '{{url('')}}' }); $("#media2").midia({ inline: true, base_url: '{{url('')}}', directory_name: 'mydocuments' }); ``` You can also use the configuration in `.midia()`. The following is the default configuration: ``` { title: 'Midia', identifier: 'fullname', // file attribute that used as identifier inline: false, // if you want to open the media manager as an inline element locale: 'en', // locale for the plugin (note: `lang/midia-lang-[locale].js` file should exist) base_url: '', // base url of your project file_name: '', // set to 'url' if you want to give full URL when choosing file, directory_name = '', // set with the existing key in the `config/midia.php` file in the 'directories' key. For example: 'mydocuments' data_target: 'input', // selector attribute for target file input data_preview: 'preview', // selector attribute for target file preview initial_value: null, // fill with your initial value for midia, initial_preview: null, // fill with your initial preview for media, csrf_field: $("meta[name='csrf-token']").attr('content'), // your CSRF field dropzone: {}, // you can provide other dropzone options onOpen: function() {}, // method when the media manager will be opened onOpened: function() {}, // method when the media manager is opened onClose: function() {}, // method when the media manager is closed onChoose: function() {} // method when the media manager choose File actions: ['copy_url', 'download', 'rename', 'delete'], // pick actions you want available in selected file can_choose: true, // if you want to hide 'pick' button, set it false, customLoadUrl: null, // if you want to use your custom url to load the files => function (limit, key) { ... } customUploadUrl: null, // if you want to use your custom url to upload the files => function () { ... } customRenameUrl: null, // if you want to use your custom url to rename the file => function (file) { ... } customDeleteUrl: null, // if you want to use your custom url to delete the file => function (file) { ... } load_ajax_type: 'get', // default ajax type to fetch files is 'get', you can change with 'post' http method } ``` or you can use data-attributes to change the settings, use `data-midia` followed by your setting attributes, i.e. `data-midia-your_setting_want_to_change`: ``` ``` Override Default Settings ========================= [](#override-default-settings) You can override default settings for all instances by add following code before creating instance: ``` $.fn.midia.defaultSettings.name_of_setting = 'new value'; // Example: $.fn.midia.defaultSettings.title = 'Midia Manager'; $.fn.midia.defaultSettings.base_url = '/'; ``` Setter ====== [](#setter) You can also change to settings on the fly but you have to refresh after that: ``` var midiaObj = $(".midia-toggle").midia(); midiaObj.midia('title', 'New Title').midia('refresh'); // or midiaObj.midia({title: 'New Title'}).midia('refresh'); ``` Getter ====== [](#getter) You can get the the value from this following Midia Attributes: - el: get the dom elements - settings: get the settings - value: get the value, after you pick a file with this way: ``` var midiaObj = $(".midia-toggle").midia(); midiaObj.midia('el'); midiaObj.midia('settings'); midiaObj.midia('value'); ``` Methods ======= [](#methods) Midia has this following methods: - refresh: refresh your midia, including empty the value, and implement the settings you change before. - open: open the midia dialog modal - close: close the midia dialog modal with this way: ``` var midiaObj = $(".midia-toggle").midia(); midiaObj.midia('refresh'); midiaObj.midia('open'); midiaObj.midia('close'); ``` Open The File ============= [](#open-the-file) To open a file in the browser, you can do it easily like this: ``` http://yourdomain.com/media/filename.extension ``` For example: ``` http://yourdomain.com/media/image.png ``` **Note:** You can change the `media` prefix in the `config/midia.php` file Resize Image On The Fly ======================= [](#resize-image-on-the-fly) You can quickly resize an image, set the `width` parameters to the size you want (in pixels) and set the `height` parameters to the size you want. If the `width` parameter is not set, it will be set equal to the `height` parameter and If the `height` parameter is not set, it will be set equal to the `width` parameter. ``` For 100px * 300px image: http://yourdomain.com/media/image.png?width=100&height=300 For 100px * 100px image: http://yourdomain.com/media/image.png?width=100 ``` **Note:** Resizing an image over its original size may make the image blurry Configuration ============= [](#configuration) You can change the default configuration in the `config/midia.php` file. ```