hoard

added the ability to delete files. i spent a really long time fixing a bug that had to do with my reverse proxy Caddy just routing DELETE requests to /files/public to the file server. it kept returning 404 and i was so confused until i tried deleting a private file, which worked. and then i remembered why they might be different. heres the error i was getting and what the old Caddyfile had.

switched to using a sqlite database for file metadata instead of storing them in jsons and reading them on every request. i also added api endpoints for deleting files but i havent added that to the frontend yet and i also havent tested them. i used knex and better-sqlite3 for interacting with the sqlite db bc its just much easier than writing raw sql. also sqlite3 wasnt working very well and npm audit kept complaining but better-sqlite3 fixed it. i also had to switch my docker image from node:20-alpine to node:20 bc i think better-sqlite3 doesnt work for alpine or something, it was having issues and kept crashing. heres a picture of the stored files and db on my server.

ok just made a few changes so that i can ship. made uploading files a little more obvious

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.

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

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

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

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

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.

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