File manager developed with AngularJS and Bootstrap by Jonas Sciangula Street
-
bower install --save angular-filemanager
-
include the dependencies in your project:
<script src="http://github.com/bower_components/angular-translate/angular-translate.min.js"></script> <script src="http://github.com/bower_components/angular-cookies/angular-cookies.min.js"></script> <script src="http://github.com/bower_components/angular-filemanager/dist/angular-filemanager.min.js"></script> <script src="http://github.com/bower_components/angular-filemanager/dist/cached-templates.js"></script> -
use the angular directive in your HTML:
To configure the file manager you can simply add a config to your config.js:
angular.module('yourApp')
.config(function() {
// ...
});
angular.module('FileManagerApp').constant("fileManagerConfig", {
appName: "https://github.com/joni2back/angular-filemanager",
defaultLang: "en",
listUrl: "bridges/php/handler.php",
uploadUrl: "bridges/php/handler.php",
renameUrl: "bridges/php/handler.php",
copyUrl: "bridges/php/handler.php",
removeUrl: "bridges/php/handler.php",
editUrl: "bridges/php/handler.php",
getContentUrl: "bridges/php/handler.php",
createFolderUrl: "bridges/php/handler.php",
downloadFileUrl: "bridges/php/handler.php",
compressUrl: "bridges/php/handler.php",
extractUrl: "bridges/php/handler.php",
permissionsUrl: "bridges/php/handler.php",
allowedActions: {
rename: true,
copy: true,
edit: true,
changePermissions: true,
compress: true,
extract: true,
download: true,
preview: true,
delete: true
},
enablePermissionsRecursive: true,
isEditableFilePattern: '\\.(txt|html|htm|aspx|asp|ini|pl|py|md|php|css|js|log|htaccess|htpasswd|json|sql|xml|xslt|sh|rb|as|bat|cmd|coffee|php[3-6]|java|c|cbl|go|h|scala|vb)$',
isImageFilePattern: '\\.(jpg|jpeg|gif|bmp|png|svg|tiff)$',
isExtractableFilePattern: '\\.(zip|gz|tar|rar|gzip)$'
});
Mobile support
- Multilanguage (English / Spanish / Portuguese)
- Multiple templates (List / Icons)
- Multiple file upload
- Search files
- Directory tree navigation
- Copy, Move, Rename (Interactive UX)
- Delete, Edit, Preview, Download
- File permissions (Unix chmod style)
- Multiple file selector
- Dropbox and Google Drive compatibility
- Backend bridges (PHP, Java, Python, Node, .Net)
URL: $config.listUrl, Method: POST
{ "params": {
"mode": "list",
"onlyFolders": false,
"path": "/public_html"
}}{ "result": [
{
"name": "joomla",
"rights": "drwxr-xr-x",
"size": "4096",
"date": "2015-04-29 09:04:24",
"type": "dir"
}, {
"name": "magento",
"rights": "drwxr-xr-x",
"size": "4096",
"date": "17:42",
"type": "dir"
}, {
"name": "index.php",
"rights": "-rw-r--r--",
"size": "0",
"date": "2013-11-01 11:44:13",
"type": "file"
}
]}URL: $config.renameUrl, Method: POST
{ "params": {
"mode": "rename",
"path": "/public_html/index.php",
"newPath": "/public_html/index2.php"
}}{ "result": { "success": true, "error": null } }URL: $config.copyUrl, Method: POST
{ "params": {
"mode": "copy",
"path": "/public_html/index.php",
"newPath": "/public_html/index-copy.php"
}}{ "result": { "success": true, "error": null } }URL: $config.removeUrl, Method: POST
{ "params": {
"mode": "delete",
"path": "/public_html/index.php",
}}{ "result": { "success": true, "error": null } }URL: $config.editUrl, Method: POST
{ "params": {
"mode": "savefile",
"content": "<?php echo random(); ?>",
"path": "/public_html/index.php",
}}{ "result": { "success": true, "error": null } }URL: $config.getContentUrl, Method: POST
{ "params": {
"mode": "editfile",
"path": "/public_html/index.php"
}}{ "result": "<?php echo random(); ?>" }URL: $config.createFolderUrl, Method: POST
{ "params": {
"mode": "addfolder",
"name": "new-folder",
"path": "/public_html"
}}{ "result": { "success": true, "error": null } }URL: $config.permissionsUrl, Method: POST
{ "params": {
"mode": "changepermissions",
"path": "/public_html/index.php",
"perms": "653",
"permsCode": "rw-r-x-wx",
"recursive": false
}}{ "result": { "success": true, "error": null } }URL: $config.compressUrl, Method: POST
{ "params": {
"mode": "compress",
"path": "/public_html/compressed.zip",
"destination": "/public_html/backups"
}}{ "result": { "success": true, "error": null } }URL: $config.extractUrl, Method: POST
{ "params": {
"mode": "extract",
"destination": "/public_html/extracted-files",
"path": "/public_html/compressed.zip",
"sourceFile": "/public_html/compressed.zip"
}}{ "result": { "success": true, "error": null } }URL: $config.uploadUrl, Method: POST, Content-Type: multipart/form-data
Unlimited file upload, each item will be enumerated as file-1, file-2, etc.
[$config.uploadUrl]?destination=/public_html/image.jpg&file-1={..}&file-2={...}
{ "result": { "success": true, "error": null } }URL: $config.downloadFileUrl, Method: GET
[$config.downloadFileUrl]?mode=download&preview=true&path=/public_html/image.jpg
-File content
Any backend error should be with an error 500 HTTP code. Btw, you can also report errors with a 200 response using this json structure
{ "result": {
"success": false,
"error": "Access denied to remove file"
}}To contribute to the project you can simply fork this repo. To build a minified version, you can simply run the Gulp
task gulp build. The minified/uglified files are created in the dist folder.
For transparency into our release cycle and in striving to maintain backward compatibility, angular-filemanager is maintained under the Semantic Versioning guidelines.
Code and documentation released under the MIT license.