Meet File Browser, a Small but Mighty Web File Browser

last week i was looking for something small and lightweight to browse and edit some files through a browser i immediately thought of the good old days using webmin now if you're not familiar with webmin webmin is a web-based system administration tool for linux and while using it i could do anything i needed on linux and it was a great way to get started learning linux as a beginner as i grew more comfortable with linux i realized that it didn't need wetman anymore i found that i could start to do most things through a terminal but my need for a file based browser didn't change i just ended up doing it the hard way still through a terminal and then many years later i started using nexcloud but primarily as a replacement for dropbox this too gave me a file browser within a browser so that i can modify edit change and delete files if i'd like and while it works great and it comes with a lot of features there are lots of features i actually don't need if i just need to browse files and that's when i started searching for a new file browser i wanted one that's lightweight not bloated and does one thing well that's when i discovered file browser pretty original name huh so file browser is a self-hosted web interface to access all of your files through the web it comes with all the features you'd expect from a file browser and a few more you can browse files and folders read the contents of files or even get previews create and edit files and folders move copy delete files and folders download files and folders from your server to your device and upload files from your device to your server oh and did i mention it has authentication and you can share too maybe this is sounding more and more like a dropbox replacement another awesome thing about this is it's able to do this inside of a tiny docker container one that's only 14 megabytes it's pretty incredible for such a small package yes we're gonna set this up using docker so probably worth mentioning then that you'll need some sort of containerization platform to run this container we'll cover plain old docker and docker compose but feel free to spin this up using rancher portainer unrain open media vault or any other platform that has docker or container d because it should work on any platform running one of those containerization engines whether that be on your workstation server a nas or even a raspberry pi also like the rest of my videos all of the documentation and all of the configuration we covered today will be in the description below and if that sounds good to you give this video a thumbs up and let's continue to take a look at file browser so today we're going to use docker compose to set this up we're using docker compose because it's easy and it's repeatable and it allows me to share my configuration with you so that all you have to do is copy and paste and if you need help setting up docker and docker compose feel free to see the link in the description of this video then you'll want to make sure that docker and docker compose can actually run on your system you can check this by running docker dash v and scene output and then running docker dash compose dash v and scene output if you do you're in a good spot if not see my documentation on how to get those installed and configured next we'll want to create a folder i'm going to create a directory called file browser now this will hold my docker compose file as well as some data this container needs to persist so after you create it cdn to it next we'll want to create a docker dash compose yaml file you can do that simply by typing touch docker dash compose.yml and if we do an ls we should see just that file in there and then you'll want to edit that file but i recommend doing this in an editor first and then pasting the contents into that file so i've opened up my docker compose file with vs code we can see this is only 15 lines in config and that's really all it takes to get started i've already figured this out and there's actually one more thing we'll need to do before we spin this up but let's talk about some of these properties so this is a typical docker compose file we're saying use version 3 and we're creating a service or a stack and i'm going to name it file dash browser now this can be anything you want i typically name it the name of the service then we're going to say to use an image so this is a docker image we're going to use from the docker registry we're saying use the image file browser file browser so that's the org file browser and the image name or the repository name of file browser next we're naming the container so this is the name of the container when it spins up and i'm naming it file dash browser i typically name this the same as the service but there's only one service in the stack so it's a lot of redundancy and next you'll need to set user permissions and this is needed for permissions to read and write to the files within this container and for permissions to browse and create files on the file system of that device so this user id should be the user id that you're going to spin this container up with and so how did i know it was id 1000 and a group of 1000. well if we go back into our terminal and we type in id we should see the uid and the gid of the currently signed in user so i'm going to sign in using this account called server admin and it's also the same account that i'll use when i spin up this docker image or docker container so i can see here my uid is a thousand and my gid is a thousand now you might have different values there but just plug those in into here and next we're gonna take care of some ports so this is hosted on port 80 on the inside and the port you choose to host it on on the outside is really up to you i'm choosing 8081 it's because i have something hosted on 80 already and 8081 was about as creative as i could get so next we're going to mount some volumes and this part was a little bit tricky so the first volume we're mounting i'm saying on the left side mount home server admin route to slash srv and so this is actually the path that file browser is going to serve out through the browser so for me i'm saying take everything from the server admin profile and serve it out and we'll see that here in a little bit but that maps to slash srv within the container so on the left side you just want to think about on this whole system what path do i want to serve out over the web over a browser you might want to go as far as home and you might want to go as far as root but i'm not going to go that far i'm just going to say the path to my profile and this can be adjusted later i recommend taking a more restrictive approach and then loosening it up later on if your needs change and this next one is just a path to the file browser database file so on the inside they have their database on the root slash database.db and then on our hosts side we just need a path of where this will end up living and there's a one more thing we'll talk about right before we spin this up but let's cover the rest real quick so restart and list top this is a typical flag you set on this container to basically saying restart the container unless i stop it myself so if the container's crashing or has an error it'll keep trying to restart itself and then security options this is one i typically place no new privileges equals true and this is just a security option for the container so privileges can't be escalated or changed now before we start this up something that caught me off guard for a little bit it's actually in their documentation but it's not entirely clear the way they explain it what they say in their documentation is that if this is a new install or a new container instantiation this file must exist before the container is started otherwise it tries to create a folder to this file it's really odd i've seen it before in docker so what we have to do is actually create a file called file browser.db in this path so let's go back to the terminal do an ls to make sure that nothing's here then we'll do a touch file browser.db and then do an ls to make sure we have it there now if you did this before and you're getting an error saying that filebrowser.db is a folder and the container's crashing that's the problem and if it did create a file browser.db folder just remove that folder and run this command we're about to run again so now that we have our docker yaml file let's actually edit this docker compose file let's take all of our contents and paste them in there let's save and then we'll run docker dash compose up dash d dash dash force dash recreate now we know we're not recreating this container said in my previous videos i use the same command because it works on the first run and the hundredth run so i never have to remember different commands to start it up but we'll run this command and this should spin it up so it's creating that service if we run a docker ps we should see file browser running and it's healthy created seven seconds ago and now we should be able to go to a web browser on port 8081 and see file browser and if you browse there here it is so what's our username and password the default username and password is admin so let's sign into there and we see a bunch of files okay so before we get started and dive in looking at this first let's change our password so let's go into settings then we'll go into global settings first we change the dark mode i know priorities then we go to user management and let's change our password here okay and after your password saved and updated ah there we go hit a refresh and now we have dark mode so back to home or my files where we were when we signed in you can see this looks pretty familiar this is actually the home directory of one of my servers and this is actually one that's running portainer so let's check things out really quick so let's do a little bit of inception here so here's the folder file browser that we created that has our docker compose file so we can browse around we can edit this file if we like and we can make changes to this file this is really cool so you get a yaml editor here let's make that a little bit bigger and you can see i could make changes to this file 8081 to 8082 and i can save it now that's actually not going to change anything on this service but i wanted to show you really quick that we can edit this file within a browser go back really quick do an ls and let's cat out docker compose and you can see here so cool we can edit files through a browser let's go back here let's actually change this back because i want this ad81 save this file and close out zoom back out and so since we have a file browser inside of a web browser let's do some typical stuff so let's create a new folder test folder i'm going to create a test folder so i created one huh it feels lonely in here that's actually nice say navigate into the folder as soon as you create it nice touch let's create a new file test file dot doc dot doc x and it actually opens the file for you too this is a test doc hopefully this saves set an emoji okay so let's save this file let's close this file out can we preview this file i don't think we can preview this file so we saved it now let's see some of the other options we have so let's copy this file we want to copy this file to where choose the place to copy your file okay so let's choose i'm going to go right back up one directory to our home directory so copied it nice copy to here and it actually navigated you there too super nice nice touch that's exactly what i was going to do afterwards so they really thought about this so we had this test file that we just copied here and we could see my message let's close it out it's actually now delete this file let's delete it and it's gone okay so let's go back into our test folder there's the original file we can download this file now ah cool so we can archive it so let's zip it up so i downloaded that file open it up with 7-zip and microsoft word is complaining because it's not a valid docx file which totally makes sense because i didn't have the required metadata for a docx file it's getting too fancy anyways i don't have the proper xml like or whatever syntax in the file anyways let's pretend that didn't happen let's create a new file actually let's take this file copy the contents out create a new file test dot text we're not going to get too fancy this time create it paste those contents in save it close it now let's download it download this file download the wrong one now we'll download this file test that text open it with notepad i still got the extension wrong because it's txt i know but notepad.exe is okay with it so here's our test doc that's pretty cool so we created a file on a server through a browser and then downloaded that file here so i know this is pretty basic stuff but this is pretty powerful this web browser so let's do some other stuff let's say for instance i want to upload files to this directory so let's choose to upload a file then let's choose to upload that file there we go and we get a file preview cool so all your base are belong to us do we get a better preview than that i thought we did we go to info no oh there we go so if we double click it now we get a file preview i don't know why cats are saying all your bases are belong to us anyways so pretty cool we get a file preview from the folder then we get another file preview if we open it up without downloading awesome let's get a higher quality image just to see okay so let's upload another file gonna grab my twitter background we can see we get the preview there we double click we get a preview there pretty awesome so that's actually oh i have another preview open okay two bottles open i'm okay with that should close both models when you open one model the next motor should be close but anyway so pretty cool this is so far exceeded a lot of my expectations i didn't have high expectations because i don't have a lot of requirements basically i want to be able to edit files and download files and upload files from the web so where this comes in handy for me is actually in kubernetes because sometimes you have to mount a persistent volume claim to a container and then edit those files usually through the container that's attached to it well if you attach this container to it then you can edit those files right from a browser and i'm familiar with coop control commands and coupe control copy and edit and how to exact into that pod and make those file changes but a lot of people aren't and that's where something like this really shines so another thing i mentioned because we said oh multi-select okay multi-select cool i got multi-select all right discover new new feature multi-select download zip it up and they're all in there awesome well discovered a new feature so another thing that i mentioned is that this could possibly be used as a dropbox replacement too so how could that be let's go back to my files go back into this test folder and let's actually click on the share button so the share button is actually creating a share and a link to this file so that you can share it if you like so i'm going to say the share duration is one day and i'm not going to put a password on it but you could put a password so let's share and here's the share id and let's copy that to our clipboard so let's actually see what was copied to our clipboard so here's what's copied to our clipboard which is pretty cool so this actually copied a link to my clipboard to the name of my server with the path to the share with the share id so let's see if we open this up in firefox i open it up in incognito or in private and let's go to this url and here's the file that we can download even a qr code to it pretty awesome so i can download this file and open it up and here's the file pretty awesome this is this is pretty cool okay so let's go back and put a password on that share so let's create a new share let's share this oh we get share management right here should be an icon should be an icon on there just telling me that that's shared because it's hard to discover that there might be another section to discover shares and managed shares that's pretty cool right here so let's delete that old share delete let's create another share that only has let's say a 30 second duration 30 seconds and let's put in an optional password and let's share it out copy this clipboard let's go back to firefox try to get to that share put in our password and we get to it pretty awesome but remember i put a 30 second timer on there so let's let that timer expire and if you go back after 30 seconds this url is invalid pretty awesome pretty awesome and if we go back to here now in the share refresh this share the share is gone pretty sweet that's pretty sweet i like it okay so that was pretty awesome with file sharing so you could see how that could be pretty powerful to be able to share files with people too but you may not want to do that just know that it's there in case you do so we didn't cover settings because settings are traditionally boring not boring to me i like to look at them and figure them out but they are to some so we'll go through them real quick so in profile settings you can choose whether or not to hide dot files so those are hidden files use single clicks rather than double clicks i don't mind double clicks on the web typically i don't i'm not a double clicker on the web i know some people that double click links like well where have you been for 20 years but anyways you can change a single click to a double click if you want here i don't mind it because you're double clicking on a folder as if you were on a file system on a desktop share management airshare management exactly what i was talking about so if we had open shares here it's a great one share 11 hours sure go back to settings here's our share management super nice so we can manage our share here i didn't want to share this anymore i can delete the share i won't delete the file that'll just delete the share i love how they have the function name right here too uh anyways uh so delete the share no more shares some global settings a lot of settings in here for permissions um this is one i would probably make sure that you don't turn on allow users to sign up keep this unchecked just don't touch it unless you want people to create accounts within file browser to be able to access files so i wouldn't even check that only check it if you know what you're doing and you have a public file share that you don't really care about anyways it's there if you need it most likely you won't here's where we would change the theme we changed it to dark you can change it back to light here's a command runner in here you have hooks into different events and you can execute additional commands after this event runs so basically hooks for before and after so if you wanted to do something after a copy you could or if you wanted to do something after delete you could after a rename after save so you can see all these events here and they just give you hooks to be able to hook into that event and run a command before or after so pretty cool definitely a developer feature right there i like it and here are user default settings this includes ones that get created or that you create but they're default permissions for new users i don't need to change anything here because i'm the only user and i'm the administrator but if you were going to create new users here's where user management is and here's where we are so you could create a new user give it a password apply a scope to it we only have one scope and then apply specific permissions to it and then save that user so this would be handy if you had a friend who you wanted to access some of your files you could create an account for them limit the things they're able to do like create delete edit execute rename or share and then save the permissions for that user so these permissions right here would only give that user the permission to download but if they're only downloading single files i would recommend using the share feature let's delete this user before i forget so file browser is actually really awesome it's exactly what i want from a file browser it's tiny it's light it's efficient and allows me to do everything i would normally do inside of a traditional file browser inside of the web and also has nice perks like having the ability to create an account and having the ability to share so will you use this are you using something else for file based access through the web do you still use webmin if so let me know in the comments section below and remember if you found anything in this video helpful don't forget to like and subscribe thanks for watching um the software that we were running just keeps getting better like it keeps getting better like things open source things keep coming from everywhere every direction new ways to solve it and now like all these tiny little niche projects back in the day now have competitors that are other open source solutions it's it's just getting better it's software is making everything awesome i think i think but you know i'm i'm a little a little jaded i mean i'm a software developer so so i'm excited about software but you know at the end of the day like you know south so i mean don't get me wrong we need hardware to run all of this on without hardware wouldn't be possible but man software makes everything awesome it just breathes new life into you know systems that we thought one day weren't going to be used anymore and all of a sudden we're using them again because the software keeps getting better

Channel: Techno Tim

Views: 40,539

Keywords: file browser, filebrowser, open source, docker, docker-compose, install file browser, dropbox alternative, open source dropbox, nextcloud alternative, rancher, kuberntes, homelab ideas, homelab, self-hosted, selfhosting, selfhost, technotim, techno tim, home lab, home lab ideas, self hosting ideas, web file browser, linux, webmin alternative

Id: W2yZ5_sd9Hc

Length: 22min 51sec (1371 seconds)

Published: Sat Sep 04 2021