[GUIDE] Beautiful Directory Listing for Apache File Server Sharing Public Folder (h5ai)

Hi there! This is my humble contribution inspired by the great work of the man nfodiz here in the forums. Thanks nfo! :smiley:

This works 100% on My Book Live Duo too (I actually I have one of those!)

Overview

What this achieves is what I was trying to do the other day, to have a folder dedicated on the MBL/MBLD that was published to the world (friends or myself from any computer) filled with public files, easily downloadable from any browser, without logging in or doing some other stuff. Of course, because of the nature of this, you wouldn’t put your taxes document and such in there :wink: I actually use it for sharings programs, utilities, to have them available when/if I have to repair a computer, to share files in college, with friends or coworkers, etc. etc.

One easy way was to enable directory listing (which is part of the Apache server) and that would simply publish the folders to the world in the ugliest way possible and without any added functionality. At first I settled for that, but then I started looking at different directory listing templates that build upon it, without any installation required; just some configuration. After trying a couple, I decided for h5ai (“a modern HTTP web server index”). These are some of the features it boosts:

breadcrumb for the current directory, linked to all parent directories
auto refresh
custom header and/or footer for each directory
select and download multiple files and folders at once, either as tar or zip archive
filter function for the displayed files and folders
folder sizes
localization with a lot of languages already included
link hover states between main view, breadcrumb and tree view
display HTTP web server details
image preview with keyboard support
text file preview with Markdown rendering and keyboard support
QR codes on hovering files
sort files and folders
status bar with additional information about files and folders
thumbnails for images, pdfs and movies
directory tree view
display breadcrumb in the browser title

As you can see, those are some awesome features to have on our own servers! Some of them don’t work out of the box (more on that later), but what was most important to me (downloading zip files of entire directories) finally worked fine!

Results that We’ll Achieve

You will be able to access <your_ip>/public and have those files available anywhere. Whatever you drop on the Public folder will automatically be published on the web server and you can easily send those links to anybody to download directly from your MBL/MBLD

Requirements

- You’ll need to have access to SSH. Enable it via <your_ip>/UI/ssh

- You’ll need to have your port forwarded from your router (if you plan to access those files from the outside world). The inside port should be 80 and the outside port anything you like. If you change it from the default 80, then you’ll have to specify it when you want to access the files. Example <your_ip:1234>/public, where 1234 is the defined port

- FileZilla, SCP or something to browse on and edit the files. You can also use nano if it’s easy for you (not for me! I started to like it ;)) and, of course, you’ll need putty too

Guide

Bear with me, as this is my first guide. Any improvements/corrections are welcomed! :wink:

1) Download h5ai from here at the big blue button on the right (the version as of this writting is 0.22.1)

2) Open WinSCP or FileZilla (you could use the Portable versions) or any SFTP client and configure the SFTP access to your disk

In FileZilla / WinSCP / SFTP Client:

  • backup the file /etc/apache2/sites-available/wdnas; either on your computer or on the same MBL/MBLD disk (save it was wdnas.bak)
  • edit the file /etc/apache2/sites-available/wdnas with a text editor (Notepad++ for example):

1) add the following text right above " # block application folders from being served ":

<Directory /var/www/public/>
	DirectoryIndex index.html index.php /_h5ai/server/php/index.php
</Directory>

2) add the following text inside “<Directory /var/www/> </Directory>” to redirect every access from outside of the LAN to the /public/ directory. It will also redirect not existent lookups (i.e <your_domain>/asdokasmdoaskdnasok will go to /public/). Change your LAN accordingly! (marked as XXX; tipically it would be 192.168.0, 10.0.0, etc.)

RewriteEngine On
RewriteCond %{REMOTE_ADDR} !^127\.0.0.1$
RewriteCond %{REMOTE_ADDR} !^XXX\.XXX\.XXX\.(.*)$RewriteCond %{REQUEST_URI} !^/_h5ai(.*)$
RewriteCond %{REQUEST_URI} !^/public(.*)$
RewriteRule $ /public/ [L,R=301]
  • copy the _h5ai folder to /var/www/ . Now try to access <your_ip>/_h5ai with a web browser and you should get a “403 Forbidden” error

In putty:

  • chmod -R 755 /var/www/_h5ai/

This gives access to the _h5ai dir to Apache

  • chmod o+w /var/www/_h5ai/cache/
    This gives write access to the cache folder of _h5ai, needed for some functionalities (like zip batch downloading)

  • ln -s /DataVolume/shares/Public/ /var/www/public

