b-esmaili / angular-filemanager

JavaScript HTML5 File Management Material Design Folder Explorer Navigator Browser Manager in AngularJS (with FTP in PHP / Java)

angular-filemanager

A very smart filemanager to manage your files in the browser developed in AngularJS with Material-Design styles by Jonas Sciangula Street

Try the DEMO

---

Features

• Multilanguage (English / Spanish / Portuguese / French)
• 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)
• Mobile support

TODO

• Improve the docs
• Multiple file selector
• Drag and drop
• Dropbox and Google Drive compatibility
• Extend backend bridges (PHP, Java, Python, Node, .Net)
• Migrate jQuery to native or angular.element

Backend API

Read the docs

---

Use in your existing project

1) Install and use bower install --save angular-filemanager

2) Include the dependencies in your project

<!-- third party -->
  <script src="bower_components/angular/angular.min.js"></script>
  <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/jquery/dist/jquery.min.js"></script>
  <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="bower_components/bootswatch/paper/bootstrap.min.css" />

<!-- angular-filemanager -->
  <link rel="stylesheet" href="dist/angular-filemanager.min.css">
  <script src="dist/angular-filemanager.min.js"></script>

3) Use the angular directive in your HTML

<angular-filemanager></angular-filemanager>

---

Using source files instead of minified js

<!-- Uncomment if you need to use raw source code
  <script src="src/js/app.js"></script>
  <script src="src/js/directives/directives.js"></script>
  <script src="src/js/filters/filters.js"></script>
  <script src="src/js/providers/config.js"></script>
  <script src="src/js/entities/chmod.js"></script>
  <script src="src/js/entities/item.js"></script>
  <script src="src/js/services/filenavigator.js"></script>
  <script src="src/js/services/fileuploader.js"></script>
  <script src="src/js/providers/translations.js"></script>
  <script src="src/js/controllers/main.js"></script>
  <script src="src/js/controllers/selector-controller.js"></script>
  <link href="src/css/animations.css" rel="stylesheet">
  <link href="src/css/dialogs.css" rel="stylesheet">
  <link href="src/css/main.css" rel="stylesheet">
-->

<!-- Comment if you need to use raw source code -->
  <link href="dist/angular-filemanager.min.css" rel="stylesheet">
  <script src="dist/angular-filemanager.min.js"></script>
<!-- /Comment if you need to use raw source code -->

---

Extending the configuration file

<script type="text/javascript">
  angular.module('FileManagerApp').config(['fileManagerConfigProvider', function (config) {
    var defaults = config.$get();
    config.set({
      appName: 'my angular-filemanager',
      allowedActions: angular.extend(defaults.allowedActions, {
        remove: true
      })
    });
  }]);
</script>

---

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.