2017-05-29 07:00 AM

To manage unitarily the configuration files in the computer boards like Raspberry Pi and Orange PI not connected the display, install the file management application Angular-Filemanagement based on AngularJS. Assigned in advance the specific directory, files in it could be uploaded, downloaded, and edited on the web browser. The customers using these boards can manage files easily.




Have already installed lighttpd and php-cgi, if not installed, please install these.  

1.Download and install Angular-Filemanager

Access to these boards via ssh, move to the server directory and download Angular-Filemanager by git.


$ cd /var/www/html
$ git clone https://github.com/joni2back/angular-filemanager.git


2.Configure and modify the files related to the file management

$ cd angular-filemanager


Edit index.html like the following to contain the bridges/php-local configurations.


  <script type="text/javascript">
    //example to override angular-filemanager default config
    angular.module('FileManagerApp').config(['fileManagerConfigProvider', function (config) {
      var defaults = config.$get();
        appName: 'angular-filemanager',
        pickCallback: function(item) {
          var msg = 'Picked %s "%s" for external use'
            .replace('%s', item.type)
            .replace('%s', item.fullPath());
        listUrl: 'bridges/php-local/index.php',
        uploadUrl: 'bridges/php-local/index.php',
        renameUrl: 'bridges/php-local/index.php',
        copyUrl: 'bridges/php-local/index.php',
        moveUrl: 'bridges/php-local/index.php',
        removeUrl: 'bridges/php-local/index.php',
        editUrl: 'bridges/php-local/index.php',
        getContentUrl: 'bridges/php-local/index.php',
        createFolderUrl: 'bridges/php-local/index.php',
        downloadFileUrl: 'bridges/php-local/index.php',
        downloadMultipleUrl: 'bridges/php-local/index.php',
        compressUrl: 'bridges/php-local/index.php',
        extractUrl: 'bridges/php-local/index.php',
        permissionsUrl: 'bridges/php-local/index.php',

        allowedActions: angular.extend(defaults.allowedActions, {
                upload: true,
                rename: true,
                move: true,
                copy: true,
                edit: true,
                changePermissions: false,
                compress: true,
                compressChooseName: true,
                extract: true,
                download: true,
                downloadMultiple: true,
                preview: true,
                remove: true,
                createFolder: true,          
          		pickFiles: false,
				pickFolders: false
            isEditableFilePattern: /\.(m3u|txt|cnf|cfg|conf|ini|xml|sh)$/i,
            isImageFilePattern: /\.(jpe?g|gif|bmp|png|svg|tiff?)$/i,
            isExtractableFilePattern: /\.(gz|tar|rar|g?zip)$/i

<body class="ng-cloak">


Assign the specific directory managed by this application in bridges/php-local/index.php. The directory you will select is an optional one.

The following is the example if you create the directory named "files" in angular-filemanager folder.


 * Takes two arguments
 * - base path without last slash (default: '$currentDirectory/../files')
 * - language (default: 'en'); mute_errors (default: true, will call ini_set('display_errors', 0))
$fileManagerApi = new FileManagerApi(__DIR__ . '/../../files');


Edit bridges/php-local/LocalBridge/FileManagerApi.php partly.

When uploaded the files, terminate to call the function of changing the file name.


    private function uploadAction($path, $files)
        $path = $this->canonicalizePath($this->basePath . $path);

        foreach ($_FILES as $file) {
            $uploaded = move_uploaded_file(
                $path . DIRECTORY_SEPARATOR . $file['name']
            if ($uploaded === false) {
                return false;

        return true;



3.lighttpd Digest Authentication


Encrypt the password on MD5 from the combination of characters: user, realm and password.

Add the configurations for the Digest Authentication into /etc/lighttpdlighthttp.conf.


server.modules = (
	"mod_auth",              ----->ここを追加
#   "mod_rewrite",

server.document-root        = "/var/www/html"
server.upload-dirs          = ( "/var/cache/lighttpd/uploads" )
server.errorlog             = "/var/log/lighttpd/error.log"
server.pid-file             = "/var/run/lighttpd.pid"
server.username             = "www-data"
server.groupname            = "www-data"
server.port                 = 80

index-file.names            = ( "index.php", "index.html", "index.lighttpd.html" )
url.access-deny             = ( "~", ".inc" )
static-file.exclude-extensions = ( ".php", ".pl", ".fcgi" )

compress.cache-dir          = "/var/cache/lighttpd/compress/"
compress.filetype           = ( "application/javascript", "text/css", "text/html", "text/plain" )

# default listening port for IPv6 falls back to the IPv4 port
## Use ipv6 if available
#include_shell "/usr/share/lighttpd/use-ipv6.pl " + server.port
include_shell "/usr/share/lighttpd/create-mime.assign.pl"
include_shell "/usr/share/lighttpd/include-conf-enabled.pl"

auth.debug = 2
auth.backend                = "htdigest"
auth.backend.htdigest.userfile = "/etc/lighttpd/lighttpd.user"

# note this entry is relative to the server.document-root
auth.require = ( "/angular-filemanager" =>
    "method" => "basic",
    "realm" => "admin realm",
    "require" => "user=admin"


The following perl script can create the encrypted password automatically.


$ sudo pico lighttpd_auth_perl


perl command



print "User: ";
$user = <>;
chomp $user;
print "Realm: ";
$realm = <>;
chomp $realm;

use Term::ReadKey;
  print "Password: ";
  $password = ReadLine(0);
  chomp $password;
  print "\nPassword again: ";
  $password2 = ReadLine(0);
  chomp $password2;
  print "\n";

  if($password ne $password2)
    print "Passwords don't match\n";

print "$user:$realm:";
open(MD5, "|md5sum | cut -b -32") or die;
print MD5 "$user:$realm:$password";


Add an executable right and implement it.


$ sudo chmod +x lighthtpd_auth_perl
$ sudo ./lighthtpd_auth_perl


Asked "user", "realm" and "password", after entered these, outputted the encrypted characters like the following.

admin:admin realm:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Copy and paste the above characters in /etc/lighttpd/lighttpd.user.

Restart lighttpd service and check the popup display with user and password input cells.


$ sudo service lighttpd restart