https://github.com/joni2back/angular-filemanager

JavaScript File Manager Material Design Folder Explorer Navigator Browser Manager in AngularJS with CSS3 Responsive (with FTP in PHP / Java / Node)
https://github.com/joni2back/angular-filemanager

angular file-browser file-explorer file-manager file-upload filemanager hacktoberfest hacktoberfest2020 javascript material-design

Last synced: 26 days ago
JSON representation

JavaScript File Manager Material Design Folder Explorer Navigator Browser Manager in AngularJS with CSS3 Responsive (with FTP in PHP / Java / Node)

• Host: GitHub
• URL: https://github.com/joni2back/angular-filemanager
• Owner: joni2back
• License: mit
• Created: 2014-10-01T12:12:39.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2022-09-16T02:03:19.000Z (almost 2 years ago)
• Last Synced: 2024-05-14T04:43:11.015Z (about 1 month ago)
• Topics: angular, file-browser, file-explorer, file-manager, file-upload, filemanager, hacktoberfest, hacktoberfest2020, javascript, material-design
• Language: JavaScript
• Homepage: https://joni2back.github.io/angular-filemanager/
• Size: 8.93 MB
• Stars: 1,755
• Watchers: 123
• Forks: 576
• Open Issues: 100
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-angularjs - joni2back/angular-filemanager - JavaScript HTML5 File Management Material Design Folder Explorer Navigator Browser Manager in AngularJS (with FTP in PHP / Java). (Asset Manager)
• awesome-stars - joni2back/angular-filemanager - JavaScript File Manager Material Design Folder Explorer Navigator Browser Manager in AngularJS with CSS3 Responsive (with FTP in PHP / Java / Node) (JavaScript)
• awesome-stars - joni2back/angular-filemanager
• awesome-stars - angular-filemanager - JavaScript File Manager Material Design Folder Explorer Navigator Browser Manager in AngularJS with CSS3 Responsive (with FTP in PHP / Java / Node) (JavaScript)

README

        
## Update Dec 2018

Hi!, I am moving the project from AngularJS to **React + Redux** [(react-filemanager)](https://github.com/joni2back/react-filemanager), it's very important for me your collaboration on my development tasks and time. Please help me to move forward with a donation by paypal :) [![Donate](https://www.paypal.com/en_GB/i/btn/btn_donate_LG.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=XRB7EW72PS982) 

---

# angular-filemanager

A very smart filemanager to manage your files in the browser developed in AngularJS following Material Design styles by [Jonas Sciangula Street](https://github.com/joni2back)

This project provides a web file manager interface, **allowing you to create your own backend connector** following the [connector API](API.md). 

*By the way, we provide some example backend connectors in many languages as example (php-ftp, php-local, python, etc)*

[![Build Status](https://travis-ci.org/joni2back/angular-filemanager.svg?branch=master)](https://travis-ci.org/joni2back/angular-filemanager)

#### [Try the DEMO](https://joni2back.github.io/angular-filemanager/)

---------

![](https://raw.githubusercontent.com/joni2back/angular-filemanager/master/screenshot.gif)

### Features

  - Multiple file support

  - Multilanguage

  - List and Icon view

  - Multiple file upload

  - 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 connectors

  - Remove usage of jQuery

### Backend API

[Read the docs](API.md)

---------

### Using in your existing project

**1) Install deps using yarn with**

```yarn install```

**2) Include the dependencies in your project**

```html

  

  

  

  

  

  

  

  

```

**3) Use the angular directive in your HTML**

```html

```

---------

### Extending the configuration file by adding a script

```html

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,

    }),

  });

}]);

```

### Create a new build with your changes

```sh

  gulp build || node node_modules/gulp/bin/gulp.js build

```

You can do many things by extending the configuration. Like hide the sidebar or the search button. See [the list of default configurations](/src/js/providers/config.js).

---------

### 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](http://semver.org/).

### Copyright and license

Code and documentation released under [the MIT license](https://github.com/joni2back/angular-filemanager/blob/master/LICENSE).