The angular-filemanager's intro from silenthoo

angular-filemanager

File manager developed with AngularJS and Bootstrap by Jonas Sciangula Street

use in your project

1) install and use

bower install --save angular-filemanager
include the dependencies in your project:
<script src="/bower_components/angular-translate/angular-translate.min.js"></script> <script src="/bower_components/angular-cookies/angular-cookies.min.js"></script> <script src="/bower_components/angular-filemanager/dist/angular-filemanager.min.js"></script> <script src="/bower_components/angular-filemanager/dist/cached-templates.js"></script>
use the angular directive in your HTML:

2) configure

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)$'
});

Try the DEMO (only listing and file editor)

Mobile support

Features

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)

TODO

Multiple file selector
Dropbox and Google Drive compatibility
Backend bridges (PHP, Java, Python, Node, .Net)

Backend API

Listing

URL: $config.listUrl, Method: POST

JSON Request content

{ "params": {
    "mode": "list",
    "onlyFolders": false,
    "path": "/public_html"
}}

JSON Response

{ "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"
    }
]}

Rename / Move

URL: $config.renameUrl, Method: POST

JSON Request content

{ "params": {
    "mode": "rename",
    "path": "/public_html/index.php",
    "newPath": "/public_html/index2.php"
}}

JSON Response

{ "result": { "success": true, "error": null } }

Copy

URL: $config.copyUrl, Method: POST

JSON Request content

{ "params": {
    "mode": "copy",
    "path": "/public_html/index.php",
    "newPath": "/public_html/index-copy.php"
}}

JSON Response

{ "result": { "success": true, "error": null } }

Remove

URL: $config.removeUrl, Method: POST

JSON Request content

{ "params": {
    "mode": "delete",
    "path": "/public_html/index.php",
}}

JSON Response

{ "result": { "success": true, "error": null } }

Edit file

URL: $config.editUrl, Method: POST

JSON Request content

{ "params": {
    "mode": "savefile",
    "content": "<?php echo random(); ?>",
    "path": "/public_html/index.php",
}}

JSON Response

{ "result": { "success": true, "error": null } }

Get content of a file

URL: $config.getContentUrl, Method: POST

JSON Request content

{ "params": {
    "mode": "editfile",
    "path": "/public_html/index.php"
}}

JSON Response

{ "result": "<?php echo random(); ?>" }

Create folder

URL: $config.createFolderUrl, Method: POST

JSON Request content

{ "params": {
    "mode": "addfolder",
    "name": "new-folder",
    "path": "/public_html"
}}

JSON Response

{ "result": { "success": true, "error": null } }

Set permissions

URL: $config.permissionsUrl, Method: POST

JSON Request content

{ "params": {
    "mode": "changepermissions",
    "path": "/public_html/index.php",
    "perms": "653",
    "permsCode": "rw-r-x-wx",
    "recursive": false
}}

JSON Response

{ "result": { "success": true, "error": null } }

Compress file

URL: $config.compressUrl, Method: POST

JSON Request content

{ "params": {
    "mode": "compress",
    "path": "/public_html/compressed.zip",
    "destination": "/public_html/backups"
}}

JSON Response

{ "result": { "success": true, "error": null } }

Extract file

URL: $config.extractUrl, Method: POST

JSON Request content

{ "params": {
    "mode": "extract",
    "destination": "/public_html/extracted-files",
    "path": "/public_html/compressed.zip",
    "sourceFile": "/public_html/compressed.zip"
}}

JSON Response

{ "result": { "success": true, "error": null } }

Upload file

URL: $config.uploadUrl, Method: POST, Content-Type: multipart/form-data
Unlimited file upload, each item will be enumerated as file-1, file-2, etc.

Http post params

[$config.uploadUrl]?destination=/public_html/image.jpg&file-1={..}&file-2={...}

JSON Response

{ "result": { "success": true, "error": null } }

Download / Preview file

URL: $config.downloadFileUrl, Method: GET

Http query params

[$config.downloadFileUrl]?mode=download&preview=true&path=/public_html/image.jpg

Response

-File content

Errors / Exceptions

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"
}}

Contribute

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.

Versioning

For transparency into our release cycle and in striving to maintain backward compatibility, angular-filemanager is maintained under the Semantic Versioning guidelines.

Copyright and license

Code and documentation released under the MIT license.

silenthoo / angular-filemanager Goto Github PK

angular-filemanager's Introduction

angular-filemanager

use in your project

1) install and use

2) configure

Features

TODO

Backend API

Listing

JSON Request content

JSON Response

Rename / Move

JSON Request content

JSON Response

Copy

JSON Request content

JSON Response

Remove

JSON Request content

JSON Response

Edit file

JSON Request content

JSON Response

Get content of a file

JSON Request content

JSON Response

Create folder

JSON Request content

JSON Response

Set permissions

JSON Request content

JSON Response

Compress file

JSON Request content

JSON Response

Extract file

JSON Request content

JSON Response

Upload file

Http post params

JSON Response

Download / Preview file

Http query params

Response

Errors / Exceptions

Contribute

Versioning

Copyright and license

Recommend Projects

Recommend Topics

Recommend Org