Daniel Gonzalez
GitHub
parent
cfea84fd5e
commit
998180507c
|
|
@ -0,0 +1,232 @@
|
||||||
|
Leverage File Browser (GitHub URL: https://github.com/filebrowser/filebrowser) as the storage & HTTP API layer.
|
||||||
|
GitHub
|
||||||
|
|
||||||
|
Scaffold a React front-end that uses react-dropzone for drag-and-drop and Axios for uploads.
|
||||||
|
react-dropzone.js.org
|
||||||
|
Stack Overflow
|
||||||
|
|
||||||
|
Wire both services in a single docker-compose.yml; mount a named volume so anything dropped into File Browser instantly appears in the Library tab.
|
||||||
|
Docker Documentation
|
||||||
|
|
||||||
|
Expose File Browser’s REST endpoints (/api/files/:path, /api/raw/:path, /api/zip) to the React UI so you never touch the disk directly.
|
||||||
|
File Browser
|
||||||
|
GitHub
|
||||||
|
|
||||||
|
With that architecture, you can build, test and hand off a fully working micro-service before folding the code back into the larger project.
|
||||||
|
|
||||||
|
Stage 0 – Prerequisites & local toolchain
|
||||||
|
Install Docker Engine ≥ 24.x and Docker Compose v2 on every dev box.
|
||||||
|
|
||||||
|
Verify: docker --version and docker compose version.
|
||||||
|
Docker Documentation
|
||||||
|
|
||||||
|
Install Node 18 LTS and Yarn (or npm ≥ 10) for front-end builds.
|
||||||
|
|
||||||
|
Confirm ports 8080 (File Browser) and 5173 (Vite dev server) or 3000 (CRA dev server) are free.
|
||||||
|
|
||||||
|
Stage 1 – Project skeleton
|
||||||
|
text
|
||||||
|
Copy
|
||||||
|
Edit
|
||||||
|
podcaster-uploader/
|
||||||
|
├─ docker-compose.yml
|
||||||
|
├─ .env
|
||||||
|
├─ data/ ← will be bound to the named volume
|
||||||
|
└─ frontend/
|
||||||
|
Create the directory early; Compose will create the named volume but it helps to have a local data/ folder for inspection.
|
||||||
|
Docker Documentation
|
||||||
|
|
||||||
|
Stage 2 – Provision File Browser back-end
|
||||||
|
Add the service to docker-compose.yml:
|
||||||
|
|
||||||
|
yaml
|
||||||
|
Copy
|
||||||
|
Edit
|
||||||
|
services:
|
||||||
|
filebrowser:
|
||||||
|
image: filebrowser/filebrowser:latest # official image on Docker Hub
|
||||||
|
container_name: fb
|
||||||
|
volumes:
|
||||||
|
- pod_data:/srv # named volume
|
||||||
|
environment:
|
||||||
|
- PUID=1000 # host UID (non-root)
|
||||||
|
- PGID=1000 # host GID
|
||||||
|
ports:
|
||||||
|
- 8080:80 # UI & API
|
||||||
|
restart: unless-stopped
|
||||||
|
|
||||||
|
volumes:
|
||||||
|
pod_data: # created automatically
|
||||||
|
Image details and environment flags come straight from the Docker Hub page.
|
||||||
|
Docker Hub
|
||||||
|
|
||||||
|
Run once in interactive mode to create the default admin user if you want non-public access:
|
||||||
|
docker exec -it fb filebrowser users add admin password --perm.admin
|
||||||
|
File Browser
|
||||||
|
|
||||||
|
Optional CORS: add --cors all to File Browser’s command if your React UI lives on a different host or port.
|
||||||
|
File Browser
|
||||||
|
|
||||||
|
Stage 3 – Scaffold the React front-end
|
||||||
|
Bootstrap with Vite or CRA (Vite is faster; substitute CRA if preferred):
|
||||||
|
|
||||||
|
bash
|
||||||
|
Copy
|
||||||
|
Edit
|
||||||
|
cd frontend
|
||||||
|
npm create vite@latest uploader --template react
|
||||||
|
cd uploader
|
||||||
|
npm install
|
||||||
|
Docker’s own blog shows an identical scaffold being dockerised later.
|
||||||
|
Docker
|
||||||
|
|
||||||
|
Add dependencies:
|
||||||
|
|
||||||
|
bash
|
||||||
|
Copy
|
||||||
|
Edit
|
||||||
|
npm i react-dropzone axios
|
||||||
|
react-dropzone supplies the drag-and-drop hooks; Axios handles multipart/form-data posts.
|
||||||
|
react-dropzone.js.org
|
||||||
|
Stack Overflow
|
||||||
|
|
||||||
|
Stage 4 – Implement the Upload tab
|
||||||
|
Create an <UploadPage> component that calls useDropzone(); accept audio/*.
|
||||||
|
|
||||||
|
On onDrop, build FormData:
|
||||||
|
|
||||||
|
js
|
||||||
|
Copy
|
||||||
|
Edit
|
||||||
|
const form = new FormData();
|
||||||
|
form.append('files', acceptedFile, acceptedFile.name);
|
||||||
|
await axios.post('/api/upload', form, { baseURL: import.meta.env.VITE_API });
|
||||||
|
Axios example follows the widely accepted pattern in community Q&A.
|
||||||
|
Stack Overflow
|
||||||
|
|
||||||
|
Point VITE_API to http://localhost:8080 in .env files for development; use the service name http://filebrowser when the React container runs inside Compose.
|
||||||
|
|
||||||
|
File Browser’s upload endpoint is POST /api/upload/:path?override=false; default path is root (/).
|
||||||
|
GitHub
|
||||||
|
|
||||||
|
Stage 5 – Implement the Library tab
|
||||||
|
Fetch directory listing with GET /api/files/:path (JSON).
|
||||||
|
File Browser
|
||||||
|
|
||||||
|
Render results in a table or grid (file name, size, modified date).
|
||||||
|
|
||||||
|
Each row’s download link hits GET /api/raw/:path for direct download/stream.
|
||||||
|
File Browser
|
||||||
|
|
||||||
|
For bulk downloads, File Browser supports GET /api/zip?files=/foo.mp3&files=/bar.wav.
|
||||||
|
File Browser
|
||||||
|
|
||||||
|
Because both Upload and Library talk only to the REST API, any file that already lives in /srv (the mounted volume) appears automatically—no extra code required.
|
||||||
|
|
||||||
|
Stage 6 – Containerise the front-end
|
||||||
|
Add a Dockerfile inside frontend/uploader/:
|
||||||
|
|
||||||
|
Dockerfile
|
||||||
|
|
||||||
|
# builder
|
||||||
|
FROM node:18-alpine AS build
|
||||||
|
WORKDIR /app
|
||||||
|
COPY . .
|
||||||
|
RUN npm ci && npm run build
|
||||||
|
|
||||||
|
# runner
|
||||||
|
FROM nginx:1.27-alpine
|
||||||
|
COPY --from=build /app/dist /usr/share/nginx/html
|
||||||
|
A multi-stage build keeps the final image tiny; the Nginx pattern mirrors the Docker guide.
|
||||||
|
Docker
|
||||||
|
|
||||||
|
Augment docker-compose.yml:
|
||||||
|
|
||||||
|
|
||||||
|
frontend:
|
||||||
|
build: ./frontend/uploader
|
||||||
|
container_name: ui
|
||||||
|
environment:
|
||||||
|
- VITE_API=http://filebrowser # internal host
|
||||||
|
depends_on:
|
||||||
|
- filebrowser
|
||||||
|
ports:
|
||||||
|
- 3000:80 # prod port
|
||||||
|
Stage 7 – Build & run
|
||||||
|
bash
|
||||||
|
Copy
|
||||||
|
Edit
|
||||||
|
docker compose build
|
||||||
|
docker compose up -d
|
||||||
|
Compose creates the pod_data volume only once; subsequent up commands reuse it, so stored audio survives container restarts.
|
||||||
|
Docker Documentation
|
||||||
|
|
||||||
|
Visit http://localhost:3000 → Upload tab → drag an .mp3.
|
||||||
|
Switch to Library → the file appears instantly; clicking downloads/streams it through File Browser’s /raw endpoint.
|
||||||
|
|
||||||
|
Stage 8 – Smoke tests & validation
|
||||||
|
CLI test:
|
||||||
|
curl -F "files=@sample.wav" http://localhost:8080/api/upload → expect {"event":"upload success"}.
|
||||||
|
GitHub
|
||||||
|
|
||||||
|
Large-file retry: pause network mid-upload; File Browser resumes automatically (uses TUS-like chunking).
|
||||||
|
File Browser
|
||||||
|
|
||||||
|
MIME filter: ensure React limits to audio/*; File Browser does server-side checks too.
|
||||||
|
File Browser
|
||||||
|
|
||||||
|
Stage 9 – Hardening & production tweaks
|
||||||
|
Concern Mitigation
|
||||||
|
Auth Create non-admin File Browser users; pass a JWT or session cookie from your SSO gateway.
|
||||||
|
File Browser
|
||||||
|
HTTPS Terminate TLS at your reverse-proxy (Traefik, Nginx, Caddy).
|
||||||
|
Back-ups Use docker run --rm -v pod_data:/data busybox tar czf /backup/pod_data.tgz /data.
|
||||||
|
Config as code Add filebrowser.json (users, branding) to the volume; File Browser consumes it at startup.
|
||||||
|
GitHub
|
||||||
|
|
||||||
|
Stage 10 – Integrate into the main project
|
||||||
|
Mount the same named volume in your legacy application containers; they can read the exact files File Browser writes.
|
||||||
|
|
||||||
|
Replace direct file-system access in the monolith with HTTP calls to /api/raw/:path if you’d rather not mount the volume.
|
||||||
|
|
||||||
|
CI/CD: build front-end and image in your existing pipeline; Compose file can be templated via Helm/Kustomize when you migrate to Kubernetes later.
|
||||||
|
|
||||||
|
Reference link requested
|
||||||
|
File Browser GitHub: https://github.com/filebrowser/filebrowser
|
||||||
|
GitHub
|
||||||
|
|
||||||
|
Key sources consulted (alphabetical by domain)
|
||||||
|
Docker Compose volume docs – volumes & reuse.
|
||||||
|
Docker Documentation
|
||||||
|
|
||||||
|
Docker Hub – official filebrowser/filebrowser image.
|
||||||
|
Docker Hub
|
||||||
|
|
||||||
|
File Browser project README & docs – endpoints, flags, CORS.
|
||||||
|
GitHub
|
||||||
|
File Browser
|
||||||
|
|
||||||
|
GitHub issue thread – confirmed upload API pattern.
|
||||||
|
GitHub
|
||||||
|
|
||||||
|
Medium / Docker blog – multi-stage React image build.
|
||||||
|
Docker
|
||||||
|
|
||||||
|
NPM & official site – react-dropzone usage.
|
||||||
|
react-dropzone.js.org
|
||||||
|
npm
|
||||||
|
|
||||||
|
RapidAPI / StackOverflow – Axios file-upload snippet.
|
||||||
|
Stack Overflow
|
||||||
|
RapidAPI
|
||||||
|
|
||||||
|
Reddit – practical explanation of named volumes.
|
||||||
|
Reddit
|
||||||
|
|
||||||
|
Docker Hub (alternative maintainer) – image size & variants.
|
||||||
|
Docker Hub
|
||||||
|
|
||||||
|
GitHub helper CLI for scripted uploads (optional).
|
||||||
|
GitHub
|
||||||
|
|
||||||
|
Hand this guide to the team, and they’ll have everything needed—from initial scaffold to production hardening—to deliver a clean, self-contained Upload + Library module that can be dropped into (or run alongside) your main application stack.
|
||||||
Loading…
Reference in New Issue