224 lines
7.1 KiB
Markdown
224 lines
7.1 KiB
Markdown
# laravel-filemanager
|
|
|
|
A files and images management user interface with file uploading support. (Works well with CKEditor and TinyMCE)
|
|
|
|
PR is welcome!
|
|
|
|
## Overview
|
|
|
|
* The project was forked from [tsawler/laravel-filemanager](http://packalyst.com/packages/package/tsawler/laravel-filemanager)
|
|
* Support public and private folders for multi users
|
|
* Customizable views, routes and middlewares
|
|
* Supported locales : en, fr, zh-TW, zh-CN, pt-BR
|
|
|
|
|
|
## Requirements
|
|
|
|
* php >= 5.5
|
|
* Laravel 5
|
|
* requires [intervention/image](https://github.com/Intervention/image) (to make thumbs, crop and resize images).
|
|
|
|
## Installation
|
|
|
|
1. Install package
|
|
|
|
```bash
|
|
composer require unisharp/laravel-filemanager
|
|
```
|
|
|
|
1. Edit `config/app.php` :
|
|
|
|
Add service providers
|
|
|
|
```php
|
|
Unisharp\Laravelfilemanager\LaravelFilemanagerServiceProvider::class,
|
|
Intervention\Image\ImageServiceProvider::class,
|
|
```
|
|
|
|
And add class aliases
|
|
|
|
```php
|
|
'Image' => Intervention\Image\Facades\Image::class,
|
|
```
|
|
|
|
1. Publish the package's config and assets :
|
|
|
|
```bash
|
|
php artisan vendor:publish --tag=lfm_config
|
|
php artisan vendor:publish --tag=lfm_public
|
|
```
|
|
|
|
1. Ensure that the files & images directories (in `config/lfm.php`) are writable by your web server.
|
|
|
|
## WYSIWYG Editor Integration:
|
|
### Option 1: CKEditor
|
|
|
|
1. Install [laravel-ckeditor](https://github.com/UniSharp/laravel-ckeditor) package
|
|
|
|
1. Modify the views
|
|
|
|
Sample 1 - Replace by ID:
|
|
```html
|
|
<script src="/vendor/unisharp/laravel-ckeditor/ckeditor.js"></script>
|
|
<textarea id="my-editor" name="content" class="form-control">{!! old('content', $content) !!}</textarea>
|
|
<script>
|
|
CKEDITOR.replace( 'my-editor', {
|
|
filebrowserImageBrowseUrl: '/laravel-filemanager?type=Images',
|
|
filebrowserImageUploadUrl: '/laravel-filemanager/upload?type=Images&_token={{csrf_token()}}',
|
|
filebrowserBrowseUrl: '/laravel-filemanager?type=Files',
|
|
filebrowserUploadUrl: '/laravel-filemanager/upload?type=Files&_token={{csrf_token()}}'
|
|
});
|
|
</script>
|
|
```
|
|
|
|
Sample 2 - With JQuery Selector:
|
|
|
|
```html
|
|
<script src="/vendor/unisharp/laravel-ckeditor/ckeditor.js"></script>
|
|
<script src="/vendor/unisharp/laravel-ckeditor/adapters/jquery.js"></script>
|
|
<textarea name="content" class="form-control my-editor">{!! old('content', $content) !!}</textarea>
|
|
<script>
|
|
$('textarea.my-editor').ckeditor({
|
|
filebrowserImageBrowseUrl: '/laravel-filemanager?type=Images',
|
|
filebrowserImageUploadUrl: '/laravel-filemanager/upload?type=Images&_token={{csrf_token()}}',
|
|
filebrowserBrowseUrl: '/laravel-filemanager?type=Files',
|
|
filebrowserUploadUrl: '/laravel-filemanager/upload?type=Files&_token={{csrf_token()}}'
|
|
});
|
|
</script>
|
|
```
|
|
|
|
### Option 2: TinyMCE4
|
|
|
|
```html
|
|
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
|
|
<textarea name="content" class="form-control my-editor">{!! old('content', $content) !!}</textarea>
|
|
<script>
|
|
var editor_config = {
|
|
path_absolute : "/",
|
|
selector: "textarea",
|
|
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";
|
|
}
|
|
|
|
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);
|
|
</script>
|
|
```
|
|
|
|
## Config
|
|
|
|
In `config/lfm.php` :
|
|
|
|
```php
|
|
'rename_file' => true,
|
|
// true : files will be renamed as uniqid
|
|
// false : files will remain original names
|
|
|
|
'use_package_routes' => true,
|
|
// set this to false to customize route for file manager
|
|
|
|
'middlewares' => ['auth'],
|
|
// determine middlewares that apply to all file manager routes
|
|
|
|
'allow_multi_user' => true,
|
|
// true : user can upload files to shared folder and their own folder
|
|
// false : all files are put together in shared folder
|
|
|
|
'user_field' => 'id',
|
|
// determine which column of users table will be used as user's folder name
|
|
|
|
'shared_folder_name' => 'shares',
|
|
// the name of shared folder
|
|
|
|
'thumb_folder_name' => 'thumbs',
|
|
// the name of thumb folder
|
|
|
|
'images_dir' => 'public/photos/',
|
|
'images_url' => '/photos/',
|
|
// path and url of images
|
|
|
|
'files_dir' => 'public/files/',
|
|
'files_url' => '/files/',
|
|
// path and url of files
|
|
```
|
|
|
|
## Customization
|
|
|
|
1. If the route is changed, make sure urls below is correspond to your route :
|
|
|
|
CKEditor
|
|
```javascript
|
|
<script>
|
|
CKEDITOR.replace( 'editor', {
|
|
filebrowserImageBrowseUrl: '/your-custom-route?type=Images',
|
|
filebrowserBrowseUrl: '/your-custom-route?type=Files',
|
|
});
|
|
</script>
|
|
```
|
|
|
|
And be sure to include the `?type=Images` or `?type=Files` parameter.
|
|
|
|
TinyMCE
|
|
```javascript
|
|
...
|
|
var cmsURL = editor_config.path_absolute + 'your-custom-route?field_name='+field_name+'&lang='+ tinymce.settings.language;
|
|
if (type == 'image') {
|
|
cmsURL = cmsURL + "&type=Images";
|
|
} else {
|
|
cmsURL = cmsURL + "&type=Files";
|
|
}
|
|
...
|
|
```
|
|
|
|
1. To customize the views :
|
|
|
|
on Linux :
|
|
|
|
```bash
|
|
cp -rf vendor/unisharp/laravel-filemanager/src/views/* resources/views/vendor/laravel-filemanager/
|
|
```
|
|
|
|
on MAC :
|
|
|
|
```bash
|
|
cp -rf vendor/unisharp/laravel-filemanager/src/views/ resources/views/vendor/laravel-filemanager/
|
|
```
|
|
|
|
## Screenshots
|
|
|
|
|
|
|
|
## Credits
|
|
* All contibutors from GitHub. (issues / PR)
|
|
* Special thanks to
|
|
* [@taswler](https://github.com/tsawler) the author.
|
|
* [@welcoMattic](https://github.com/welcoMattic) providing fr translations and lots of bugfixes.
|
|
* [@fraterblack](https://github.com/fraterblack) TinyMCE 4 support and pt-BR translations.
|
|
* [@olivervogel](https://github.com/olivervogel) for the awesome [image library](https://github.com/Intervention/image)
|
|
* [All @UniSharp members](https://github.com/UniSharp)
|