GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Sign in
  • ActionsCI/CD and automation
  • CodespacesCloud development environments
  • All Features
  • Documentation
  • Training
  • Certifications
  • Build with Copilot
  • Customize Copilot
  • Integrations
  • Trending repos
  • GitHub Sponsors
  • Developer articles
  • Enterprises

This view

  • Original page
  • New address

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

BranchesTags
Open more actions menu

Latest commit

 

History

497 Commits
497 Commits

Folders and files

NameName
Last commit message
Last commit date
bridges
bridges
 
 
dist
dist
 
 
node_modules
node_modules
 
 
src
src
 
 
.gitignore
.gitignore
 
 
.nojekyll
.nojekyll
 
 
.travis.yml
.travis.yml
 
 
API.md
API.md
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 
gulpfile.js
gulpfile.js
 
 
index.html
index.html
 
 
listing-response-example.json
listing-response-example.json
 
 
package.json
package.json
 
 
screenshot.gif
screenshot.gif
 
 
yarn.lock
yarn.lock
 
 

Repository files navigation

Update Dec 2018

Hi!, I am moving the project from AngularJS to React + Redux (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


angular-filemanager

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 a web file manager interface, allowing you to create your own backend connector following the connector API. By the way, we provide some example backend connectors in many languages as example (php-ftp, php-local, python, etc)

Build Status

Try the DEMO


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


Using in your existing project

1) Install deps using yarn with yarn install

2) Include the dependencies in your project

<!-- third party -->
  <script src="node_modules/jquery/dist/jquery.min.js"></script>
  <script src="node_modules/angular/angular.min.js"></script>
  <script src="node_modules/angular-translate/dist/angular-translate.min.js"></script>
  <script src="node_modules/ng-file-upload/dist/ng-file-upload.min.js"></script>
  <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="node_modules/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>

Extending the configuration file by adding a script

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

Create a new build with your changes

  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.


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.

About

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

joni2back.github.io/angular-filemanager/

Topics

angularfile-browserfile-explorerfile-managerfile-uploadfilemanagerhacktoberfesthacktoberfest2020javascriptmaterial-design

Resources

Readme
MIT license
Activity

Stars

1.8k stars

Watchers

119 watching

Forks

575 forks
Report repository

Releases

Packages

Used by

Contributors

Languages

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.