Code Monkey home page Code Monkey logo

angular-filemanager's Introduction

angular-filemanager

File manager developed with AngularJS and Bootstrap by Jonas Sciangula Street

use in your project

1) install and use

  1. bower install --save angular-filemanager

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

alt tag alt tag 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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.