This creates a symlink to the Public folder. You could certainly use any other path of your chosing

  • a2enmod autoindex

This enables the autoindex function of Apache for Directory Listing

  • /etc/init.d/apache2 restart

This restarts the Apache server and enables all the customization done

h5ai Configuration:

You can manage all kinds of settings from a file. Everything is well documented and you should tune it to your liking. For example, you can enable download of multiple files as zip, allow remote deletion and renaming, enabling QR codes, etc. You can edit the file also with Notepad++. There’s no need to restart the server between changes!:

  • /var/www/_h5ai/conf/options.json
    This is the location of the configuration file for h5ai. Edit it and you’ll see the documentation

Results Achieved

Now you will be able to access the Public folder from any device in the world! Just remember to open the 80 port on your router

You’ll get something like this (you can try a live demo here:

(Notice the red highlighted files. That’s the (rather obscure) way of multiselection. You have to press CTRL and click them in order to be able to download them as one compressed file). You can also drag the mouse around (as in Windows) to select multiple items

Why was this Good for me?

From my point of view, this is a nice option for sharing files. Because you are using the built in Apache server, there’s no need to install more stuff (no overhead) or even have extra daemons running just to serve the files. You just take advantage of what you already have, and improve upon it. Sure, you could also use the vainilla Directory Listing, but you’ll be missing a lot of “free functionality”

What’s Missing? (Please Contribute if Possible! :))

1) When you access the _h5ai folder now through a browser, you’ll actually verify all of the supported stuff of the server. You’ll see that some of the items are unsupported (I think these are all of them):

- Image Thumbnails (Require PHP-GD)

- PDF Thumbnails (Require convert command; apparently from ImageMagick)

- ZIP & Tar PHP support

As I’m pretty much OCD myself, I’d love to have them all on green! :smiley: So, in my blindness I went and installed php5-gd to see if Image Thumbnails would work. I did (DO NOT RUN THIS) apt-get install php5-gd (DO NOT RUN THIS) and all bleep broke lose. The device bricked since php got uninstalled, Apache didn’t even start, so I had to reimage the OS and start over. Then I tried installing the same package via OptWare. Although it didn’t remove anything (as with apt-get), Apache still bricked and wouldn’t start. I’ve tried ImageMagick too and the options kept showing as red, so I didn’t know how to enable them.

You probably have a lot of Linux knowdlege; maybe you can help us with this (get all green as supported!) and I’ll update the guide accordingly :wink:

2)Another thing that sprung to mind. You know, when you access your root Apache server from the extranet, either by typing it manually in the browser or by clicking the breadcrumbs / go up icons in h5ai, you will get the WD error saying that you don’t have access to UI/something. It’s actually the WD dashboard and it’s a good thing that this happens! But what I would like is, no matter whatever address I type (i.e. mydomain.com/hello_word), it would redirect me to /public/. So, when I go to the root or someplace else, it would land on public. I think this can be achieved with php and the .htaccess file. I’ll look into it as soon as I debrick the device again :stuck_out_tongue: and post if I’m succesful. This is also a good measure to stop the outside world from knowing that you have a MBL/MBLD :slight_smile: This should be working now! :smiley:

Well, this is it, hope you like; maybe I missed something here, if it doesn’t work please let me know and I’ll look through my notes again to check it up and reply back.

Enjoy!

1 Like

It’s about time :stuck_out_tongue:

Thanks, I will be installing this very soon :slight_smile:

Running into an error at this command

MyBookLive:~# chmod o+w 755 /var/www/_h5ai/cache
chmod: cannot access `755': No such file or directory

 Might need to change it to

chmod o+w /var/www/_h5ai/cache

 I also get an error when typing this command

MyBookLive:~# ln -s /shares/Public/ /var/www/public/

 What web adress do I need to put in my browser?

You are right about the 755, it got carried over on the copy & paste. I’ll correct this :slight_smile:

About creating the Public folder before:

1) ln should work without an existing folder. Did you get an error when you ran it without creating it?

2) Beware of creating a  "P ublic" folder instead of “public” (uppercase). On my device, “Public” wouldn’t work (would give me the “DeviceUser” password prompt"), but on lowercase it’d work. I think it might have something to do with WD blocking access to the Public folder from the web, which, from what I’ve read, is something that was available on previous firmwares…

You should input your device IP on your browser. <MBL_IP>/public and remember the port forwarding if trying to access from outside the LAN

Let me know if it works; I’ll be back in a couple of hours (got to go to college now)

MyBookLive:~# ln -s /shares/Public/ /var/www/public/
ln: target `/var/www/public/' is not a directory: No such file or directory

 You need to get rid of the trailing / after ln -s /shares/Public/ /var/www/public/ in your guide

