ブログ記事の転載です。インストール後の不具合・改善点などフォローします。
Raspberry PiやOrange Piなどのディスプレイを接続しないコンピュータボード内の一部設定ファイルを、他端末のウェブブラウザで一元管理するため、AngularJSによるファイルマネージャーAngular-Filemanagerをインストールします。予め指定された管理ディレクトリ内で、ファイルのアップロード・ダウンロード・編集操作などがブラウザ経由で実行でき、ユーザによるアプリ機能の修正・アップグレード・カスタマイズを容易にします。
Angular-Filemanager
前回のブログで紹介したウェブサーバ lighttppd と php-cgi(php7.0-cgi) は既にインストールされているものとします。
１．Angular-Filemanagerのダウンロード・インストール
SSH接続でRaspberry Pi またはOrange Piにアクセスします。ウェブサーバディレクトリへ移動し Angular-Filemanager をダウンロードします。
$ cd /var/www/html
$ git clone 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)
2.各種ファイルの設定・編集
$ cd angular-filemanager
index.html を以下の様に編集します。 bridges/php-local の設定が反映されるようにします。
<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>
bridges/php-local/index.php 内で管理フォルダを指定します。指定するフォルダは任意です。
下記は angular-filemanager 内に files フォルダを作成した場合です。
/**
* 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');
bridges/php-local/LocalBridge/FileManagerApi.php を一部編集します。
ファイルのアップロード時にファイル名を変更する機能を無効とします。
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;
}