Wireless Army
This is a multi-level filder browser where you create a short cut from your image folder to a folder under apache and have only 2 files just under the parent directory and no need to copy files inside all subdirectories.
Pre requisites: apache, php
in this example i have a img folder under /mnt/hgfs/images so I create a short cut to/var/www with ln -s /mnt/hgfs/images /var/www/images
then I create 2 files in my images folder index.php and .htaccess
htaccess will redirect everything back to index.php so if you have a folder like images/travel/part1
your url will be http://localhost/images/travel/part1 but it will still run the code ofindex.php in images folder so there will be no need to copy past it in all sub directories.
this will make a href link for all folders and .. to go back, it will show all the images inside a folder where you can scroll down, all other file type will also be a link.
content inside .htaccess:
DirectoryIndex index.php
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteRule ^index\.php$ - [L,NC]
# If the request is not for a valid directory
RewriteCond %{REQUEST_FILENAME} -d
# route to index.php in current directory
RewriteRule ^(.+)$ index.php [L,QSA]
</IfModule>
content inside index.php:
<!DOCTYPE html>
<html>
<head>
<title>file explorer</title>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<meta name="apple-mobile-web-app-capable" content="yes">
<style type="text/css">
html,body {
padding: 0px;
margin: 0px;
background-color:#2d2d2d;
color:#fff;
font-size:24px;
}
a{
color:rgb(245,245,245);
text-decoration:none;
}
a:hover, a:focus {
color:rgb(245,0,0);
text-decoration:underline;
}
#container {
clear:both;
}
img,video {
max-height:100vh;
max-width:100%;
}
</style>
<script type="text/javascript">
var h = document.documentElement.clientHeight;
document.addEventListener('keydown', function(event) {
//left arrow
if(event.keyCode == 37) {
//scroll to down by device height
window.scrollBy(0, h);
}
//right arrow
if(event.keyCode == 39) {
//scroll to top
window.scrollTo(0, 0);
}
});
</script>
</head>
<body>
<div id="container">
<?php
$inc_dir = $_SERVER[REQUEST_URI];
$inc_dir_space = str_replace("%20"," ",$inc_dir);
$d = dir("/var/www/".$inc_dir_space);
while (false !== ($entry = $d->read()) ) {
if( strlen($entry)==1) {
echo "";
}
elseif (preg_match('[png|jpg]', $entry)) {
echo "<img src='".$inc_dir_space.$entry."' /><br>".$entry."<br>";
}
elseif (preg_match('[mp4]', $entry)) {
echo "<video controls><source src='".$inc_dir_space.$entry."' >".$entry."</video><br>";
}
else {
$a = $b ="";
//if directory
if (!preg_match('[\.]', $entry)) {
$a = "<span id='green'>";
$b = "</span>";
echo '<style type="text/css">
#green {
color:rgb(0,245,0);
}
</style>';
}
echo "<a href='".$inc_dir_space.$entry."' >".$entry."</a><br>";
}
}
$d->close();
?>
</div>
</body>
</html>
this a just a basic proff of concept but if you develope on it more, I would be happy if you shared it in the comment section down blow.