Install Angular-Filemanager
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.
Angular-Filemanager
https://github.com/joni2back/angular-filemanager
Have already installed lighttpd and php-cgi, if not installed, please install these.
１．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();
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);
},
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
});
}]);
</script>
</head>
<body class="ng-cloak">
<angular-filemanager></angular-filemanager>
</body>
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(
$file['tmp_name'],
$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_access",
"mod_alias",
"mod_compress",
"mod_redirect",
"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
#!/usr/bin/perl
print "User: ";
$user = <>;
chomp $user;
print "Realm: ";
$realm = <>;
chomp $realm;
use Term::ReadKey;
{
ReadMode('noecho');
print "Password: ";
$password = ReadLine(0);
chomp $password;
print "\nPassword again: ";
$password2 = ReadLine(0);
chomp $password2;
ReadMode('normal');
print "\n";
if($password ne $password2)
{
print "Passwords don't match\n";
redo;
}
}
print "$user:$realm:";
open(MD5, "|md5sum | cut -b -32") or die;
print MD5 "$user:$realm:$password";
close(MD5);
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