file browsing + upload

config/anavel.php

@@ -51,6 +51,14 @@
 
     ],
 
+    /*
+    |--------------------------------------------------------------------------
+    | CKeditor uploads path
+    |--------------------------------------------------------------------------
+    |
+    */
+    'ckeditor_uploads_path' => 'uploads/ckeditor',
+
     /*
     |--------------------------------------------------------------------------
     | Modules

public/dist/css/custom.css

@@ -0,0 +1,8 @@
+.img-preview {
+    cursor: pointer;
+}
+
+.img-preview img {
+    width: 200px;
+    height: 200px;
+}

public/plugins/ckeditor/config.js

@@ -28,11 +28,14 @@ CKEDITOR.editorConfig = function( config ) {
 
 	// Remove some buttons provided by the standard plugins, which are
 	// not needed in the Standard(s) toolbar.
-	config.removeButtons = 'Underline,Subscript,Superscript';
+	//config.removeButtons = 'Underline,Subscript,Superscript';
 
 	// Set the most common block elements.
 	config.format_tags = 'p;h1;h2;h3;pre';
 
 	// Simplify the dialog windows.
 	config.removeDialogTabs = 'image:advanced;link:advanced';
+
+    config.filebrowserBrowseUrl = $('body').data('ckeditor-file-browser-url');
+    config.filebrowserUploadUrl = $('body').data('ckeditor-file-uploader-url');
 };

src/Http/Controllers/DefaultController.php

@@ -1,20 +1,97 @@
 <?php
 namespace Anavel\Foundation\Http\Controllers;
 
+use Illuminate\Http\Request;
+
 class DefaultController extends Controller
 {
     public function index()
     {
         return view(config('anavel.dashboard_view'));
     }
 
-    public function ckeditorFileUploader()
+    /**
+     * Store the files uploaded by ckeditor
+     *
+     * @param Request $request
+     * @return Response
+     */
+    public function ckeditorFileUploader(Request $request)
     {
+        $url = '';
+        $message = '';
+
+        if ($request->hasFile('upload')) {
+            $fileName = uniqid() . '-' . $request->file('upload')->getClientOriginalName();
+
+            $request->file('upload')->move(
+                base_path(DIRECTORY_SEPARATOR . 'public' . DIRECTORY_SEPARATOR . config('anavel.ckeditor_uploads_path')),
+                $fileName
+            );
+
+            $url = url(config('anavel.ckeditor_uploads_path')) . DIRECTORY_SEPARATOR . $fileName;
+        } else if (! empty($request->file('upload')) && ! $request->file('upload')->isValid()) {
+            $message = $request->file('upload')->getErrorMessage();
+        }
 
+        return view('anavel::pages.ckeditor.uploader', [
+            'funcNum' => $request->get('CKEditorFuncNum'),
+            'url' => $url,
+            'message' => $message
+        ]);
     }
 
     public function ckeditorFileBrowser()
     {
+        $base = public_path(config('anavel.ckeditor_uploads_path'));
+
+        if (!is_dir($base) && ! @mkdir($base, 0700, true)) {
+            throw new Exception(__('Folder %s not exists and can not be created', config('anavel.ckeditor_uploads_path')));
+        }
+
+        if (!is_dir($base)) {
+            throw new Exception(__('Folder %s not exists', config('anavel.ckeditor_uploads_path')));
+        } elseif (!is_writable($base)) {
+            throw new Exception(__('Folder %s has not write permissions', config('anavel.ckeditor_uploads_path')));
+        }
+
+        $dir = null;
+
+        list($files, $directories) = $this->getFilesDirectories($base, $dir, config('anavel.ckeditor_uploads_path'));
+
+        return view('anavel::pages.ckeditor.browser', [
+            'directories' => $directories,
+            'files' => $files
+        ]);
+    }
+
+    private function getFilesDirectories($base, $dir, $public)
+    {
+        if (substr($base, -1) !== DIRECTORY_SEPARATOR) {
+            $base = $base.DIRECTORY_SEPARATOR;
+        }
+
+        if (substr($public, -1) !== DIRECTORY_SEPARATOR) {
+            $public = $public.DIRECTORY_SEPARATOR;
+        }
 
+        $directories = $files = [];
+        foreach (glob($base.'*', GLOB_MARK) as $each) {
+            $each = str_replace($base, '', $each);
+            if (substr($each, -1) === '/') {
+                $directories[] = [
+                    'dir' => base64_encode($dir.$each),
+                    'slug' => base64_encode($each),
+                    'name' => $each,
+                ];
+            } else {
+                $files[] = [
+                    'slug' => base64_encode($each),
+                    'url' => asset($public.$each),
+                    'name' => $each,
+                ];
+            }
+        }
+        return [$files, $directories];
     }
 }

