qjon / ri-filemanager
File manager bundle
Installs: 55
Dependents: 0
Suggesters: 0
Security: 0
Stars: 2
Watchers: 2
Forks: 1
Open Issues: 1
Type:symfony-bundle
Requires
- doctrine/dbal: <2.5
- doctrine/doctrine-bundle: ~1.2
- doctrine/orm: ~2.2,>=2.2.3,<2.5
- friendsofsymfony/jsrouting-bundle: >=1.5.4
- symfony/symfony: >=2.6.1
This package is not auto-updated.
Last update: 2024-04-27 15:58:14 UTC
README
Symfony2 filemanager bundle
Requirements
JavaScript
- lodash
- jquery
- bootstrap
- angular
- angular-route
- angular-animate
- angular-resource
- angular-strap
- angular-translate
- angular-translate-loader-static-files
- angular-growl-2
- ng-flow
- cropper
PHP
- stfalcon/tinymce-bundle
- friendsofsymfony/jsrouting-bundle
Demo
Here you can find DEMO.
Instalation
This tool is ready to use, you dont need to do anything
-
Add to your composer.json
..., "require": { ..., "qjon/ri-filemanager": "dev-master" }
-
Add to AppKernel.php
public function registerBundles() { $bundles = array( ... new FOS\JsRoutingBundle\FOSJsRoutingBundle(), new RI\FileManagerBundle\RIFileManagerBundle(), );
...
}
The first bundle is used to use Symfony routing in JS, the second is our filemanager bundle.
-
Add routing
RIFileManagerBundle: resource: "@RIFileManagerBundle/Resources/config/routing.yml" prefix: /filemanager
-
Set proper configuration in app/config.yml
assetic: ... bundles: ["RIFileManagerBundle"]
...
ri_file_manager: upload_dir: /uploads resize: true resize_max_width: 1600 allow_change_language: true default_language: pl_PL mime_types: images: ['image/jpg', 'image/jpeg', 'image/png', 'image/gif', 'image/png'] audio: ['audio/mpeg', 'audio/x-ms-wma', 'audio/vnd.rn-realaudio', 'audio/x-wav'] video: ['video/mpeg', 'video/mp4', 'video/quicktime', 'video/x-ms-wmv'] archive: ['application/zip'] others: - 'application/pdf' dimensions: - name: Crop size one width: 800 height: 500 - name: Crop size two width: 1200 height: 400
- upload_dir (string) - name of dir in web directory when will be upload all files
- resize (bool) - all uploaded image will be resized if they are too large
- resize_max_width (int) - works only with resize = true
- allow_change_language (bool) - if true display dropdown to change language, if false the dropdown is not shown: default true
- default_language (string) - default language of the app (now available: en_EN, pl_PL), default: en_EN
- mime_types (array) - list of all file types which can be uploaded (if nothing set all file types are available)
- image (array) - list of mime file types which should be interpreted as image type
- audio (array) - list of mime file types which should be interpreted as audio type
- video (array) - list of mime file types which should be interpreted as video type
- archive (array) - list of mime file types which should be interpreted as archive type
- others (array) - list of mime file types which should be available for upload and does not match to any above categories
- dimensions (array) - predefined list of available crop dimensions
Usage
Standalone version
This is the simple way to use this bundle. In your twig template you should include:
-
CSS template (include all CSS files)
{% include 'RIFileManagerBundle:Default:css.html.twig' %}
-
JS template (include third part libraries, application and templates)
{% include 'RIFileManagerBundle:Default:javascript_min.html.twig' %}
Then you should initialize application where you can set some configuration
<script>
var fm = angular.module('fm', ['filemanager'])
.config(['configProviderProvider', function (ConfigProvider) {
ConfigProvider.setConfig({{ filemanager_configuration|json_encode|raw }})
}]);
</script>
<div class="filemanager" ng-app="fm">
<h1>{% verbatim %}{{'FILEMANAGER' | translate}}{% endverbatim %}</h1>
<div class="animation" ng-view style="width: 100%;"></div>
</div>
All above configuration you find in Resources/views/Default/index.html.twig
TinyMce file and image plugin
This bundle can be used as TinyMce file and image plugin. First you should prepare page with TinyMce editor. You can use stfalcon/tinymce-bundle (read installation manual on https://github.com/stfalcon/TinymceBundle).
If you have working example of TinyMce editor, you can attach filemanager plugin.
stfalcon_tinymce:
...
theme:
advanced:
...
file_browser_callback: 'myFileBrowser'
...
Then you should include tinymce JS plugin file and routing files, which open select image dialog.
<script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
<script src="{{ path('fos_js_routing_js', {'callback': 'fos.Router.setData'}) }}"></script>
<script src="{{ asset('bundles/rifilemanager/js/tinymce_plugin.js') }}"></script>
or simple one line
{% include 'RIFileManagerBundle:Default:javascript_tinymce.html.twig' %}
After that you should change filemanager application configuration and set non stand alone version.
<script>
var fm = angular.module('fm', ['filemanager'])
.config(['configProviderProvider', function (configProviderProvider) {
configProviderProvider.setConfig({
standAlone: false
})
}]);
</script>
That is all, everything should work.