Showing posts with label angular-filemanager. Show all posts
Showing posts with label angular-filemanager. Show all posts
angular-filemanager

angular-filemanager

June 18, 2017
JavaScript HTML5 File Management Material Design Folder Explorer Navigator Browser Manager in AngularJS with CSS3 Responsive (with FTP in PHP / Java / Node)

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

This project provides you a font-end interface in order to allow you to create your own backend connector following the connector API.

By the way, we provide some backend connectors in many languages as example (ftp, local files, etc)

Support

This project is under free license. If you want to support the angular-filemanager development or just thank it's main maintainer by paying a beer, you can make a donation by clicking the following button

Try the DEMO

Features

  • Multilanguage (English, Chinese, Spanish, Russian, Portuguese, French, German, Italian, Slovak, Hebrew, Persian, Polish, Ukrainian, Turkish, etc...)
  • Multiple templates (List / Icons)
  • Multiple file upload
  • Multiple file support
  • Pick files callback for third parties apps
  • Search files
  • Directory tree navigation
  • Copy, Move, Rename (Interactive UX)
  • Delete, Edit, Preview, Download
  • File permissions (Unix chmod style)
  • Mobile support

TODO

  • 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 using Bower:
     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/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/apihandler.js"></script>  
  <script src="src/js/services/apimiddleware.js"></script>  
  <script src="src/js/services/filenavigator.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: 'angular-filemanager',  
   pickCallback: function(item) {  
    var msg = 'Picked %s "%s" for external use'  
     .replace('%s', item.type)  
     .replace('%s', item.fullPath());  
    window.alert(msg);  
   },  
   allowedActions: angular.extend(defaults.allowedActions, {  
    pickFiles: true,  
    pickFolders: false,  
   }),  
  });  
 }]);  
 </script>  
You can do many things by extending the configuration. Like hide the sidebar or the search button. See the list of default configurations.

Copyright and license

Code and documentation released under the MIT license.

How can I support older browsers?

Go to https://github.com/flowjs/fusty-flow.js and add to your config:

Note: Special thanks to Jonas Sciangula Street

Contact - joni2back@gmail.com

Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.