Check vendor/unisharp/laravel-filemanager/src/views/demo.blade.php, which already integrated all options from below.

WYSIWYG Editor Integration:

Option 1: CKEditor

<textarea id="my-editor" name="content" class="form-control">{!! old('content', 'test editor content') !!}</textarea>
<script src="//"></script>
  var options = {
    filebrowserImageBrowseUrl: '/laravel-filemanager?type=Images',
    filebrowserImageUploadUrl: '/laravel-filemanager/upload?type=Images&_token=',
    filebrowserBrowseUrl: '/laravel-filemanager?type=Files',
    filebrowserUploadUrl: '/laravel-filemanager/upload?type=Files&_token='

Option 2: TinyMCE4

<script src="//"></script>
<textarea name="content" class="form-control my-editor">{!! old('content', $content) !!}</textarea>
  var editor_config = {
    path_absolute : "/",
    selector: "",
    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 + 'laravel-filemanager?field_name=' + field_name;
      if (type == 'image') {
        cmsURL = cmsURL + "&type=Images";
      } else {
        cmsURL = cmsURL + "&type=Files";
        file : cmsURL,
        title : 'Filemanager',
        width : x * 0.8,
        height : y * 0.8,
        resizable : "yes",
        close_previous : "no"


Option 3: Summernote

<!-- dependencies (Summernote depends on Bootstrap & jQuery) -->
<link href="" rel="stylesheet">
<script src=""></script>
<script src=""></script>

<link href="" rel="stylesheet">
<script src=""></script>

<!-- markup -->
<textarea id="summernote-editor" name="content">{!! old('content', $content) !!}</textarea>

<!-- summernote config -->

    // Define function to open filemanager window
    var lfm = function(options, cb) {
      var route_prefix = (options && options.prefix) ? options.prefix : '/laravel-filemanager'; + '?type=' + options.type || 'file', 'FileManager', 'width=900,height=600');
      window.SetUrl = cb;

    // Define LFM summernote button
    var LFMButton = function(context) {
      var ui = $.summernote.ui;
      var button = ui.button({
        contents: '<i class="note-icon-picture"></i> ',
        tooltip: 'Insert image with filemanager',
        click: function() {

          lfm({type: 'image', prefix: '/laravel-filemanager'}, function(lfmItems, path) {
            lfmItems.forEach(function (lfmItem) {
              context.invoke('insertImage', lfmItem.url);

      return button.render();

    // Initialize summernote with LFM button in the popover button group
    // Please note that you can add this button to any other button group you'd like
      toolbar: [
        ['popovers', ['lfm']],
      buttons: {
        lfm: LFMButton

Standalone button

If you are going to use filemanager independently, meaning set the value of an input to selected photo/file url, follow this structure:

  1. Create a button, input, and image preview holder if you are going to choose images. Specify the id to the input and image preview by data-input and data-preview.

     <div class="input-group">
       <span class="input-group-btn">
         <a id="lfm" data-input="thumbnail" data-preview="holder" class="btn btn-primary">
           <i class="fa fa-picture-o"></i> Choose
       <input id="thumbnail" class="form-control" type="text" name="filepath">
     <img id="holder" style="margin-top:15px;max-height:100px;">
  2. Import lfm.js(run php artisan vendor:publish if you need).

     <script src="/vendor/laravel-filemanager/js/stand-alone-button.js"></script>
  3. Init filemanager with type. (requires jQuery)




    Domain can be specified in the second parameter(optional, but will be required when developing on Windows mechines) :

     var domain = "";
     $('#lfm').filemanager('image', {prefix: domain});

JavaScript integration

In case you are developing javascript application and you want dynamically to trigger filemanager popup, you can create function like this. It doesn’t rely on jQuery.

var lfm = function(options, cb) {

  var route_prefix = (options && options.prefix) ? options.prefix : '/laravel-filemanager'; + '?type=' + options.type || 'file', 'FileManager', 'width=900,height=600');
  window.SetUrl = cb;

And use it like this:

lfm({type: 'image', prefix: 'prefix'}, function(url, path) {


Embed file manager

<iframe src="/laravel-filemanager" style="width: 100%; height: 500px; overflow: hidden; border: none;"></iframe>