Simple file hosting server with a web dashboard and public and private file support. Might turn it into something like Google Drive later. There’s currently only one user. Username: admin; Password: password. Also, I apologize if the demo website is down, I’m running it myself and sometimes there are issues or I need to turn it.
first ship
ok just made a few changes so that i can ship. made uploading files a little more obvious
Log in to leave a comment
twin lmk if you need a subdomain with HTTPS, i am more than happy to help
ok just finished adding file dropzones! had a bit of a hard time figuring out how make it look the exact same but have the dropzone underneath. the only thing i dont like is that its not very obvious that it even exists. unless you actually tried to drop a file, you wouldnt be able to tell that its possible. also i realized i should probably have some sort of loading screen or something while it uploads files. maybe should also implement a size limit but i really dont want to limit file uploads in any way especially by size.
Log in to leave a comment
just did some styling. had to use github copilot a bit bc i suck at styles and colors, but eventually landed on something i liked and worked from there. i also just used ai to make a banner image for me to put on flavortown bc it looks really empty without one. here’s a before and after picture of the site as well as the banner
Log in to leave a comment
used express-session for auth. pretty easy to setup, at least for one user. i still havent made file uploading possible through the frontend. i’ll probably do that next since im too lazy to set up multiple users. i did also make the frontend fetch private file metadata which only took a bit of copy + paste. also yes i uploaded the exact same file for every single test
Log in to leave a comment
ok i just finished with some frontend stuff: it fetches public file metadata and displays them along with a link to where its actually hosted. there’s also space for displaying private files later. i would have done that too but i need to make the backend send a jwt cookie instead of just the jwt token itself (or get express-session working). for a while i was just trying to figure out styling. i understand it in principle but it always becomes harder in practice
Log in to leave a comment
ok so i didnt actually do much coding, but i did do some research into express.js and other questions i had. I’ve uploaded a pic of my notes below. i found out how i could implement rate limiting later, but most importantly i figured out how to user express-session. this should be really helpful when making multiple users later. in order to store user data though, i would need a database like redis or postgre. its also probably best if i switch from storing jsons for file metadata to using a db since it will probably be accessed very frequently. so it looks like the plan is: switch from storing jsons to postgresql for file metadata; use express-session to allow multiple users and connect it to the postgresql db. i still want to do some research into how express-sessions actually works first, though, since its not obvious HOW exactly it authenticates the user. anyway, the coding i did do was just getting the frontend to fetch file metadata from the endpoints i already set up. not done yet, so i havent pushed a commit
Log in to leave a comment
added basic frontend with login (doesnt store jwt cookie yet), configured caddy to expose the api, added /api/auth endpoint to check auth. had a problem for a while with this annoying error:
Failed to load module script: Expected a JavaScript-or-Wasm module script but the server responded with a MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec."
the browser fetched the html file properly but it couldnt get the css and js files that it referenced. I thought it had to do with the base url in the vite config, since i was building static files and servign them. i’d seen this same problem before and changing the base url worked. it turns out it was Caddy this time. i used handle_path instead of handle. handle_path strips the path prefix so it was looking for the js and css files in the wrong place. lesson learned! hopefully, i never make that mistake again.
Log in to leave a comment
before i even started coding i needed to set up the storage. im using this on my rpi 400 (running alpine linux) for testing but it only has 16gb and im almost out so i dont want to use it for storage. i found a 64gb usb that i can use tho. i just had to figure out how to mount the new device so i could access it. after that, i just made a simple api for logging in and uploading files. Tech stack: Docker, Express.js for the backend (first time using it), Caddy, and probably React for the frontend later. the public files are served directly from Caddy and the private files are served from Express with authentication. it basically just makes a random id for the uploaded file and saves it with that id. it also saves some metadata including the original name in a json file. Heres a picture of some of my notes and the docker-compose.yml which uses the usb drive as storage with /mnt/drive
Log in to leave a comment