ln -s /shares/Public/ /var/www/public

<MBL_IP>/public

Works like a champ! Thanks for the tut Timmy :slight_smile:

Will see about those missing options in the coming days

I edited the json file and enabled renaming as it is something I would like to do in that folder. Once I highlight a folder, where do I go to rename it?

I’m glad you confirm it working nfo! Is not a great guide as yours, but it’s just a little homage :wink:

About the renaming, I don’t know where to rename neither. If you saw, in the json documentation for renaming it says “No GUI yet.”, so maybe the developer haven’t implemented it yet? And according to  this thread on the sources forum, it seems that a GUI for renaming is not still defined.

Hopefully we can work out on those missing “unsupported” options! I’m afraid that PHP-GD might be more difficult, as I’ve read a thread in MyBookWorld.wikidot (which I can’t find now), saying that a guy installed it but needed to rebuild php himself, as gd had to be enabled in the php installation or something along those lines. 

Yes I did notice that in the json file and that was my guess as well. Excellent job on the guide :slight_smile:

After a lot of trial and error I’ve updated the guide with the Apache redirect script! :smiley: It should now redirect every request from the internet that’s happening outside the public folder, to the public folder. When you are on your own network, it’ll resolve to anything you type in.

Please try it and try to “break it”, i.e. going someplace else and not being redirected to public when you are on the internet (not on your LAN), so I can improve it.

Enjoy!

This is good! Will have to give it a try. In my case it would result in avoiding installing mobile apps such as “ES file explorer” to access network drives, it should even work for IOS.

If upload option was there would be perfect. :slight_smile:

There’s an upload option, you have to enable it in the configuration file. :wink: Although it’s still experimental, it might work

I added the loopback adapter in the guide in the redirect script because some of the UI dashboard tabs weren’t working.

There you go Timmy

1 Like

D a m n, you got the all green, nfo! :smiley:

Sooo… please correct me if I’m wrong, but you got there by doing these:

  1. You ran the brick protection script for apt-get

  2. You installed the php5, php-gd, etc; all that stuff from OwnCloud thread

  3. You installed ImageMagick

4*) Zip & Rar PHP got installed somehow (¿?)

… and that’s it?

What are the cons of installing php5… more memory consumption, disk space used, something like that? As you know, I refrained from installing it because of all the stuff it modifies, but I’d be quite happy to have my H5AI all green too :stuck_out_tongue:

BTW, did you tried it with any PDF? How does it work, as an image thumbnail, similar as any picture?

Thanks man!

Yep all the steps just like you said. I noticed in your post in the OwnCloud thread that you were installing from the wheezy repo. Mine actually installed from the squeeze repo as wheezy is commented out in my sources.list

As far as cons, more disk space for sure…

I will try a pdf now

PDF shows a thumb of the first page of the PDF and when you click it it opens right up full screen

Did a reboot just to make sure everything was still in check. All mods are working and dashboard is working.

Looks like you have a guide to edit when you get debricked :stuck_out_tongue:

top - 16:08:28 up 7 min, 1 user, load average: 1.03, 1.22, 0.68
Tasks: 86 total, 1 running, 85 sleeping, 0 stopped, 0 zombie
Cpu(s): 0.3%us, 0.7%sy, 0.0%ni, 99.0%id, 0.0%wa, 0.0%hi, 0.0%si, 0.0%st
Mem: 253632k total, 243520k used, 10112k free, 59840k buffers
Swap: 500608k total, 19584k used, 481024k free, 50176k cached

Hello,

 I need a little help about it.

 I downloaded the WAMP server. Install, and implement H5Ai. After i made a new directory:

 “Árvíztűrő tükörfúrógép”

 And this is how its look like in browser:"%C1rv%EDzt%FBr%F5%20T%FCk%F6rf%FAr%F3g%E9p/"

 And after i click on link get Access Forbidden error.

 If delete H5Ai, than folder is ok, and i can open it.

Thank you,

Beautiful indeed!!! and good job!!!

I would have a request, well, actually two…

  1. could someone put some order in this guide? it’s a bit confusing, especially when it comes to trying to get all “green” working functionalities (as nfo did).

  2. would it be possible to use this template to access all of MBL shares from inside LAN, rather than from outside LAN? I am saying this because I usually remotely access my MBL through OpenVPN

Thank to anybody reviving this thread!