feat: allow uploading images for appeals and reports (#1688)

Author: confuser

.env.example

@@ -34,3 +34,16 @@ LOG_LEVEL=info
 
 # Set to 'production' for production builds
 NODE_ENV=development
+
+# File upload configuration
+# Maximum upload size (supports human-readable formats: 5MB, 10MB, 1GB, etc.)
+UPLOAD_MAX_SIZE=10MB
+
+# Path where uploaded documents are stored
+UPLOAD_PATH=./uploads/documents
+
+# Maximum image dimension (width or height) in pixels to prevent pixel bombs
+UPLOAD_MAX_DIMENSION=8192
+
+# How long before unattached documents are considered orphaned (in hours)
+DOCUMENT_CLEANUP_AGE_HOURS=24

.github/workflows/build.yaml

@@ -32,15 +32,17 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
-      - name: Cache Node.js modules
+      - name: Cache Node.js modules and Next.js build
         uses: actions/cache@v4
         with:
-          # npm cache files are stored in `~/.npm` on Linux/macOS
-          path: ~/.npm
-          key: ${{ runner.OS }}-node-${{ hashFiles('**/package-lock.json') }}
+          path: |
+            ~/.npm
+            ${{ github.workspace }}/.next/cache
+          # Generate a new cache whenever packages or source files change
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx') }}
+          # If source files changed but packages didn't, rebuild from a prior cache
           restore-keys: |
-            ${{ runner.OS }}-node-
-            ${{ runner.OS }}-
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-
       - run: npm ci
       - name: Set up MySQL
         run: |
@@ -54,16 +56,27 @@ jobs:
           LOG_LEVEL: warn
           PORT: 3001
 
+      - name: Setup E2E database
+        run: node cypress/setup.js
+        env:
+          DB_PASSWORD:
+          DB_NAME: bm_e2e_tests
+
+      - name: Build for E2E
+        run: npm run build
+        env:
+          DB_PASSWORD:
+          DB_NAME: bm_e2e_tests
+          NODE_ENV: production
+
       - name: Cypress run
-        uses: cypress-io/github-action@v2
+        uses: cypress-io/github-action@v6
         env:
           DB_PASSWORD:
           DB_NAME: bm_e2e_tests
           LOG_LEVEL: warn
           PORT: 3000
           NODE_ENV: production
-          ADMIN_USERNAME: "admin@banmanagement.com"
-          ADMIN_PASSWORD: "P%@#fjdVJ3Y%pdGR" # Keep this as is to avoid HIBP failing checks
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           CYPRESS_PROJECT_ID: ${{ secrets.PROJECT_ID }}
@@ -72,7 +85,6 @@ jobs:
           NOTIFICATION_VAPID_PRIVATE_KEY: ${{ secrets.NOTIFICATION_VAPID_PRIVATE_KEY }}
         with:
           install: false
-          build: npm run e2e:build
           start: npm start
           wait-on: "http://127.0.0.1:3000"
           record: true

.gitignore

@@ -11,3 +11,6 @@ bundles
 .travis/*.key
 .travis/*.key.pub
 public/images/opengraph/cache
+
+uploads/**/*
+!uploads/documents/.gitkeep

Dockerfile

@@ -36,11 +36,13 @@ RUN addgroup --system --gid 1001 nodejs
 RUN adduser --system --uid 1001 nextjs
 
 RUN mkdir -p /app/.next/cache/images && chown nextjs:nodejs /app/.next/cache/images
+RUN mkdir -p /app/uploads/documents && chown nextjs:nodejs /app/uploads/documents
 
 COPY --from=builder --chown=nextjs:nodejs /app ./
 
 VOLUME /app/.next/cache/images
 VOLUME /app/public/images/opengraph/cache
+VOLUME /app/uploads/documents
 
 USER nextjs
 

components/AdminLayout.js

@@ -3,7 +3,7 @@ import Link from 'next/link'
 import { useRouter, withRouter } from 'next/router'
 import clsx from 'clsx'
 import { BiServer } from 'react-icons/bi'
-import { MdOutlineGroups, MdOutlineExitToApp, MdOutlineNotifications, MdLogout, MdSettings, MdWebhook } from 'react-icons/md'
+import { MdOutlineGroups, MdOutlineExitToApp, MdOutlineNotifications, MdLogout, MdSettings, MdWebhook, MdOutlineImage } from 'react-icons/md'
 import Avatar from './Avatar'
 import Loader from './Loader'
 import ErrorLayout from './ErrorLayout'
@@ -12,6 +12,7 @@ import SessionNavProfile from './SessionNavProfile'
 import { useApi, useUser } from '../utils'
 
 const icons = {
+  Documents: <MdOutlineImage />,
   Roles: <MdOutlineGroups />,
   Servers: <BiServer />,
   'Notification Rules': <MdOutlineNotifications />,