views/layouts/master.blade.php

@@ -14,6 +14,8 @@
         <!-- Theme style -->
         <link href="{{ asset('vendor/anavel/dist/css/AdminLTE.min.css') }}" rel="stylesheet" type="text/css" />
 
+        <link href="{{ asset('vendor/anavel/dist/css/custom.css') }}" rel="stylesheet" type="text/css" />
+
         <link href="{{ asset('vendor/anavel/dist/css/skins/'.config('anavel.skin').'.min.css') }}" rel="stylesheet" type="text/css" />
 
         <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
@@ -26,7 +28,7 @@
     </head>
 
     @section('body')
-    <body class="{{ config('anavel.layout_options') }} {{ config('anavel.skin') }} @section('body-classes')@show" data-ckeditor-file-browser-url="{{ route('anavel.ckeditor.file-browser') }}" data-ckeditor-file-uploader-url="{{ route('anavel.ckeditor.file-uploader') }}">
+    <body class="{{ config('anavel.layout_options') }} {{ config('anavel.skin') }} @section('body-classes')@show" data-ckeditor-file-browser-url="{{ route('anavel.ckeditor.file-browser') }}" data-ckeditor-file-uploader-url="{{ route('anavel.ckeditor.file-uploader', ['_token' => csrf_token()]) }}">
         <div class="wrapper">
             @section('header')
                 @include('anavel::molecules.header.default')

views/layouts/simple.blade.php

@@ -0,0 +1,5 @@
+@extends('anavel::layouts.master')
+
+@section('header')@stop
+
+@section('sidebar')@stop

views/pages/ckeditor/browser.blade.php

@@ -0,0 +1,43 @@
+@extends('anavel::layouts.simple')
+
+@section('body-classes')
+    sidebar-collapse
+@stop
+
+@section('content')
+    <div class="box box-default">
+        <div class="box-header">
+            <h3><i class="fa fa-file"></i>{{ trans('anavel::messages.file_browser_title') }}</h3>
+        </div>
+        <div class="box-body">
+            <div class="row">
+                @foreach ($files as $file)
+                <div class="col-sm-4 col-md-2 img-preview" data-url="{{ $file['url'] }}" onclick="returnFileUrl(this)">
+                    <img src="{{ $file['url'] }}" alt="">
+                </div>
+                @endforeach
+            </div>
+        </div>
+    </div>
+@stop
+
+@section('footer-scripts')
+    @parent
+
+    <script>
+        // Helper function to get parameters from the query string.
+        function getUrlParam( paramName ) {
+            var reParam = new RegExp( '(?:[\?&]|&)' + paramName + '=([^&]+)', 'i' );
+            var match = window.location.search.match( reParam );
+
+            return ( match && match.length > 1 ) ? match[1] : null;
+        }
+        // Simulate user action of selecting a file to be returned to CKEditor.
+        function returnFileUrl(element) {
+            var funcNum = getUrlParam( 'CKEditorFuncNum' );
+            var fileUrl = $(element).data('url');
+            window.opener.CKEDITOR.tools.callFunction( funcNum, fileUrl );
+            window.close();
+        }
+    </script>
+@stop

views/pages/ckeditor/uploader.blade.php

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+</head>
+<body>
+<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction({{ $funcNum }}, '{{ $url }}', '{{ $message }}');</script>
+</body>
+</html>