feat: script to add file sizes

* Muted audio by default!

* Code renderin'

* not but still decently standard files being viewable

* reserved routes

* Update validateConfig.ts

---------

Co-authored-by: dicedtomato <35403473+diced@users.noreply.github.com>

.devcontainer/devcontainer.json

@@ -0,0 +1,41 @@
+{
+  "name": "Zipline Codespace",
+  "dockerComposeFile": "docker-compose.yml",
+  "service": "app",
+  "workspaceFolder": "/workspace",
+  "forwardPorts": [3000, 5432],
+  "features": {
+    "ghcr.io/devcontainers/features/common-utils:2": {},
+    "ghcr.io/devcontainers/features/docker-outside-of-docker:1": {},
+    "ghcr.io/devcontainers/features/node:1": {}
+  },
+  "customizations": {
+    "vscode": {
+      "settings": {
+        "[typescript]": {
+          "editor.defaultFormatter": "esbenp.prettier-vscode"
+        },
+        "[typescriptreact]": {
+          "editor.defaultFormatter": "esbenp.prettier-vscode"
+        },
+        "editor.defaultFormatter": "esbenp.prettier-vscode",
+        "editor.formatOnSave": true,
+        "files.autoSave": "afterDelay"
+      },
+      "extensions": ["prisma.prisma", "esbenp.prettier-vscode", "dbaeumer.vscode-eslint"]
+    }
+  },
+  "remoteUser": "zipline",
+  "remoteEnv": {
+    "CORE_DATABASE_URL": "postgres://postgres:postgres@localhost/zip10"
+  },
+  "portsAttributes": {
+	  "3000": {
+		  "label": "Zipline",
+      "onAutoForward": "openBrowser"
+	  },
+	  "5432": {
+		  "label": "Postgres"
+	  }
+  }
+}

.devcontainer/docker-compose.yml

@@ -0,0 +1,22 @@
+version: '3.8'
+services:
+  app:
+    image: mcr.microsoft.com/vscode/devcontainers/javascript-node:0-18
+    volumes:
+      - ..:/workspace:cached
+    network_mode: service:db
+    command: sleep infinity
+    user: zipline
+  db:
+    image: postgres:latest
+    restart: unless-stopped
+    environment:
+      - POSTGRES_USER=postgres
+      - POSTGRES_PASSWORD=postgres
+      - POSTGRES_DATABASE=postgres
+    volumes:
+      - pg_data:/var/lib/postgresql/data
+
+volumes:
+  pg_data:
+    

.yarnrc.yml

@@ -5,5 +5,7 @@ nodeLinker: node-modules
 plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
     spec: "@yarnpkg/plugin-interactive-tools"
+  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
+    spec: "@yarnpkg/plugin-workspace-tools"
 
-yarnPath: .yarn/releases/yarn-3.2.4.cjs
+yarnPath: .yarn/releases/yarn-3.3.1.cjs

CONTRIBUTING.md

@@ -12,7 +12,7 @@ Create an issue on GitHub, please include the following (if one of them is not a
 
 ## Feature requests
 
-Create an issue on GitHub, please include the following:
+Create an discussion on GitHub, please include the following:
 
 - Breif explanation of the feature in the title (very breif please)
 - How it would work (detailed, but optional)

Dockerfile

@@ -1,65 +1,75 @@
-FROM ghcr.io/diced/prisma-binaries:4.7.x as prisma
+# Use the Prisma binaries image as the first stage
+FROM ghcr.io/diced/prisma-binaries:4.10.x as prisma
 
-FROM node:alpine3.16 AS deps
-RUN mkdir -p /prisma-engines
-WORKDIR /build
+# Use Alpine Linux as the second stage
+FROM node:18-alpine3.16 as base
 
-COPY .yarn .yarn
-COPY package.json yarn.lock .yarnrc.yml ./
-
-RUN yarn install --immutable
-
-FROM node:alpine3.16 AS builder
-WORKDIR /build
-
-COPY --from=prisma /prisma-engines /prisma-engines
-ENV PRISMA_QUERY_ENGINE_BINARY=/prisma-engines/query-engine \
-  PRISMA_MIGRATION_ENGINE_BINARY=/prisma-engines/migration-engine \
-  PRISMA_INTROSPECTION_ENGINE_BINARY=/prisma-engines/introspection-engine \
-  PRISMA_FMT_BINARY=/prisma-engines/prisma-fmt \
-  PRISMA_CLI_QUERY_ENGINE_TYPE=binary \
-  PRISMA_CLIENT_ENGINE_TYPE=binary
-
-RUN apk add --no-cache openssl openssl-dev
-
-COPY --from=deps /build/node_modules ./node_modules
-COPY src ./src
-COPY prisma ./prisma
-COPY .yarn .yarn
-COPY package.json yarn.lock .yarnrc.yml esbuild.config.js next.config.js next-env.d.ts zip-env.d.ts tsconfig.json mimes.json ./
-
-ENV ZIPLINE_DOCKER_BUILD 1
-ENV NEXT_TELEMETRY_DISABLED 1
-
-RUN yarn build
-
-FROM node:alpine3.16 AS runner
+# Set the working directory
 WORKDIR /zipline
 
+# Copy the necessary files from the project
+COPY prisma ./prisma
+COPY src ./src
+COPY next.config.js ./next.config.js
+COPY tsup.config.ts ./tsup.config.ts
+COPY tsconfig.json ./tsconfig.json
+COPY mimes.json ./mimes.json
+COPY public ./public
+
+FROM base as builder
+
+COPY .yarn ./.yarn
+COPY package*.json ./
+COPY yarn*.lock ./
+COPY .yarnrc.yml ./
+
+# Copy the prisma binaries from prisma stage
 COPY --from=prisma /prisma-engines /prisma-engines
 ENV PRISMA_QUERY_ENGINE_BINARY=/prisma-engines/query-engine \
   PRISMA_MIGRATION_ENGINE_BINARY=/prisma-engines/migration-engine \
   PRISMA_INTROSPECTION_ENGINE_BINARY=/prisma-engines/introspection-engine \
   PRISMA_FMT_BINARY=/prisma-engines/prisma-fmt \
   PRISMA_CLI_QUERY_ENGINE_TYPE=binary \
-  PRISMA_CLIENT_ENGINE_TYPE=binary
+  PRISMA_CLIENT_ENGINE_TYPE=binary \
+  ZIPLINE_DOCKER_BUILD=true \
+  NEXT_TELEMETRY_DISABLED=1
 
-RUN apk add --no-cache openssl openssl-dev
-RUN apk add --no-cache perl procps
+# Install production dependencies then temporarily save
+RUN yarn workspaces focus --production --all
+RUN cp -RL node_modules /tmp/node_modules
 
-ENV NODE_ENV production
-ENV NEXT_TELEMETRY_DISABLED 1
+# Install the dependencies
+RUN yarn install --immutable
 
-COPY --from=builder /build/.next ./.next
-COPY --from=builder /build/node_modules ./node_modules
+# Run the build
+RUN yarn build
 
-COPY --from=builder /build/next.config.js ./next.config.js
-COPY --from=builder /build/esbuild.config.js ./esbuild.config.js
-COPY --from=builder /build/src ./src
-COPY --from=builder /build/dist ./dist
-COPY --from=builder /build/prisma ./prisma
-COPY --from=builder /build/tsconfig.json ./tsconfig.json
-COPY --from=builder /build/package.json ./package.json
-COPY --from=builder /build/mimes.json ./mimes.json
+# Use Alpine Linux as the final image
+FROM base
+# Install the necessary packages
+RUN apk add --no-cache perl procps tini
 
-CMD ["node", "--enable-source-maps", "dist/server"]
+COPY --from=builder /prisma-engines /prisma-engines
+ENV PRISMA_QUERY_ENGINE_BINARY=/prisma-engines/query-engine \
+  PRISMA_MIGRATION_ENGINE_BINARY=/prisma-engines/migration-engine \
+  PRISMA_INTROSPECTION_ENGINE_BINARY=/prisma-engines/introspection-engine \
+  PRISMA_FMT_BINARY=/prisma-engines/prisma-fmt \
+  PRISMA_CLI_QUERY_ENGINE_TYPE=binary \
+  PRISMA_CLIENT_ENGINE_TYPE=binary \
+  NEXT_TELEMETRY_DISABLED=1
+
+# Copy only the necessary files from the previous stage
+COPY --from=builder /zipline/dist ./dist
+COPY --from=builder /zipline/.next ./.next
+COPY --from=builder /zipline/package.json ./package.json
+
+COPY --from=builder /zipline/node_modules ./node_modules
+COPY --from=builder /zipline/node_modules/.prisma/client ./node_modules/.prisma/client
+COPY --from=builder /zipline/node_modules/@prisma/client ./node_modules/@prisma/client
+
+# Copy Startup Script
+COPY docker-entrypoint.sh /zipline
+# Make Startup Script Executable
+RUN chmod a+x /zipline/docker-entrypoint.sh
+# Set the entrypoint to the startup script
+ENTRYPOINT ["tini", "--", "/zipline/docker-entrypoint.sh"]

docker-compose.dev.yml

@@ -2,7 +2,6 @@ version: '3'
 services:
   postgres:
     image: postgres:15
-    restart: always
     environment:
       - POSTGRES_USER=postgres
       - POSTGRES_PASSWORD=postgres
@@ -21,7 +20,6 @@ services:
       dockerfile: Dockerfile
     ports:
       - '3000:3000'
-    restart: unless-stopped
     env_file:
       - .env.local
     volumes:

docker-compose.yml

@@ -2,7 +2,7 @@ version: '3'
 services:
   postgres:
     image: postgres:15
-    restart: always
+    restart: unless-stopped
     environment:
       - POSTGRES_USER=postgres
       - POSTGRES_PASSWORD=postgres
@@ -19,7 +19,7 @@ services:
     image: ghcr.io/diced/zipline
     ports:
       - '3000:3000'
-    restart: always
+    restart: unless-stopped
     environment:
       - CORE_RETURN_HTTPS=false
       - CORE_SECRET=changethis

docker-entrypoint.sh

@@ -0,0 +1,5 @@
+#!/bin/sh
+
+set -e
+
+node --enable-source-maps dist/index.js

esbuild.config.js

@@ -1,23 +0,0 @@
-const esbuild = require('esbuild');
-const { existsSync } = require('fs');
-const { rm } = require('fs/promises');
-const { recursiveReadDir } = require('next/dist/lib/recursive-readdir');
-
-(async () => {
-  if (existsSync('./dist')) {
-    await rm('./dist', { recursive: true });
-  }
-
-  const entryPoints = await recursiveReadDir('./src', /.*\.(ts)$/, /(themes|queries|pages)/);
-
-  await esbuild.build({
-    tsconfig: 'tsconfig.json',
-    outdir: 'dist',
-    platform: 'node',
-    entryPoints,
-    format: 'cjs',
-    resolveExtensions: ['.ts', '.js'],
-    write: true,
-    sourcemap: true,
-  });
-})();

package.json

@@ -1,99 +1,98 @@
 {
   "name": "zipline",
-  "version": "3.6.4",
+  "version": "3.7.0-rc4",
   "license": "MIT",
   "scripts": {
     "dev": "npm-run-all build:server dev:run",
-    "dev:run": "cross-env DEBUG=true REACT_EDITOR=code NODE_ENV=development RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED=false node --enable-source-maps dist/server",
+    "dev:run": "cross-env DEBUG=true REACT_EDITOR=code NODE_ENV=development RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED=false node --enable-source-maps dist",
     "build": "npm-run-all build:server build:schema build:next",
     "build-ci": "cross-env ZIPLINE_DOCKER_BUILD=1 npm-run-all build:server build:schema build:next",
-    "build:server": "node esbuild.config.js",
+    "build:server": "tsup",
     "build:next": "next build",
     "build:schema": "prisma generate --schema=prisma/schema.prisma",
     "format": "prettier --write ./src/**/*.{ts,tsx} ./*.{md,js,json,yml}",
     "migrate:dev": "prisma migrate dev --create-only",
-    "start": "node dist/server",
+    "start": "node dist",
     "lint": "next lint",
-    "docker:run": "docker-compose up -d",
+    "docker:up": "docker-compose up",
     "docker:down": "docker-compose down",
     "docker:build-dev": "docker-compose --file docker-compose.dev.yml up --build",
-    "docker:run-dev": "docker-compose --file docker-compose.dev.yml up",
+    "docker:up-dev": "docker-compose --file docker-compose.dev.yml up",
     "docker:down-dev": "docker-compose --file docker-compose.dev.yml down",
-    "scripts:read-config": "node dist/scripts/read-config",
-    "scripts:import-dir": "node dist/scripts/import-dir",
-    "scripts:list-users": "node dist/scripts/list-users",
-    "scripts:set-user": "node dist/scripts/set-user"
+    "scripts:read-config": "node --enable-source-maps dist/scripts/read-config",
+    "scripts:import-dir": "node --enable-source-maps dist/scripts/import-dir",
+    "scripts:list-users": "node --enable-source-maps dist/scripts/list-users",
+    "scripts:set-user": "node --enable-source-maps dist/scripts/set-user",
+    "scripts:clear-zero-byte": "node --enable-source-maps dist/scripts/clear-zero-byte",
+    "scripts:query-size": "node --enable-source-maps dist/scripts/query-size"
   },
   "dependencies": {
-    "@dicedtomato/mantine-data-grid": "0.0.23",
-    "@emotion/react": "^11.10.5",
+    "@emotion/react": "^11.10.6",
     "@emotion/server": "^11.10.0",
-    "@mantine/core": "^5.9.2",
-    "@mantine/dropzone": "^5.9.2",
-    "@mantine/form": "^5.9.2",
-    "@mantine/hooks": "^5.9.2",
-    "@mantine/modals": "^5.9.2",
-    "@mantine/next": "^5.9.2",
-    "@mantine/notifications": "^5.9.2",
-    "@mantine/nprogress": "^5.9.2",
-    "@mantine/prism": "^5.9.2",
-    "@prisma/client": "^4.7.1",
-    "@prisma/internals": "^4.7.1",
-    "@prisma/migrate": "^4.7.1",
-    "@sapphire/shapeshift": "^3.7.1",
-    "@tanstack/react-query": "^4.19.1",
-    "argon2": "^0.30.2",
-    "chart.js": "^4.0.1",
-    "colorette": "^2.0.19",
+    "@mantine/core": "^5.10.5",
+    "@mantine/dropzone": "^5.10.5",
+    "@mantine/form": "^5.10.5",
+    "@mantine/hooks": "^5.10.5",
+    "@mantine/modals": "^5.10.5",
+    "@mantine/next": "^5.10.5",
+    "@mantine/notifications": "^5.10.5",
+    "@mantine/prism": "^5.10.5",
+    "@prisma/client": "^4.10.1",
+    "@prisma/internals": "^4.10.1",
+    "@prisma/migrate": "^4.10.1",
+    "@sapphire/shapeshift": "^3.8.1",
+    "@tanstack/react-query": "^4.24.10",
+    "argon2": "^0.30.3",
     "cookie": "^0.5.0",
     "dayjs": "^1.11.7",
     "dotenv": "^16.0.3",
-    "dotenv-expand": "^9.0.0",
-    "exiftool-vendored": "^18.6.0",
-    "fastify": "^4.10.2",
-    "fastify-plugin": "^4.4.0",
+    "dotenv-expand": "^10.0.0",
+    "exiftool-vendored": "^21.2.0",
+    "fastify": "^4.13.0",
+    "fastify-plugin": "^4.5.0",
     "fflate": "^0.7.4",
-    "find-my-way": "^7.3.1",
+    "find-my-way": "^7.5.0",
     "katex": "^0.16.4",
+    "mantine-datatable": "^1.8.6",
     "minio": "^7.0.32",
     "ms": "canary",
     "multer": "^1.4.5-lts.1",
-    "next": "^13.0.6",
+    "next": "^13.2.1",
     "otplib": "^12.0.1",
-    "prisma": "^4.7.1",
+    "prisma": "^4.10.1",
     "prismjs": "^1.29.0",
     "qrcode": "^1.5.1",
     "react": "^18.2.0",
-    "react-chartjs-2": "^5.0.1",
     "react-dom": "^18.2.0",
     "react-feather": "^2.0.10",
-    "react-markdown": "^8.0.4",
+    "react-markdown": "^8.0.5",
+    "recharts": "^2.4.3",
     "recoil": "^0.7.6",
     "remark-gfm": "^3.0.1",
-    "sharp": "^0.31.2"
+    "sharp": "^0.31.3"
   },
   "devDependencies": {
     "@types/cookie": "^0.5.1",
-    "@types/katex": "^0.14.0",
-    "@types/minio": "^7.0.15",
+    "@types/katex": "^0.16.0",
+    "@types/minio": "^7.0.16",
     "@types/multer": "^1.4.7",
-    "@types/node": "^18.11.12",
+    "@types/node": "^18.14.2",
     "@types/qrcode": "^1.5.0",
-    "@types/react": "^18.0.26",
-    "@types/sharp": "^0.31.0",
+    "@types/react": "^18.0.28",
+    "@types/sharp": "^0.31.1",
     "cross-env": "^7.0.3",
-    "esbuild": "^0.16.4",
-    "eslint": "^8.29.0",
-    "eslint-config-next": "^13.0.6",
-    "eslint-config-prettier": "^8.5.0",
+    "eslint": "^8.35.0",
+    "eslint-config-next": "^13.2.1",
+    "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-prettier": "^4.2.1",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.1",
-    "typescript": "^4.9.4"
+    "prettier": "^2.8.4",
+    "tsup": "^6.6.3",
+    "typescript": "^4.9.5"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/diced/zipline.git"
   },
-  "packageManager": "yarn@3.2.4"
+  "packageManager": "yarn@3.3.1"
 }

prisma/migrations/20221207035224_add_oauth_user_id/migration.sql

@@ -6,7 +6,7 @@
 
 */
 -- AlterTable
-ALTER TABLE "OAuth" ADD COLUMN     "oauthId" TEXT NOT NULL;
+ALTER TABLE "OAuth" ADD COLUMN     "oauthId" TEXT;
 
 -- CreateIndex
 CREATE UNIQUE INDEX "OAuth_provider_oauthId_key" ON "OAuth"("provider", "oauthId");

prisma/migrations/20230111055303_embed/migration.sql

@@ -0,0 +1,13 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `embedColor` on the `User` table. All the data in the column will be lost.
+  - You are about to drop the column `embedSiteName` on the `User` table. All the data in the column will be lost.
+  - You are about to drop the column `embedTitle` on the `User` table. All the data in the column will be lost.
+
+*/
+-- AlterTable
+ALTER TABLE "User" DROP COLUMN "embedColor",
+DROP COLUMN "embedSiteName",
+DROP COLUMN "embedTitle",
+ADD COLUMN     "embed" JSONB NOT NULL DEFAULT '{}';

prisma/migrations/20230115193136_rename_fields_image/migration.sql

@@ -0,0 +1,8 @@
+-- AlterTable
+ALTER TABLE "Image" RENAME COLUMN "created_at" TO "createdAt";
+
+-- AlterTable
+ALTER TABLE "Image" RENAME COLUMN "expires_at" TO "expiresAt";
+
+-- AlterTable
+ALTER TABLE "Image" RENAME COLUMN "file" TO "name";

prisma/migrations/20230115195550_rename_fields_url/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Url" RENAME COLUMN "created_at" TO "createdAt";

prisma/migrations/20230115195803_rename_fields_stats/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable 
+ALTER TABLE "Stats" RENAME COLUMN "created_at" TO "createdAt";

prisma/migrations/20230115195906_rename_fields_invite/migration.sql

@@ -0,0 +1,5 @@
+-- AlterTable
+ALTER TABLE "Invite" RENAME COLUMN "created_at" TO "createdAt";
+
+-- AlterTable
+ALTER TABLE "Invite" RENAME COLUMN "expires_at" TO "expiresAt";

prisma/migrations/20230115200747_rename_image_file/migration.sql

@@ -0,0 +1,19 @@
+-- AlterEnum
+ALTER TYPE "ImageFormat" RENAME TO "FileNameFormat";
+
+-- AlterTable
+ALTER TABLE "Image" RENAME TO "File";
+
+-- AlterTable
+ALTER TABLE "InvisibleImage" RENAME TO "InvisibleFile";
+
+-- AlterTable
+ALTER TABLE "InvisibleFile" RENAME COLUMN "imageId" TO "fileId";
+
+-- AlterForeignKey
+ALTER TABLE "InvisibleFile" RENAME CONSTRAINT "InvisibleImage_imageId_fkey" TO "InvisibleFile_fileId_fkey";
+ALTER INDEX "InvisibleImage_imageId_key" RENAME TO "InvisibleFile_fileId_key";
+
+-- AlterForeignKey
+ALTER TABLE "InvisibleFile" RENAME CONSTRAINT "InvisibleImage_pkey" TO "InvisibleFile_pkey";
+ALTER TABLE "File" RENAME CONSTRAINT "Image_pkey" TO "File_pkey";

prisma/migrations/20230115214317_file_original_name/migration.sql

@@ -0,0 +1,8 @@
+-- AlterTable
+ALTER TABLE "File" ADD COLUMN     "originalName" TEXT;
+
+-- RenameForeignKey
+ALTER TABLE "File" RENAME CONSTRAINT "Image_userId_fkey" TO "File_userId_fkey";
+
+-- RenameIndex
+ALTER INDEX "InvisibleImage_invis_key" RENAME TO "InvisibleFile_invis_key";

prisma/migrations/20230128183334_folders/migration.sql

@@ -0,0 +1,19 @@
+-- AlterTable
+ALTER TABLE "File" ADD COLUMN     "folderId" INTEGER;
+
+-- CreateTable
+CREATE TABLE "Folder" (
+    "id" SERIAL NOT NULL,
+    "name" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "userId" INTEGER NOT NULL,
+
+    CONSTRAINT "Folder_pkey" PRIMARY KEY ("id")
+);
+
+-- AddForeignKey
+ALTER TABLE "Folder" ADD CONSTRAINT "Folder_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "File" ADD CONSTRAINT "File_folderId_fkey" FOREIGN KEY ("folderId") REFERENCES "Folder"("id") ON DELETE SET NULL ON UPDATE CASCADE;

prisma/migrations/20230219001919_public_folder/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Folder" ADD COLUMN     "public" BOOLEAN NOT NULL DEFAULT false;

prisma/migrations/20230226051016_file_size/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "File" ADD COLUMN     "size" INTEGER NOT NULL DEFAULT 0;

prisma/schema.prisma

@@ -16,81 +16,103 @@ model User {
   administrator Boolean   @default(false)
   superAdmin    Boolean   @default(false)
   systemTheme   String    @default("system")
-  embedTitle    String?
-  embedColor    String    @default("#2f3136")
-  embedSiteName String?   @default("{image.file} • {user.name}")
+  embed         Json      @default("{}")
   ratelimit     DateTime?
   totpSecret    String?
   domains       String[]
   oauth         OAuth[]
-  images        Image[]
+  files         File[]
   urls          Url[]
   Invite        Invite[]
+  Folder        Folder[]
 }
 
-enum ImageFormat {
+model Folder {
+  id        Int      @id @default(autoincrement())
+  name      String
+  public    Boolean  @default(false)
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  user   User @relation(fields: [userId], references: [id], onDelete: Cascade)
+  userId Int
+
+  files File[]
+}
+
+enum FileNameFormat {
   UUID
   DATE
   RANDOM
   NAME
 }
 
-model Image {
-  id         Int             @id @default(autoincrement())
-  file       String
-  mimetype   String          @default("image/png")
-  created_at DateTime        @default(now())
-  expires_at DateTime?
-  maxViews   Int?
-  views      Int             @default(0)
-  favorite   Boolean         @default(false)
-  embed      Boolean         @default(false)
-  password   String?
-  invisible  InvisibleImage?
-  format     ImageFormat     @default(RANDOM)
-  user       User?            @relation(fields: [userId], references: [id], onDelete: SetNull)
-  userId     Int?
+model File {
+  id           Int            @id @default(autoincrement())
+  name         String
+  originalName String?
+  mimetype     String         @default("image/png")
+  createdAt    DateTime       @default(now())
+  size         Int            @default(0)
+  expiresAt    DateTime?
+  maxViews     Int?
+  views        Int            @default(0)
+  favorite     Boolean        @default(false)
+  embed        Boolean        @default(false)
+  password     String?
+  invisible    InvisibleFile?
+  format       FileNameFormat @default(RANDOM)
+
+  user   User? @relation(fields: [userId], references: [id], onDelete: SetNull)
+  userId Int?
+
+  folder   Folder? @relation(fields: [folderId], references: [id], onDelete: SetNull)
+  folderId Int?
 }
 
-model InvisibleImage {
-  id      Int    @id @default(autoincrement())
-  invis   String @unique
-  imageId Int    @unique
-  image   Image  @relation(fields: [imageId], references: [id], onDelete: Cascade)
+model InvisibleFile {
+  id    Int    @id @default(autoincrement())
+  invis String @unique
+
+  fileId Int  @unique
+  file   File @relation(fields: [fileId], references: [id], onDelete: Cascade)
 }
 
 model Url {
   id          String        @id @unique
   destination String
   vanity      String?
-  created_at  DateTime      @default(now())
+  createdAt   DateTime      @default(now())
   maxViews    Int?
   views       Int           @default(0)
   invisible   InvisibleUrl?
-  user        User?         @relation(fields: [userId], references: [id], onDelete: SetNull)
-  userId      Int?
+
+  user   User? @relation(fields: [userId], references: [id], onDelete: SetNull)
+  userId Int?
 }
 
 model InvisibleUrl {
   id    Int    @id @default(autoincrement())
   invis String @unique
+
   urlId String @unique
   url   Url    @relation(fields: [urlId], references: [id], onDelete: Cascade)
 }
 
 model Stats {
-  id         Int      @id @default(autoincrement())
-  created_at DateTime @default(now())
-  data       Json
+  id        Int      @id @default(autoincrement())
+  createdAt DateTime @default(now())
+  data      Json
 }
 
 model Invite {
-  id          Int       @id @default(autoincrement())
-  code        String    @unique
-  created_at  DateTime  @default(now())
-  expires_at  DateTime?
-  used        Boolean   @default(false)
-  createdBy   User      @relation(fields: [createdById], references: [id], onDelete: Cascade)
+  id        Int       @id @default(autoincrement())
+  code      String    @unique
+  createdAt DateTime  @default(now())
+  expiresAt DateTime?
+  used      Boolean   @default(false)
+
+  createdBy   User @relation(fields: [createdById], references: [id], onDelete: Cascade)
   createdById Int
 }
 
@@ -100,7 +122,7 @@ model OAuth {
   user     User           @relation(fields: [userId], references: [id], onDelete: Cascade)
   userId   Int
   username String
-  oauthId  String
+  oauthId  String?
   token    String
   refresh  String?
 

src/components/CodeInput.tsx

@@ -1,4 +1,5 @@
 import { createStyles, MantineSize, Textarea } from '@mantine/core';
+import { useEffect } from 'react';
 
 const useStyles = createStyles((theme, { size }: { size: MantineSize }) => ({
   input: {
@@ -11,5 +12,26 @@ const useStyles = createStyles((theme, { size }: { size: MantineSize }) => ({
 export default function CodeInput({ ...props }) {
   const { classes } = useStyles({ size: 'md' }, { name: 'CodeInput' });
 
-  return <Textarea classNames={{ input: classes.input }} autoComplete='nope' {...props} />;
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Tab') {
+        if (document.activeElement?.tagName !== 'TEXTAREA') return;
+
+        e.preventDefault();
+        const target = e.target as HTMLTextAreaElement;
+        const start = target.selectionStart;
+        const end = target.selectionEnd;
+        target.value = `${target.value.substring(0, start)}  ${target.value.substring(end)}`;
+        target.selectionStart = target.selectionEnd = start + 2;
+        target.focus();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []);
+
+  return <Textarea classNames={{ input: classes.input }} {...props} />;
 }

src/components/File.tsx

@@ -1,7 +1,22 @@
-import { Button, Card, Group, LoadingOverlay, Modal, Stack, Text, Title, Tooltip } from '@mantine/core';
+import {
+  ActionIcon,
+  Card,
+  Group,
+  LoadingOverlay,
+  Modal,
+  Select,
+  SimpleGrid,
+  Stack,
+  Text,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { useClipboard } from '@mantine/hooks';
 import { showNotification } from '@mantine/notifications';
+import useFetch from 'hooks/useFetch';
 import { useFileDelete, useFileFavorite } from 'lib/queries/files';
+import { useFolders } from 'lib/queries/folders';
+import { bytesToHuman } from 'lib/utils/bytes';
 import { relativeTime } from 'lib/utils/client';
 import { useState } from 'react';
 import {
@@ -10,16 +25,19 @@ import {
   CopyIcon,
   CrossIcon,
   DeleteIcon,
+  DownloadIcon,
   ExternalLinkIcon,
   EyeIcon,
+  HardDriveIcon,
   FileIcon,
+  FolderMinusIcon,
+  FolderPlusIcon,
   HashIcon,
   ImageIcon,
+  InfoIcon,
   StarIcon,
 } from './icons';
-import Link from './Link';
 import MutedText from './MutedText';
-import Markdown from './render/Markdown';
 import Type from './Type';
 
 export function FileMeta({ Icon, title, subtitle, ...other }) {
@@ -44,13 +62,21 @@ export function FileMeta({ Icon, title, subtitle, ...other }) {
   );
 }
 
-export default function File({ image, disableMediaPreview, exifEnabled }) {
+export default function File({
+  image,
+  disableMediaPreview,
+  exifEnabled,
+  refreshImages,
+  reducedActions = false,
+}) {
   const [open, setOpen] = useState(false);
   const [overrideRender, setOverrideRender] = useState(false);
   const deleteFile = useFileDelete();
   const favoriteFile = useFileFavorite();
   const clipboard = useClipboard();
 
+  const folders = useFolders();
+
   const loading = deleteFile.isLoading || favoriteFile.isLoading;
 
   const handleDelete = async () => {
@@ -113,15 +139,96 @@ export default function File({ image, disableMediaPreview, exifEnabled }) {
     );
   };
 
+  const inFolder = image.folderId;
+
+  const refresh = () => {
+    refreshImages();
+    folders.refetch();
+  };
+
+  const removeFromFolder = async () => {
+    const res = await useFetch('/api/user/folders/' + image.folderId, 'DELETE', {
+      file: Number(image.id),
+    });
+
+    refresh();
+
+    if (!res.error) {
+      showNotification({
+        title: 'Removed from folder',
+        message: res.name,
+        color: 'green',
+        icon: <FolderMinusIcon />,
+      });
+    } else {
+      showNotification({
+        title: 'Failed to remove from folder',
+        message: res.error,
+        color: 'red',
+        icon: <CrossIcon />,
+      });
+    }
+  };
+
+  const addToFolder = async (t) => {
+    const res = await useFetch('/api/user/folders/' + t, 'POST', {
+      file: Number(image.id),
+    });
+
+    refresh();
+
+    if (!res.error) {
+      showNotification({
+        title: 'Added to folder',
+        message: res.name,
+        color: 'green',
+        icon: <FolderPlusIcon />,
+      });
+    } else {
+      showNotification({
+        title: 'Failed to add to folder',
+        message: res.error,
+        color: 'red',
+        icon: <CrossIcon />,
+      });
+    }
+  };
+
+  const createFolder = (t) => {
+    useFetch('/api/user/folders', 'POST', {
+      name: t,
+      add: [Number(image.id)],
+    }).then((res) => {
+      refresh();
+
+      if (!res.error) {
+        showNotification({
+          title: 'Created & added to folder',
+          message: res.name,
+          color: 'green',
+          icon: <FolderPlusIcon />,
+        });
+      } else {
+        showNotification({
+          title: 'Failed to create folder',
+          message: res.error,
+          color: 'red',
+          icon: <CrossIcon />,
+        });
+      }
+    });
+    return { value: t, label: t };
+  };
+
   return (
     <>
-      <Modal opened={open} onClose={() => setOpen(false)} title={<Title>{image.file}</Title>} size='xl'>
+      <Modal opened={open} onClose={() => setOpen(false)} title={<Title>{image.name}</Title>} size='xl'>
         <LoadingOverlay visible={loading} />
         <Stack>
           <Type
             file={image}
-            src={`/r/${image.file}`}
-            alt={image.file}
+            src={`/r/${encodeURI(image.name)}`}
+            alt={image.name}
             popup
             sx={{ minHeight: 200 }}
             style={{ minHeight: 200 }}
@@ -129,9 +236,18 @@ export default function File({ image, disableMediaPreview, exifEnabled }) {
             overrideRender={overrideRender}
             setOverrideRender={setOverrideRender}
           />
-          <Stack>
-            <FileMeta Icon={FileIcon} title='Name' subtitle={image.file} />
+          <SimpleGrid
+            my='md'
+            cols={3}
+            breakpoints={[
+              { maxWidth: 600, cols: 1 },
+              { maxWidth: 900, cols: 2 },
+              { maxWidth: 1200, cols: 3 },
+            ]}
+          >
+            <FileMeta Icon={FileIcon} title='Name' subtitle={image.name} />
             <FileMeta Icon={ImageIcon} title='Type' subtitle={image.mimetype} />
+            <FileMeta Icon={HardDriveIcon} title='Size' subtitle={bytesToHuman(image.size || 0)} />
             <FileMeta Icon={EyeIcon} title='Views' subtitle={image?.views?.toLocaleString()} />
             {image.maxViews && (
               <FileMeta
@@ -144,33 +260,111 @@ export default function File({ image, disableMediaPreview, exifEnabled }) {
             <FileMeta
               Icon={CalendarIcon}
               title='Uploaded'
-              subtitle={relativeTime(new Date(image.created_at))}
-              tooltip={new Date(image?.created_at).toLocaleString()}
+              subtitle={relativeTime(new Date(image.createdAt))}
+              tooltip={new Date(image?.createdAt).toLocaleString()}
             />
-            {image.expires_at && (
+            {image.expiresAt && !reducedActions && (
               <FileMeta
                 Icon={ClockIcon}
                 title='Expires'
-                subtitle={relativeTime(new Date(image.expires_at))}
-                tooltip={new Date(image.expires_at).toLocaleString()}
+                subtitle={relativeTime(new Date(image.expiresAt))}
+                tooltip={new Date(image.expiresAt).toLocaleString()}
               />
             )}
             <FileMeta Icon={HashIcon} title='ID' subtitle={image.id} />
-          </Stack>
+          </SimpleGrid>
         </Stack>
 
-        <Group position='right' mt='md'>
-          {exifEnabled && (
-            <Link href={`/dashboard/metadata/${image.id}`} target='_blank' rel='noopener noreferrer'>
-              <Button leftIcon={<ExternalLinkIcon />}>View Metadata</Button>
-            </Link>
-          )}
-          <Button onClick={handleCopy}>Copy URL</Button>
-          <Button onClick={handleDelete}>Delete</Button>
-          <Button onClick={handleFavorite}>{image.favorite ? 'Unfavorite' : 'Favorite'}</Button>
-          <Link href={image.url} target='_blank'>
-            <Button rightIcon={<ExternalLinkIcon />}>Open</Button>
-          </Link>
+        <Group position='apart' my='md'>
+          <Group position='left'>
+            {exifEnabled && !reducedActions && (
+              <Tooltip label='View Metadata'>
+                <ActionIcon
+                  color='blue'
+                  variant='filled'
+                  onClick={() => window.open(`/dashboard/metadata/${image.id}`, '_blank')}
+                >
+                  <InfoIcon />
+                </ActionIcon>
+              </Tooltip>
+            )}
+            {reducedActions ? null : inFolder && !folders.isLoading ? (
+              <Tooltip
+                label={`Remove from folder "${
+                  folders.data.find((f) => f.id === image.folderId)?.name ?? ''
+                }"`}
+              >
+                <ActionIcon
+                  color='red'
+                  variant='filled'
+                  onClick={removeFromFolder}
+                  loading={folders.isLoading}
+                >
+                  <FolderMinusIcon />
+                </ActionIcon>
+              </Tooltip>
+            ) : (
+              <Tooltip label='Add to folder'>
+                <Select
+                  onChange={addToFolder}
+                  placeholder='Add to folder'
+                  data={[
+                    ...(folders.data ? folders.data : []).map((folder) => ({
+                      value: String(folder.id),
+                      label: `${folder.id}: ${folder.name}`,
+                    })),
+                  ]}
+                  searchable
+                  creatable
+                  getCreateLabel={(query) => `Create folder "${query}"`}
+                  onCreate={createFolder}
+                />
+              </Tooltip>
+            )}
+          </Group>
+          <Group position='right'>
+            {reducedActions ? null : (
+              <>
+                <Tooltip label='Delete file'>
+                  <ActionIcon color='red' variant='filled' onClick={handleDelete}>
+                    <DeleteIcon />
+                  </ActionIcon>
+                </Tooltip>
+
+                <Tooltip label={image.favorite ? 'Unfavorite' : 'Favorite'}>
+                  <ActionIcon
+                    color={image.favorite ? 'yellow' : 'gray'}
+                    variant='filled'
+                    onClick={handleFavorite}
+                  >
+                    <StarIcon />
+                  </ActionIcon>
+                </Tooltip>
+              </>
+            )}
+
+            <Tooltip label='Open in new tab'>
+              <ActionIcon color='blue' variant='filled' onClick={() => window.open(image.url, '_blank')}>
+                <ExternalLinkIcon />
+              </ActionIcon>
+            </Tooltip>
+
+            <Tooltip label='Copy URL'>
+              <ActionIcon color='blue' variant='filled' onClick={handleCopy}>
+                <CopyIcon />
+              </ActionIcon>
+            </Tooltip>
+
+            <Tooltip label='Download'>
+              <ActionIcon
+                color='blue'
+                variant='filled'
+                onClick={() => window.open(`/r/${encodeURI(image.name)}?download=true`, '_blank')}
+              >
+                <DownloadIcon />
+              </ActionIcon>
+            </Tooltip>
+          </Group>
         </Group>
       </Modal>
       <Card sx={{ maxWidth: '100%', height: '100%' }} shadow='md'>
@@ -192,8 +386,8 @@ export default function File({ image, disableMediaPreview, exifEnabled }) {
               width: '100%',
               cursor: 'pointer',
             }}
-            src={`/r/${image.file}`}
-            alt={image.file}
+            src={`/r/${encodeURI(image.name)}`}
+            alt={image.name}
             onClick={() => setOpen(true)}
             disableMediaPreview={disableMediaPreview}
           />

src/components/File/FileModal.tsx

@@ -0,0 +1,345 @@
+import {
+  ActionIcon,
+  Group,
+  LoadingOverlay,
+  Modal,
+  Select,
+  SimpleGrid,
+  Stack,
+  Title,
+  Tooltip,
+} from '@mantine/core';
+import { useClipboard } from '@mantine/hooks';
+import { showNotification } from '@mantine/notifications';
+import useFetch from 'hooks/useFetch';
+import { useFileDelete, useFileFavorite } from 'lib/queries/files';
+import { useFolders } from 'lib/queries/folders';
+import { relativeTime } from 'lib/utils/client';
+import { useState } from 'react';
+import { FileMeta } from '.';
+import {
+  CalendarIcon,
+  ClockIcon,
+  CopyIcon,
+  CrossIcon,
+  DeleteIcon,
+  DownloadIcon,
+  ExternalLinkIcon,
+  EyeIcon,
+  FileIcon,
+  FolderMinusIcon,
+  FolderPlusIcon,
+  HashIcon,
+  ImageIcon,
+  InfoIcon,
+  StarIcon,
+} from '../icons';
+import Type from '../Type';
+
+export default function FileModal({
+  open,
+  setOpen,
+  file,
+  loading,
+  refresh,
+  reducedActions = false,
+  exifEnabled,
+}: {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  file: any;
+  loading: boolean;
+  refresh: () => void;
+  reducedActions?: boolean;
+  exifEnabled?: boolean;
+}) {
+  const deleteFile = useFileDelete();
+  const favoriteFile = useFileFavorite();
+  const folders = useFolders();
+
+  const [overrideRender, setOverrideRender] = useState(false);
+  const clipboard = useClipboard();
+
+  const handleDelete = async () => {
+    deleteFile.mutate(file.id, {
+      onSuccess: () => {
+        showNotification({
+          title: 'File Deleted',
+          message: '',
+          color: 'green',
+          icon: <DeleteIcon />,
+        });
+      },
+
+      onError: (res: any) => {
+        showNotification({
+          title: 'Failed to delete file',
+          message: res.error,
+          color: 'red',
+          icon: <CrossIcon />,
+        });
+      },
+
+      onSettled: () => {
+        setOpen(false);
+      },
+    });
+  };
+
+  const handleCopy = () => {
+    clipboard.copy(`${window.location.protocol}//${window.location.host}${file.url}`);
+    setOpen(false);
+    if (!navigator.clipboard)
+      showNotification({
+        title: 'Unable to copy to clipboard',
+        message: 'Zipline is unable to copy to clipboard due to security reasons.',
+        color: 'red',
+      });
+    else
+      showNotification({
+        title: 'Copied to clipboard',
+        message: '',
+        icon: <CopyIcon />,
+      });
+  };
+
+  const handleFavorite = async () => {
+    favoriteFile.mutate(
+      { id: file.id, favorite: !file.favorite },
+      {
+        onSuccess: () => {
+          showNotification({
+            title: 'The file is now ' + (!file.favorite ? 'favorited' : 'unfavorited'),
+            message: '',
+            icon: <StarIcon />,
+          });
+        },
+
+        onError: (res: any) => {
+          showNotification({
+            title: 'Failed to favorite file',
+            message: res.error,
+            color: 'red',
+            icon: <CrossIcon />,
+          });
+        },
+      }
+    );
+  };
+
+  const inFolder = file.folderId;
+
+  const removeFromFolder = async () => {
+    const res = await useFetch('/api/user/folders/' + file.folderId, 'DELETE', {
+      file: Number(file.id),
+    });
+
+    refresh();
+
+    if (!res.error) {
+      showNotification({
+        title: 'Removed from folder',
+        message: res.name,
+        color: 'green',
+        icon: <FolderMinusIcon />,
+      });
+    } else {
+      showNotification({
+        title: 'Failed to remove from folder',
+        message: res.error,
+        color: 'red',
+        icon: <CrossIcon />,
+      });
+    }
+  };
+
+  const addToFolder = async (t) => {
+    const res = await useFetch('/api/user/folders/' + t, 'POST', {
+      file: Number(file.id),
+    });
+
+    refresh();
+
+    if (!res.error) {
+      showNotification({
+        title: 'Added to folder',
+        message: res.name,
+        color: 'green',
+        icon: <FolderPlusIcon />,
+      });
+    } else {
+      showNotification({
+        title: 'Failed to add to folder',
+        message: res.error,
+        color: 'red',
+        icon: <CrossIcon />,
+      });
+    }
+  };
+
+  const createFolder = (t) => {
+    useFetch('/api/user/folders', 'POST', {
+      name: t,
+      add: [Number(file.id)],
+    }).then((res) => {
+      refresh();
+
+      if (!res.error) {
+        showNotification({
+          title: 'Created & added to folder',
+          message: res.name,
+          color: 'green',
+          icon: <FolderPlusIcon />,
+        });
+      } else {
+        showNotification({
+          title: 'Failed to create folder',
+          message: res.error,
+          color: 'red',
+          icon: <CrossIcon />,
+        });
+      }
+    });
+    return { value: t, label: t };
+  };
+
+  return (
+    <Modal opened={open} onClose={() => setOpen(false)} title={<Title>{file.name}</Title>} size='xl'>
+      <LoadingOverlay visible={loading} />
+      <Stack>
+        <Type
+          file={file}
+          src={`/r/${encodeURI(file.name)}`}
+          alt={file.name}
+          popup
+          sx={{ minHeight: 200 }}
+          style={{ minHeight: 200 }}
+          disableMediaPreview={false}
+          overrideRender={overrideRender}
+          setOverrideRender={setOverrideRender}
+        />
+        <SimpleGrid
+          my='md'
+          cols={3}
+          breakpoints={[
+            { maxWidth: 600, cols: 1 },
+            { maxWidth: 900, cols: 2 },
+            { maxWidth: 1200, cols: 3 },
+          ]}
+        >
+          <FileMeta Icon={FileIcon} title='Name' subtitle={file.name} />
+          <FileMeta Icon={ImageIcon} title='Type' subtitle={file.mimetype} />
+          <FileMeta Icon={EyeIcon} title='Views' subtitle={file?.views?.toLocaleString()} />
+          {file.maxViews && (
+            <FileMeta
+              Icon={EyeIcon}
+              title='Max views'
+              subtitle={file?.maxViews?.toLocaleString()}
+              tooltip={`This file will be deleted after being viewed ${file?.maxViews?.toLocaleString()} times.`}
+            />
+          )}
+          <FileMeta
+            Icon={CalendarIcon}
+            title='Uploaded'
+            subtitle={relativeTime(new Date(file.createdAt))}
+            tooltip={new Date(file?.createdAt).toLocaleString()}
+          />
+          {file.expiresAt && !reducedActions && (
+            <FileMeta
+              Icon={ClockIcon}
+              title='Expires'
+              subtitle={relativeTime(new Date(file.expiresAt))}
+              tooltip={new Date(file.expiresAt).toLocaleString()}
+            />
+          )}
+          <FileMeta Icon={HashIcon} title='ID' subtitle={file.id} />
+        </SimpleGrid>
+      </Stack>
+
+      <Group position='apart' my='md'>
+        <Group position='left'>
+          {exifEnabled && !reducedActions && (
+            <Tooltip label='View Metadata'>
+              <ActionIcon
+                color='blue'
+                variant='filled'
+                onClick={() => window.open(`/dashboard/metadata/${file.id}`, '_blank')}
+              >
+                <InfoIcon />
+              </ActionIcon>
+            </Tooltip>
+          )}
+          {reducedActions ? null : inFolder && !folders.isLoading ? (
+            <Tooltip
+              label={`Remove from folder "${folders.data.find((f) => f.id === file.folderId)?.name ?? ''}"`}
+            >
+              <ActionIcon color='red' variant='filled' onClick={removeFromFolder} loading={folders.isLoading}>
+                <FolderMinusIcon />
+              </ActionIcon>
+            </Tooltip>
+          ) : (
+            <Tooltip label='Add to folder'>
+              <Select
+                onChange={addToFolder}
+                placeholder='Add to folder'
+                data={[
+                  ...(folders.data ? folders.data : []).map((folder) => ({
+                    value: String(folder.id),
+                    label: `${folder.id}: ${folder.name}`,
+                  })),
+                ]}
+                searchable
+                creatable
+                getCreateLabel={(query) => `Create folder "${query}"`}
+                onCreate={createFolder}
+              />
+            </Tooltip>
+          )}
+        </Group>
+        <Group position='right'>
+          {reducedActions ? null : (
+            <>
+              <Tooltip label='Delete file'>
+                <ActionIcon color='red' variant='filled' onClick={handleDelete}>
+                  <DeleteIcon />
+                </ActionIcon>
+              </Tooltip>
+
+              <Tooltip label={file.favorite ? 'Unfavorite' : 'Favorite'}>
+                <ActionIcon
+                  color={file.favorite ? 'yellow' : 'gray'}
+                  variant='filled'
+                  onClick={handleFavorite}
+                >
+                  <StarIcon />
+                </ActionIcon>
+              </Tooltip>
+            </>
+          )}
+
+          <Tooltip label='Open in new tab'>
+            <ActionIcon color='blue' variant='filled' onClick={() => window.open(file.url, '_blank')}>
+              <ExternalLinkIcon />
+            </ActionIcon>
+          </Tooltip>
+
+          <Tooltip label='Copy URL'>
+            <ActionIcon color='blue' variant='filled' onClick={handleCopy}>
+              <CopyIcon />
+            </ActionIcon>
+          </Tooltip>
+
+          <Tooltip label='Download'>
+            <ActionIcon
+              color='blue'
+              variant='filled'
+              onClick={() => window.open(`/r/${encodeURI(file.name)}?download=true`, '_blank')}
+            >
+              <DownloadIcon />
+            </ActionIcon>
+          </Tooltip>
+        </Group>
+      </Group>
+    </Modal>
+  );
+}

src/components/File/index.tsx

@@ -0,0 +1,90 @@
+import { Card, Group, LoadingOverlay, Stack, Text, Tooltip } from '@mantine/core';
+import { useFileDelete, useFileFavorite } from 'lib/queries/files';
+import { useFolders } from 'lib/queries/folders';
+import { useState } from 'react';
+import MutedText from '../MutedText';
+import Type from '../Type';
+import FileModal from './FileModal';
+
+export function FileMeta({ Icon, title, subtitle, ...other }) {
+  return other.tooltip ? (
+    <Group>
+      <Icon size={24} />
+      <Tooltip label={other.tooltip}>
+        <Stack spacing={1}>
+          <Text>{title}</Text>
+          <MutedText size='md'>{subtitle}</MutedText>
+        </Stack>
+      </Tooltip>
+    </Group>
+  ) : (
+    <Group>
+      <Icon size={24} />
+      <Stack spacing={1}>
+        <Text>{title}</Text>
+        <MutedText size='md'>{subtitle}</MutedText>
+      </Stack>
+    </Group>
+  );
+}
+
+export default function File({
+  image,
+  disableMediaPreview,
+  exifEnabled,
+  refreshImages,
+  reducedActions = false,
+}) {
+  const [open, setOpen] = useState(false);
+  const deleteFile = useFileDelete();
+  const favoriteFile = useFileFavorite();
+  const loading = deleteFile.isLoading || favoriteFile.isLoading;
+
+  const folders = useFolders();
+
+  const refresh = () => {
+    refreshImages();
+    folders.refetch();
+  };
+
+  return (
+    <>
+      <FileModal
+        open={open}
+        setOpen={setOpen}
+        file={image}
+        loading={loading}
+        refresh={refresh}
+        reducedActions={reducedActions}
+        exifEnabled={exifEnabled}
+      />
+
+      <Card sx={{ maxWidth: '100%', height: '100%' }} shadow='md'>
+        <Card.Section>
+          <LoadingOverlay visible={loading} />
+          <Type
+            file={image}
+            sx={{
+              minHeight: 200,
+              maxHeight: 320,
+              fontSize: 70,
+              width: '100%',
+              cursor: 'pointer',
+            }}
+            style={{
+              minHeight: 200,
+              maxHeight: 320,
+              fontSize: 70,
+              width: '100%',
+              cursor: 'pointer',
+            }}
+            src={`/r/${encodeURI(image.name)}`}
+            alt={image.name}
+            onClick={() => setOpen(true)}
+            disableMediaPreview={disableMediaPreview}
+          />
+        </Card.Section>
+      </Card>
+    </>
+  );
+}

src/components/Layout.tsx

@@ -7,22 +7,20 @@ import {
   Group,
   Header,
   Image,
+  Input,
   MediaQuery,
   Menu,
   Navbar,
   NavLink,
   Paper,
-  Popover,
   ScrollArea,
   Select,
-  Stack,
   Text,
   Title,
   Tooltip,
-  UnstyledButton,
   useMantineTheme,
 } from '@mantine/core';
-import { useClipboard } from '@mantine/hooks';
+import { useClipboard, useMediaQuery } from '@mantine/hooks';
 import { useModals } from '@mantine/modals';
 import { showNotification } from '@mantine/notifications';
 import useFetch from 'hooks/useFetch';
@@ -42,6 +40,7 @@ import {
   DiscordIcon,
   ExternalLinkIcon,
   FileIcon,
+  FolderIcon,
   GitHubIcon,
   GoogleIcon,
   HomeIcon,
@@ -56,61 +55,6 @@ import {
 } from './icons';
 import { friendlyThemeName, themes } from './Theming';
 
-function MenuItemLink(props) {
-  return (
-    <Link href={props.href} passHref legacyBehavior>
-      <MenuItem {...props} />
-    </Link>
-  );
-}
-
-function MenuItem(props) {
-  return (
-    <UnstyledButton
-      sx={(theme) => ({
-        display: 'block',
-        width: '100%',
-        padding: 5,
-        borderRadius: theme.radius.sm,
-        color: props.color
-          ? theme.fn.themeColor(props.color, theme.colorScheme === 'dark' ? 5 : 7)
-          : theme.colorScheme === 'dark'
-          ? theme.colors.dark[0]
-          : theme.black,
-        '&:hover': !props.noClick
-          ? {
-              backgroundColor: props.color
-                ? theme.fn.rgba(
-                    theme.fn.themeColor(props.color, theme.colorScheme === 'dark' ? 9 : 0),
-                    theme.colorScheme === 'dark' ? 0.2 : 1
-                  )
-                : theme.colorScheme === 'dark'
-                ? theme.fn.rgba(theme.colors.dark[3], 0.35)
-                : theme.colors.gray[0],
-            }
-          : null,
-      })}
-      {...props}
-    >
-      <Group noWrap>
-        <Box
-          sx={(theme) => ({
-            marginRight: theme.spacing.xs / 4,
-            paddingLeft: theme.spacing.xs / 2,
-
-            '& *': {
-              display: 'block',
-            },
-          })}
-        >
-          {props.icon}
-        </Box>
-        <Text size='sm'>{props.children}</Text>
-      </Group>
-    </UnstyledButton>
-  );
-}
-
 export type NavbarItems = {
   icon: React.ReactNode;
   text: string;
@@ -130,6 +74,11 @@ const items: NavbarItems[] = [
     text: 'Files',
     link: '/dashboard/files',
   },
+  {
+    icon: <FolderIcon size={18} />,
+    text: 'Folders',
+    link: '/dashboard/folders',
+  },
   {
     icon: <ActivityIcon size={18} />,
     text: 'Stats',
@@ -198,7 +147,6 @@ export default function Layout({ children, props }) {
   const [systemTheme, setSystemTheme] = useState(user.systemTheme ?? 'system');
   const version = useVersion();
   const [opened, setOpened] = useState(false); // navigation open
-  const [open, setOpen] = useState(false); // manage acc dropdown
 
   const avatar = user?.avatar ?? null;
   const router = useRouter();
@@ -268,13 +216,29 @@ export default function Layout({ children, props }) {
       labels: { confirm: 'Copy', cancel: 'Cancel' },
       onConfirm: async () => {
         clipboard.copy(token);
-
-        showNotification({
-          title: 'Token Copied',
-          message: 'Your token has been copied to your clipboard.',
-          color: 'green',
-          icon: <CheckIcon />,
-        });
+        if (!navigator.clipboard)
+          showNotification({
+            title: 'Unable to copy to clipboard',
+            message: (
+              <Text size='sm'>
+                Zipline is unable to copy to clipboard due to security reasons. However, you can still copy
+                the token manually.
+                <br />
+                <Group position='left' spacing='sm'>
+                  <Text>Your token is:</Text>
+                  <Input size='sm' onFocus={(e) => e.target.select()} type='text' value={token} />
+                </Group>
+              </Text>
+            ),
+            color: 'red',
+          });
+        else
+          showNotification({
+            title: 'Token Copied',
+            message: 'Your token has been copied to your clipboard.',
+            color: 'green',
+            icon: <CheckIcon />,
+          });
 
         modals.closeAll();
       },
@@ -343,9 +307,11 @@ export default function Layout({ children, props }) {
             <Navbar.Section>
               <Tooltip
                 label={
-                  version.data.local !== version.data.upstream
-                    ? `You are running an outdated version of Zipline, refer to the docs on how to update to ${version.data.upstream}`
-                    : 'You are running the latest version of Zipline'
+                  version.data.update
+                    ? `There is a new ${version.data.updateToType} version: ${
+                        version.data.versions[version.data.updateToType]
+                      }`
+                    : `You are running the latest ${version.data.isUpstream ? 'upstream' : 'stable'} version`
                 }
               >
                 <Badge
@@ -353,9 +319,9 @@ export default function Layout({ children, props }) {
                   radius='md'
                   size='lg'
                   variant='dot'
-                  color={version.data.local !== version.data.upstream ? 'red' : 'primary'}
+                  color={version.data.update ? 'red' : 'primary'}
                 >
-                  {version.data.local}
+                  {version.data.versions.current}
                 </Badge>
               </Tooltip>
             </Navbar.Section>
@@ -375,11 +341,19 @@ export default function Layout({ children, props }) {
             </MediaQuery>
             <Title ml='sm'>{title}</Title>
             <Box sx={{ marginLeft: 'auto', marginRight: 0 }}>
-              <Popover position='bottom-end' opened={open} onClose={() => setOpen(false)}>
-                <Popover.Target>
+              <Menu
+                styles={{
+                  item: {
+                    '@media (max-width: 768px)': {
+                      padding: '1rem',
+                      width: '80vw',
+                    },
+                  },
+                }}
+              >
+                <Menu.Target>
                   <Button
                     leftIcon={avatar ? <Image src={avatar} height={32} radius='md' /> : <SettingsIcon />}
-                    onClick={() => setOpen((o) => !o)}
                     sx={(t) => ({
                       backgroundColor: 'inherit',
                       '&:hover': {
@@ -392,82 +366,73 @@ export default function Layout({ children, props }) {
                   >
                     {user.username}
                   </Button>
-                </Popover.Target>
-
-                <Popover.Dropdown p={4} mr='md' sx={{ minWidth: '200px' }}>
-                  <Stack spacing={2}>
-                    <Menu.Label>
-                      {user.username} ({user.id}){' '}
-                      {user.administrator && user.username !== 'administrator' ? '(Administrator)' : ''}
-                    </Menu.Label>
-                    <MenuItemLink icon={<SettingsIcon />} href='/dashboard/manage'>
-                      Manage Account
-                    </MenuItemLink>
-                    <MenuItem
-                      icon={<CopyIcon />}
-                      onClick={() => {
-                        setOpen(false);
-                        openCopyToken();
-                      }}
-                    >
-                      Copy Token
-                    </MenuItem>
-                    <MenuItem
-                      icon={<DeleteIcon />}
-                      onClick={() => {
-                        setOpen(false);
-                        openResetToken();
-                      }}
-                      color='red'
-                    >
-                      Reset Token
-                    </MenuItem>
-                    <MenuItemLink icon={<LogoutIcon />} href='/auth/logout' color='red'>
-                      Logout
-                    </MenuItemLink>
-                    <Menu.Divider />
-                    <>
-                      {oauth_providers
-                        .filter((x) =>
-                          user.oauth
-                            ?.map(({ provider }) => provider.toLowerCase())
-                            .includes(x.name.toLowerCase())
-                        )
-                        .map(({ name, Icon }, i) => (
-                          <>
-                            <MenuItem
-                              sx={{ '&:hover': { backgroundColor: 'inherit' } }}
-                              key={i}
-                              py={5}
-                              px={4}
-                              icon={<Icon size={18} colorScheme={theme.colorScheme} />}
-                            >
-                              Logged in with {capitalize(name)}
-                            </MenuItem>
-                          </>
-                        ))}
-                      {oauth_providers.filter((x) =>
+                </Menu.Target>
+                <Menu.Dropdown>
+                  <Menu.Label>
+                    {user.username} ({user.id}){' '}
+                    {user.administrator && user.username !== 'administrator' ? '(Administrator)' : ''}
+                  </Menu.Label>
+                  <Menu.Item component={Link} icon={<SettingsIcon />} href='/dashboard/manage'>
+                    Manage Account
+                  </Menu.Item>
+                  <Menu.Item
+                    icon={<CopyIcon />}
+                    onClick={() => {
+                      openCopyToken();
+                    }}
+                  >
+                    Copy Token
+                  </Menu.Item>
+                  <Menu.Item
+                    icon={<DeleteIcon />}
+                    onClick={() => {
+                      openResetToken();
+                    }}
+                    color='red'
+                  >
+                    Reset Token
+                  </Menu.Item>
+                  <Menu.Item component={Link} icon={<LogoutIcon />} href='/auth/logout' color='red'>
+                    Logout
+                  </Menu.Item>
+                  <Menu.Divider />
+                  <>
+                    {oauth_providers
+                      .filter((x) =>
                         user.oauth
                           ?.map(({ provider }) => provider.toLowerCase())
                           .includes(x.name.toLowerCase())
-                      ).length ? (
-                        <Menu.Divider />
-                      ) : null}
-                    </>
-                    <MenuItem icon={<PencilIcon />}>
-                      <Select
-                        size='xs'
-                        data={Object.keys(themes).map((t) => ({
-                          value: t,
-                          label: friendlyThemeName[t],
-                        }))}
-                        value={systemTheme}
-                        onChange={handleUpdateTheme}
-                      />
-                    </MenuItem>
-                  </Stack>
-                </Popover.Dropdown>
-              </Popover>
+                      )
+                      .map(({ name, Icon }, i) => (
+                        <>
+                          <Menu.Item
+                            closeMenuOnClick={false}
+                            key={i}
+                            icon={<Icon size={18} colorScheme={theme.colorScheme} />}
+                          >
+                            Logged in with {capitalize(name)}
+                          </Menu.Item>
+                        </>
+                      ))}
+                    {oauth_providers.filter((x) =>
+                      user.oauth?.map(({ provider }) => provider.toLowerCase()).includes(x.name.toLowerCase())
+                    ).length ? (
+                      <Menu.Divider />
+                    ) : null}
+                  </>
+                  <Menu.Item closeMenuOnClick={false} icon={<PencilIcon />}>
+                    <Select
+                      size={useMediaQuery('(max-width: 768px)') ? 'md' : 'xs'}
+                      data={Object.keys(themes).map((t) => ({
+                        value: t,
+                        label: friendlyThemeName[t],
+                      }))}
+                      value={systemTheme}
+                      onChange={handleUpdateTheme}
+                    />
+                  </Menu.Item>
+                </Menu.Dropdown>
+              </Menu>
             </Box>
           </div>
         </Header>

src/components/Theming.tsx

@@ -133,7 +133,7 @@ export default function ZiplineTheming({ Component, pageProps, ...props }) {
       }}
     >
       <ModalsProvider>
-        <NotificationsProvider>
+        <NotificationsProvider position='top-center' style={{ marginTop: -10 }}>
           {props.children ? props.children : <Component {...pageProps} />}
         </NotificationsProvider>
       </ModalsProvider>

src/components/Type.tsx

@@ -1,5 +1,16 @@
-import { Alert, Box, Button, Card, Center, Container, Group, Image, Text } from '@mantine/core';
-import { Prism } from '@mantine/prism';
+import exts from 'lib/exts';
+import {
+  Alert,
+  Box,
+  Button,
+  Card,
+  Center,
+  Group,
+  Image,
+  LoadingOverlay,
+  Text,
+  UnstyledButton,
+} from '@mantine/core';
 import { useEffect, useState } from 'react';
 import { AudioIcon, FileIcon, ImageIcon, PlayIcon } from './icons';
 import KaTeX from './render/KaTeX';
@@ -16,6 +27,15 @@ function PlaceholderContent({ text, Icon }) {
 }
 
 function Placeholder({ text, Icon, ...props }) {
+  if (props.onClick)
+    return (
+      <UnstyledButton sx={{ height: 200 }} {...props}>
+        <Center sx={{ height: 200 }}>
+          <PlaceholderContent text={text} Icon={Icon} />
+        </Center>
+      </UnstyledButton>
+    );
+
   return (
     <Box sx={{ height: 200 }} {...props}>
       <Center sx={{ height: 200 }}>
@@ -26,27 +46,33 @@ function Placeholder({ text, Icon, ...props }) {
 }
 
 export default function Type({ file, popup = false, disableMediaPreview, ...props }) {
-  const type = (file.type || file.mimetype).split('/')[0];
-  const name = file.name || file.file;
+  const type =
+    (file.type ?? file.mimetype) === ''
+      ? file.name.split('.').pop()
+      : (file.type ?? file.mimetype).split('/')[0];
 
   const media = /^(video|audio|image|text)/.test(type);
 
   const [text, setText] = useState('');
-  const shouldRenderMarkdown = name.endsWith('.md');
-  const shouldRenderTex = name.endsWith('.tex');
+  const shouldRenderMarkdown = file.name.endsWith('.md');
+  const shouldRenderTex = file.name.endsWith('.tex');
+  const shouldRenderCode: boolean = Object.keys(exts).includes(file.name.split('.').pop());
 
-  if (type === 'text' && popup) {
+  const [loading, setLoading] = useState(type === 'text' && popup);
+
+  if ((type === 'text' || shouldRenderMarkdown || shouldRenderTex || shouldRenderCode) && popup) {
     useEffect(() => {
       (async () => {
-        const res = await fetch('/r/' + name);
+        const res = await fetch('/r/' + file.name);
         const text = await res.text();
 
         setText(text);
+        setLoading(false);
       })();
     }, []);
   }
 
-  const renderRenderAlert = () => {
+  const renderAlert = () => {
     return (
       <Alert color='blue' variant='outline' sx={{ width: '100%' }}>
         You are{props.overrideRender ? ' not ' : ' '}viewing a rendered version of the file
@@ -62,36 +88,56 @@ export default function Type({ file, popup = false, disableMediaPreview, ...prop
     );
   };
 
-  if ((shouldRenderMarkdown || shouldRenderTex) && !props.overrideRender && popup)
+  if ((shouldRenderMarkdown || shouldRenderTex || shouldRenderCode) && !props.overrideRender && popup)
     return (
       <>
-        {renderRenderAlert()}
+        {renderAlert()}
         <Card p='md' my='sm'>
           {shouldRenderMarkdown && <Markdown code={text} />}
           {shouldRenderTex && <KaTeX code={text} />}
+          {shouldRenderCode && !(shouldRenderTex || shouldRenderMarkdown) && (
+            <PrismCode code={text} ext={type} />
+          )}
         </Card>
       </>
     );
 
   if (media && disableMediaPreview) {
-    return <Placeholder Icon={FileIcon} text={`Click to view file (${name})`} {...props} />;
+    return <Placeholder Icon={FileIcon} text={`Click to view file (${file.name})`} {...props} />;
+  }
+
+  if (file.password) {
+    return (
+      <Placeholder
+        Icon={FileIcon}
+        text={`This file is password protected. Click to view file (${file.name})`}
+        onClick={() => window.open(file.url)}
+        {...props}
+      />
+    );
   }
 
   return popup ? (
     media ? (
       {
-        video: <video width='100%' autoPlay controls {...props} />,
+        video: <video width='100%' autoPlay muted controls {...props} />,
         image: (
           <Image
             placeholder={<PlaceholderContent Icon={FileIcon} text={'Image failed to load...'} />}
             {...props}
           />
         ),
-        audio: <audio autoPlay controls {...props} style={{ width: '100%' }} />,
+        audio: <audio autoPlay muted controls {...props} style={{ width: '100%' }} />,
         text: (
           <>
-            {(shouldRenderMarkdown || shouldRenderTex) && renderRenderAlert()}
-            <PrismCode code={text} ext={name.split('.').pop()} {...props} />
+            {loading ? (
+              <LoadingOverlay visible={loading} />
+            ) : (
+              <>
+                {(shouldRenderMarkdown || shouldRenderTex) && renderAlert()}
+                <PrismCode code={text} ext={file.name.split('.').pop()} {...props} />
+              </>
+            )}
           </>
         ),
       }[type]
@@ -100,17 +146,17 @@ export default function Type({ file, popup = false, disableMediaPreview, ...prop
     )
   ) : media ? (
     {
-      video: <Placeholder Icon={PlayIcon} text={`Click to view video (${name})`} {...props} />,
+      video: <Placeholder Icon={PlayIcon} text={`Click to view video (${file.name})`} {...props} />,
       image: (
         <Image
           placeholder={<PlaceholderContent Icon={ImageIcon} text={'Image failed to load...'} />}
           {...props}
         />
       ),
-      audio: <Placeholder Icon={AudioIcon} text={`Click to view audio (${name})`} {...props} />,
-      text: <Placeholder Icon={FileIcon} text={`Click to view text file (${name})`} {...props} />,
+      audio: <Placeholder Icon={AudioIcon} text={`Click to view audio (${file.name})`} {...props} />,
+      text: <Placeholder Icon={FileIcon} text={`Click to view text file (${file.name})`} {...props} />,
     }[type]
   ) : (
-    <Placeholder Icon={FileIcon} text={`Click to view file (${name})`} {...props} />
+    <Placeholder Icon={FileIcon} text={`Click to view file (${file.name})`} {...props} />
   );
 }

src/components/dropzone/Dropzone.tsx

@@ -1,4 +1,4 @@
-import { Group, Text, useMantineTheme } from '@mantine/core';
+import { Box, Group, SimpleGrid, Text, useMantineTheme } from '@mantine/core';
 import { Dropzone as MantineDropzone } from '@mantine/dropzone';
 import { ImageIcon } from 'components/icons';
 
@@ -6,16 +6,23 @@ export default function Dropzone({ loading, onDrop, children }) {
   const theme = useMantineTheme();
 
   return (
-    <MantineDropzone onDrop={onDrop}>
-      <Group position='center' spacing='xl' style={{ minHeight: 440 }}>
-        <ImageIcon size={80} />
+    <SimpleGrid
+      cols={2}
+      breakpoints={[
+        { maxWidth: 'md', cols: 1 },
+        { maxWidth: 'xs', cols: 1 },
+      ]}
+    >
+      <MantineDropzone onDrop={onDrop} styles={{ inner: { pointerEvents: 'none' } }}>
+        <Group position='center' spacing='xl' style={{ minHeight: 440 }}>
+          <ImageIcon size={80} />
 
-        <Text size='xl' inline>
-          Drag files here or click to select files
-        </Text>
-      </Group>
-
-      <div style={{ pointerEvents: 'all' }}>{children}</div>
-    </MantineDropzone>
+          <Text size='xl' inline>
+            Drag files here or click to select files
+          </Text>
+        </Group>
+      </MantineDropzone>
+      <Box>{children}</Box>
+    </SimpleGrid>
   );
 }

src/components/dropzone/DropzoneFile.tsx

@@ -1,5 +1,6 @@
-import { Badge, Group, HoverCard, Table, useMantineTheme } from '@mantine/core';
+import { ActionIcon, Badge, Box, Card, Group, HoverCard, Table, useMantineTheme } from '@mantine/core';
 import Type from 'components/Type';
+import { X } from 'react-feather';
 
 export function FilePreview({ file }: { file: File }) {
   return (
@@ -16,15 +17,36 @@ export function FilePreview({ file }: { file: File }) {
   );
 }
 
-export default function FileDropzone({ file }: { file: File }) {
+export default function FileDropzone({ file, onRemove }: { file: File; onRemove: () => void }) {
   const theme = useMantineTheme();
 
   return (
     <HoverCard shadow='md'>
       <HoverCard.Target>
-        <Badge size='lg'>{file.name}</Badge>
+        {/* <Badge size='lg'>{file.name}</Badge> */}
+        <Card shadow='sm' radius='sm' p='sm'>
+          <Group position='center' spacing='xl'>
+            {file.name}
+          </Group>
+        </Card>
       </HoverCard.Target>
       <HoverCard.Dropdown>
+        {/* x button that will remove file */}
+        <Box
+          sx={{
+            position: 'absolute',
+            top: 0,
+            right: 0,
+            zIndex: 1,
+            color: theme.colorScheme === 'dark' ? 'white' : 'white',
+          }}
+          m='xs'
+        >
+          <ActionIcon onClick={onRemove} size='sm' color='red' variant='filled'>
+            <X />
+          </ActionIcon>
+        </Box>
+
         <Group grow>
           <FilePreview file={file} />
 

src/components/icons/DiscordIcon.tsx

@@ -1,7 +1,5 @@
 // https://discord.com/branding
 
-import Image from 'next/image';
-
 export default function DiscordIcon({ ...props }) {
   return (
     <svg width='24' height='24' viewBox='0 0 71 55' xmlns='http://www.w3.org/2000/svg'>

src/components/icons/FolderIcon.tsx

@@ -0,0 +1,5 @@
+import { Folder } from 'react-feather';
+
+export default function FolderIcon({ ...props }) {
+  return <Folder size={15} {...props} />;
+}

src/components/icons/FolderMinusIcon.tsx

@@ -0,0 +1,5 @@
+import { FolderMinus } from 'react-feather';
+
+export default function FolderMinusIcon({ ...props }) {
+  return <FolderMinus size={15} {...props} />;
+}

src/components/icons/FolderPlusIcon.tsx

@@ -0,0 +1,5 @@
+import { FolderPlus } from 'react-feather';
+
+export default function FolderPlusIcon({ ...props }) {
+  return <FolderPlus size={15} {...props} />;
+}

src/components/icons/GlobeIcon.tsx

@@ -0,0 +1,5 @@
+import { Globe } from 'react-feather';
+
+export default function GlobeIcon({ ...props }) {
+  return <Globe size={15} {...props} />;
+}

src/components/icons/GoogleIcon.tsx

@@ -2,7 +2,7 @@
 
 import Image from 'next/image';
 
-export default function GoogleIcon({ ...props }) {
+export default function GoogleIcon({ colorScheme, ...props }) {
   return (
     <Image
       alt='google'

src/components/icons/HardDriveIcon.tsx

@@ -0,0 +1,5 @@
+import { HardDrive } from 'react-feather';
+
+export default function HardDriveIcon({ ...props }) {
+  return <HardDrive size={15} {...props} />;
+}

src/components/icons/InfoIcon.tsx

@@ -0,0 +1,5 @@
+import { Info } from 'react-feather';
+
+export default function InfoIcon({ ...props }) {
+  return <Info size={15} {...props} />;
+}

src/components/icons/LockIcon.tsx

@@ -0,0 +1,5 @@
+import { Lock } from 'react-feather';
+
+export default function LockIcon({ ...props }) {
+  return <Lock size={15} {...props} />;
+}

src/components/icons/UnlockIcon.tsx

@@ -0,0 +1,5 @@
+import { Unlock } from 'react-feather';
+
+export default function UnlockIcon({ ...props }) {
+  return <Unlock size={15} {...props} />;
+}

src/components/icons/index.tsx

@@ -34,6 +34,14 @@ import EyeIcon from './EyeIcon';
 import RefreshIcon from './RefreshIcon';
 import KeyIcon from './KeyIcon';
 import DatabaseIcon from './DatabaseIcon';
+import InfoIcon from './InfoIcon';
+import FolderIcon from './FolderIcon';
+import FolderMinusIcon from './FolderMinusIcon';
+import FolderPlusIcon from './FolderPlusIcon';
+import GlobeIcon from './GlobeIcon';
+import LockIcon from './LockIcon';
+import UnlockIcon from './UnlockIcon';
+import HardDriveIcon from './HardDriveIcon';
 
 export {
   ActivityIcon,
@@ -72,4 +80,12 @@ export {
   RefreshIcon,
   KeyIcon,
   DatabaseIcon,
+  InfoIcon,
+  FolderIcon,
+  FolderMinusIcon,
+  FolderPlusIcon,
+  GlobeIcon,
+  LockIcon,
+  UnlockIcon,
+  HardDriveIcon,
 };

src/components/pages/Dashboard/RecentFiles.tsx

@@ -24,6 +24,7 @@ export default function RecentFiles({ disableMediaPreview, exifEnabled }) {
                 image={image}
                 disableMediaPreview={disableMediaPreview}
                 exifEnabled={exifEnabled}
+                refreshImages={recent.refetch}
               />
             ))
           ) : (

src/components/pages/Dashboard/StatCards.tsx

@@ -20,7 +20,7 @@ export function StatCards() {
     >
       <StatCard
         stat={{
-          title: 'UPLOADED FILES',
+          title: 'FILES',
           value: stats.isSuccess ? latest.data.count.toLocaleString() : '...',
           desc: 'files have been uploaded',
           icon: <FileIcon />,
@@ -33,7 +33,7 @@ export function StatCards() {
         stat={{
           title: 'STORAGE',
           value: stats.isSuccess ? latest.data.size : '...',
-          desc: 'of storage used',
+          desc: 'used',
           icon: <DatabaseIcon />,
           diff:
             stats.isSuccess && before?.data
@@ -46,7 +46,7 @@ export function StatCards() {
         stat={{
           title: 'VIEWS',
           value: stats.isSuccess ? latest.data.views_count.toLocaleString() : '...',
-          desc: 'total page views',
+          desc: 'total file views',
           icon: <EyeIcon />,
           diff:
             stats.isSuccess && before?.data
@@ -59,7 +59,7 @@ export function StatCards() {
         stat={{
           title: 'USERS',
           value: stats.isSuccess ? latest.data.count_users.toLocaleString() : '...',
-          desc: 'total registered users',
+          desc: 'users',
           icon: <UserIcon />,
         }}
       />

src/components/pages/Dashboard/index.tsx

@@ -1,42 +1,88 @@
-import { DataGrid, dateFilterFn, stringFilterFn } from '@dicedtomato/mantine-data-grid';
-import { Title, useMantineTheme, Box } from '@mantine/core';
+import { ActionIcon, Box, Group, Title, Tooltip } from '@mantine/core';
 import { useClipboard } from '@mantine/hooks';
 import { showNotification } from '@mantine/notifications';
-import { CopyIcon, CrossIcon, DeleteIcon, EnterIcon } from 'components/icons';
+import FileModal from 'components/File/FileModal';
+import { CopyIcon, CrossIcon, DeleteIcon, EnterIcon, FileIcon } from 'components/icons';
 import Link from 'components/Link';
 import MutedText from 'components/MutedText';
 import useFetch from 'lib/hooks/useFetch';
-import { useFiles, useRecent } from 'lib/queries/files';
+import { usePaginatedFiles, useRecent } from 'lib/queries/files';
 import { useStats } from 'lib/queries/stats';
 import { userSelector } from 'lib/recoil/user';
+import { DataTable, DataTableSortStatus } from 'mantine-datatable';
+import { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import RecentFiles from './RecentFiles';
 import { StatCards } from './StatCards';
 
 export default function Dashboard({ disableMediaPreview, exifEnabled }) {
   const user = useRecoilValue(userSelector);
-  const theme = useMantineTheme();
 
-  const images = useFiles();
   const recent = useRecent('media');
   const stats = useStats();
   const clipboard = useClipboard();
 
-  const updateImages = () => {
-    images.refetch();
+  // pagination
+  const [, setNumPages] = useState(0);
+  const [page, setPage] = useState(1);
+  const [numFiles, setNumFiles] = useState(0);
+
+  useEffect(() => {
+    (async () => {
+      const { count } = await useFetch('/api/user/paged?count=true');
+      setNumPages(count);
+
+      const { count: filesCount } = await useFetch('/api/user/files?count=true');
+      setNumFiles(filesCount);
+    })();
+  }, [page]);
+
+  const files = usePaginatedFiles(page);
+
+  // sorting
+  const [sortStatus, setSortStatus] = useState<DataTableSortStatus>({
+    columnAccessor: 'date',
+    direction: 'asc',
+  });
+  const [records, setRecords] = useState(files.data);
+
+  useEffect(() => {
+    setRecords(files.data);
+  }, [files.data]);
+
+  useEffect(() => {
+    if (!records || records.length === 0) return;
+
+    const sortedRecords = [...records].sort((a, b) => {
+      if (sortStatus.direction === 'asc') {
+        return a[sortStatus.columnAccessor] > b[sortStatus.columnAccessor] ? 1 : -1;
+      }
+
+      return a[sortStatus.columnAccessor] < b[sortStatus.columnAccessor] ? 1 : -1;
+    });
+
+    setRecords(sortedRecords);
+  }, [sortStatus]);
+
+  // file modal on click
+  const [open, setOpen] = useState(false);
+  const [selectedFile, setSelectedFile] = useState(null);
+
+  const updateFiles = () => {
+    files.refetch();
     recent.refetch();
     stats.refetch();
   };
 
-  const deleteImage = async ({ original }) => {
+  const deleteFile = async (file) => {
     const res = await useFetch('/api/user/files', 'DELETE', {
-      id: original.id,
+      id: file.id,
     });
     if (!res.error) {
-      updateImages();
+      updateFiles();
       showNotification({
         title: 'File Deleted',
-        message: `${original.name}`,
+        message: `${file.name}`,
         color: 'green',
         icon: <DeleteIcon />,
       });
@@ -50,28 +96,47 @@ export default function Dashboard({ disableMediaPreview, exifEnabled }) {
     }
   };
 
-  const copyImage = async ({ original }) => {
-    clipboard.copy(`${window.location.protocol}//${window.location.host}${original.url}`);
-    showNotification({
-      title: 'Copied to clipboard',
-      message: (
-        <a
-          href={`${window.location.protocol}//${window.location.host}${original.url}`}
-        >{`${window.location.protocol}//${window.location.host}${original.url}`}</a>
-      ),
-      icon: <CopyIcon />,
-    });
+  const copyFile = async (file) => {
+    clipboard.copy(`${window.location.protocol}//${window.location.host}${file.url}`);
+    if (!navigator.clipboard)
+      showNotification({
+        title: 'Unable to copy to clipboard',
+        message: 'Zipline is unable to copy to clipboard due to security reasons.',
+        color: 'red',
+      });
+    else
+      showNotification({
+        title: 'Copied to clipboard',
+        message: (
+          <a
+            href={`${window.location.protocol}//${window.location.host}${file.url}`}
+          >{`${window.location.protocol}//${window.location.host}${file.url}`}</a>
+        ),
+        icon: <CopyIcon />,
+      });
   };
 
-  const viewImage = async ({ original }) => {
-    window.open(`${window.location.protocol}//${window.location.host}${original.url}`);
+  const viewFile = async (file) => {
+    window.open(`${window.location.protocol}//${window.location.host}${file.url}`);
   };
 
   return (
     <div>
+      {selectedFile && (
+        <FileModal
+          open={open}
+          setOpen={setOpen}
+          file={selectedFile}
+          loading={files.isLoading}
+          refresh={() => files.refetch()}
+          reducedActions={false}
+          exifEnabled={exifEnabled}
+        />
+      )}
+
       <Title>Welcome back, {user?.username}</Title>
       <MutedText size='md'>
-        You have <b>{images.isSuccess ? images.data.length : '...'}</b> files
+        You have <b>{numFiles === 0 ? '...' : numFiles}</b> files
       </MutedText>
 
       <StatCards />
@@ -83,73 +148,92 @@ export default function Dashboard({ disableMediaPreview, exifEnabled }) {
         <MutedText size='md'>
           View your gallery <Link href='/dashboard/files'>here</Link>.
         </MutedText>
-        <DataGrid
-          data={images.data ?? []}
-          loading={images.isLoading}
-          withPagination={true}
-          withColumnResizing={false}
-          withColumnFilters={true}
-          noEllipsis={true}
-          withSorting={true}
-          highlightOnHover={true}
-          CopyIcon={CopyIcon}
-          DeleteIcon={DeleteIcon}
-          EnterIcon={EnterIcon}
-          deleteImage={deleteImage}
-          copyImage={copyImage}
-          viewImage={viewImage}
-          styles={{
-            dataCell: {
-              width: '100%',
-            },
-            td: {
-              ':nth-child(1)': {
-                minWidth: 170,
-              },
-              ':nth-child(2)': {
-                minWidth: 100,
-              },
-            },
-            th: {
-              ':nth-child(1)': {
-                minWidth: 170,
-                padding: theme.spacing.lg,
-                borderTopLeftRadius: theme.radius.sm,
-              },
-              ':nth-child(2)': {
-                minWidth: 100,
-                padding: theme.spacing.lg,
-              },
-              ':nth-child(3)': {
-                padding: theme.spacing.lg,
-              },
-              ':nth-child(4)': {
-                padding: theme.spacing.lg,
-                borderTopRightRadius: theme.radius.sm,
-              },
-            },
-            thead: {
-              backgroundColor: theme.colors.dark[6],
-            },
-          }}
-          empty={<></>}
+
+        <DataTable
+          withBorder
+          borderRadius='md'
+          highlightOnHover
+          verticalSpacing='sm'
           columns={[
+            { accessor: 'name', sortable: true },
+            { accessor: 'mimetype', sortable: true },
             {
-              accessorKey: 'file',
-              header: 'Name',
-              filterFn: stringFilterFn,
+              accessor: 'createdAt',
+              sortable: true,
+              render: (file) => new Date(file.createdAt).toLocaleString(),
             },
             {
-              accessorKey: 'mimetype',
-              header: 'Type',
-              filterFn: stringFilterFn,
-            },
-            {
-              accessorKey: 'created_at',
-              header: 'Date',
-              filterFn: dateFilterFn,
+              accessor: 'actions',
+              textAlignment: 'right',
+              render: (file) => (
+                <Group spacing={4} position='right' noWrap>
+                  <Tooltip label='More details'>
+                    <ActionIcon
+                      onClick={() => {
+                        setSelectedFile(file);
+                        setOpen(true);
+                      }}
+                      color='blue'
+                    >
+                      <FileIcon />
+                    </ActionIcon>
+                  </Tooltip>
+
+                  <Tooltip label='Open file in new tab'>
+                    <ActionIcon onClick={() => viewFile(file)} color='blue'>
+                      <EnterIcon />
+                    </ActionIcon>
+                  </Tooltip>
+
+                  <ActionIcon onClick={() => copyFile(file)} color='green'>
+                    <CopyIcon />
+                  </ActionIcon>
+                  <ActionIcon onClick={() => deleteFile(file)} color='red'>
+                    <DeleteIcon />
+                  </ActionIcon>
+                </Group>
+              ),
             },
           ]}
+          records={records ?? []}
+          fetching={files.isLoading}
+          loaderBackgroundBlur={5}
+          loaderVariant='dots'
+          minHeight={620}
+          page={page}
+          onPageChange={setPage}
+          recordsPerPage={16}
+          totalRecords={numFiles}
+          sortStatus={sortStatus}
+          onSortStatusChange={setSortStatus}
+          rowContextMenu={{
+            shadow: 'xl',
+            borderRadius: 'md',
+            items: (file) => [
+              {
+                key: 'view',
+                icon: <EnterIcon />,
+                title: `View ${file.name}`,
+                onClick: () => viewFile(file),
+              },
+              {
+                key: 'copy',
+                icon: <CopyIcon />,
+                title: `Copy ${file.name}`,
+                onClick: () => copyFile(file),
+              },
+              {
+                key: 'delete',
+                icon: <DeleteIcon />,
+                title: `Delete ${file.name}`,
+                onClick: () => deleteFile(file),
+              },
+            ],
+          }}
+          onCellClick={({ record: file }) => {
+            setSelectedFile(file);
+            setOpen(true);
+          }}
         />
       </Box>
     </div>

src/components/pages/Files/FilePagation.tsx

@@ -1,4 +1,5 @@
 import { Box, Button, Center, Checkbox, Group, Pagination, SimpleGrid, Skeleton, Title } from '@mantine/core';
+import { useMediaQuery } from '@mantine/hooks';
 import File from 'components/File';
 import { FileIcon } from 'components/icons';
 import MutedText from 'components/MutedText';
@@ -14,6 +15,8 @@ export default function FilePagation({ disableMediaPreview, exifEnabled, queryPa
   const [numPages, setNumPages] = useState(Number(queryPage)); // just set it to the queryPage, since the req may have not loaded yet
   const [page, setPage] = useState(Number(queryPage));
 
+  const isMobile = useMediaQuery('(max-width: 768px)');
+
   const router = useRouter();
 
   useEffect(() => {
@@ -67,7 +70,12 @@ export default function FilePagation({ disableMediaPreview, exifEnabled, queryPa
           ? pages.data.length
             ? pages.data.map((image) => (
                 <div key={image.id}>
-                  <File image={image} disableMediaPreview={disableMediaPreview} exifEnabled={exifEnabled} />
+                  <File
+                    image={image}
+                    disableMediaPreview={disableMediaPreview}
+                    exifEnabled={exifEnabled}
+                    refreshImages={pages.refetch}
+                  />
                 </div>
               ))
             : null
@@ -87,13 +95,15 @@ export default function FilePagation({ disableMediaPreview, exifEnabled, queryPa
             paddingBottom: 3,
           }}
         >
-          <div></div>
-          <Pagination total={numPages} page={page} onChange={setPage} />
-          <Checkbox
-            label='Show non-media files'
-            checked={checked}
-            onChange={(event) => setChecked(event.currentTarget.checked)}
-          />
+          {!isMobile && <div></div>}
+          <Pagination total={numPages} page={page} onChange={setPage} withEdges />
+          {!isMobile && (
+            <Checkbox
+              label='Show non-media files'
+              checked={checked}
+              onChange={(event) => setChecked(event.currentTarget.checked)}
+            />
+          )}
         </Box>
       ) : null}
     </>

src/components/pages/Files/index.tsx

@@ -19,12 +19,6 @@ export default function Files({ disableMediaPreview, exifEnabled, queryPage }) {
     })();
   });
 
-  const updatePages = async (favorite) => {
-    if (favorite) {
-      favoritePages.refetch();
-    }
-  };
-
   return (
     <>
       <Group mb='md'>
@@ -55,6 +49,7 @@ export default function Files({ disableMediaPreview, exifEnabled, queryPage }) {
                           image={image}
                           disableMediaPreview={disableMediaPreview}
                           exifEnabled={exifEnabled}
+                          refreshImages={favoritePages.refetch}
                         />
                       </div>
                     ))

src/components/pages/Folders/CreateFolderModal.tsx

@@ -0,0 +1,66 @@
+import { Button, Group, Modal, TextInput, Title } from '@mantine/core';
+import { useForm } from '@mantine/form';
+import { showNotification } from '@mantine/notifications';
+import { CrossIcon, FolderIcon } from 'components/icons';
+import MutedText from 'components/MutedText';
+import useFetch from 'hooks/useFetch';
+import { useRouter } from 'next/router';
+
+export default function CreateFolderModal({ open, setOpen, updateFolders, createWithFile }) {
+  const router = useRouter();
+
+  const form = useForm({
+    initialValues: {
+      name: '',
+    },
+  });
+
+  const onSubmit = async (values) => {
+    const res = await useFetch('/api/user/folders', 'POST', {
+      name: values.name,
+      add: createWithFile ? [createWithFile] : undefined,
+    });
+
+    if (res.error) {
+      showNotification({
+        title: 'Failed to create folder',
+        message: res.error,
+        icon: <CrossIcon />,
+        color: 'red',
+      });
+    } else {
+      showNotification({
+        title: 'Created folder ' + res.name,
+        message: createWithFile ? 'Added file to folder' : undefined,
+        icon: <FolderIcon />,
+        color: 'green',
+      });
+
+      if (createWithFile) {
+        router.push('/dashboard/folders');
+      }
+    }
+
+    setOpen(false);
+    updateFolders();
+  };
+
+  return (
+    <Modal opened={open} onClose={() => setOpen(false)} title={<Title>Create Folder</Title>}>
+      <form onSubmit={form.onSubmit((v) => onSubmit(v))}>
+        <TextInput label='Folder Name' placeholder='Folder Name' {...form.getInputProps('name')} />
+
+        {createWithFile && (
+          <MutedText size='sm'>
+            Creating this folder will add file with an ID of <b>{createWithFile}</b> to it automatically.
+          </MutedText>
+        )}
+
+        <Group position='right' mt='md'>
+          <Button onClick={() => setOpen(false)}>Cancel</Button>
+          <Button type='submit'>Create</Button>
+        </Group>
+      </form>
+    </Modal>
+  );
+}

src/components/pages/Folders/ViewFolderFilesModal.tsx

@@ -0,0 +1,46 @@
+import { Center, Modal, SimpleGrid, Stack, Text, Title } from '@mantine/core';
+import File from 'components/File';
+import MutedText from 'components/MutedText';
+import { useFolder } from 'lib/queries/folders';
+
+export default function ViewFolderFilesModal({ open, setOpen, folderId, disableMediaPreview, exifEnabled }) {
+  if (!folderId) return null;
+
+  const folder = useFolder(folderId, true);
+
+  return (
+    <Modal
+      opened={open}
+      onClose={() => setOpen(false)}
+      title={<Title>View {folder.data?.name}&apos;s files</Title>}
+      size='xl'
+    >
+      {folder.isSuccess ? (
+        <>
+          {folder.data.files.length ? (
+            <SimpleGrid cols={3} spacing='lg' breakpoints={[{ maxWidth: 'sm', cols: 1, spacing: 'sm' }]}>
+              {folder.data.files.map((file) => (
+                <File
+                  disableMediaPreview={disableMediaPreview}
+                  key={file.id}
+                  image={file}
+                  exifEnabled={exifEnabled}
+                  refreshImages={folder.refetch}
+                />
+              ))}
+            </SimpleGrid>
+          ) : (
+            <Center>
+              <Stack>
+                <Text align='center'>No files in this folder</Text>
+                <MutedText size='sm'>
+                  Add files to {folder.data.name} by clicking a file in the Files tab and selecting a folder
+                </MutedText>
+              </Stack>
+            </Center>
+          )}
+        </>
+      ) : null}
+    </Modal>
+  );
+}

src/components/pages/Folders/index.tsx

@@ -0,0 +1,205 @@
+import { ActionIcon, Avatar, Card, Group, SimpleGrid, Skeleton, Stack, Title, Tooltip } from '@mantine/core';
+import { useClipboard } from '@mantine/hooks';
+import { useModals } from '@mantine/modals';
+import { showNotification } from '@mantine/notifications';
+import { DeleteIcon, FileIcon, PlusIcon, LockIcon, UnlockIcon, LinkIcon, CopyIcon } from 'components/icons';
+import Link from 'components/Link';
+import MutedText from 'components/MutedText';
+import useFetch from 'hooks/useFetch';
+import { useFolders } from 'lib/queries/folders';
+import { relativeTime } from 'lib/utils/client';
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+import CreateFolderModal from './CreateFolderModal';
+import ViewFolderFilesModal from './ViewFolderFilesModal';
+
+export default function Folders({ disableMediaPreview, exifEnabled }) {
+  const folders = useFolders();
+  const [createOpen, setCreateOpen] = useState(false);
+  const [createWithFile, setCreateWithFile] = useState(null);
+  const [viewOpen, setViewOpen] = useState(false);
+  const [activeFolderId, setActiveFolderId] = useState(null);
+
+  const modals = useModals();
+  const clipboard = useClipboard();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (router.query.create) {
+      setCreateOpen(true);
+      setCreateWithFile(router.query.create);
+    }
+  }, []);
+
+  const deleteFolder = (folder) => {
+    modals.openConfirmModal({
+      title: <Title>Delete folder {folder.name}?</Title>,
+      children:
+        'Are you sure you want to delete this folder? All files within the folder will still exist, but will no longer be in a folder.',
+      labels: {
+        confirm: 'Delete',
+        cancel: 'Cancel',
+      },
+      onConfirm: async () => {
+        const res = await useFetch(`/api/user/folders/${folder.id}`, 'DELETE', {
+          deleteFolder: true,
+        });
+
+        if (!res.error) {
+          showNotification({
+            title: 'Deleted folder',
+            message: `Deleted folder ${folder.name}`,
+            color: 'green',
+            icon: <DeleteIcon />,
+          });
+          folders.refetch();
+        } else {
+          showNotification({
+            title: 'Failed to delete folder',
+            message: res.error,
+            color: 'red',
+            icon: <DeleteIcon />,
+          });
+          folders.refetch();
+        }
+      },
+    });
+  };
+
+  const makePublic = async (folder) => {
+    const res = await useFetch(`/api/user/folders/${folder.id}`, 'PATCH', {
+      public: folder.public ? false : true,
+    });
+
+    if (!res.error) {
+      showNotification({
+        title: 'Made folder public',
+        message: `Made folder ${folder.name} ${folder.public ? 'private' : 'public'}`,
+        color: 'green',
+        icon: <UnlockIcon />,
+      });
+      folders.refetch();
+    } else {
+      showNotification({
+        title: 'Failed to make folder public/private',
+        message: res.error,
+        color: 'red',
+        icon: <UnlockIcon />,
+      });
+      folders.refetch();
+    }
+  };
+
+  return (
+    <>
+      <CreateFolderModal
+        open={createOpen}
+        setOpen={setCreateOpen}
+        createWithFile={createWithFile}
+        updateFolders={folders.refetch}
+      />
+      <ViewFolderFilesModal
+        open={viewOpen}
+        setOpen={setViewOpen}
+        folderId={activeFolderId}
+        disableMediaPreview={disableMediaPreview}
+        exifEnabled={exifEnabled}
+      />
+
+      <Group mb='md'>
+        <Title>Folders</Title>
+        <ActionIcon onClick={() => setCreateOpen(!createOpen)} component='a' variant='filled' color='primary'>
+          <PlusIcon />
+        </ActionIcon>
+      </Group>
+
+      <SimpleGrid cols={3} spacing='lg' breakpoints={[{ maxWidth: 'sm', cols: 1, spacing: 'sm' }]}>
+        {folders.isSuccess
+          ? folders.data.length
+            ? folders.data.map((folder) => (
+                <Card key={folder.id}>
+                  <Group position='apart'>
+                    <Group position='left'>
+                      <Avatar size='lg' color='primary'>
+                        {folder.id}
+                      </Avatar>
+                      <Stack spacing={0}>
+                        <Title>{folder.name}</Title>
+                        <MutedText size='sm'>ID: {folder.id}</MutedText>
+                        <MutedText size='sm'>Public: {folder.public ? 'Yes' : 'No'}</MutedText>
+                        <Tooltip label={new Date(folder.createdAt).toLocaleString()}>
+                          <div>
+                            <MutedText size='sm'>
+                              Created {relativeTime(new Date(folder.createdAt))}
+                            </MutedText>
+                          </div>
+                        </Tooltip>
+                        <Tooltip label={new Date(folder.updatedAt).toLocaleString()}>
+                          <div>
+                            <MutedText size='sm'>
+                              Last updated {relativeTime(new Date(folder.updatedAt))}
+                            </MutedText>
+                          </div>
+                        </Tooltip>
+                      </Stack>
+                    </Group>
+                    <Group>
+                      <Tooltip label={folder.public ? 'Make folder private' : 'Make folder public'}>
+                        <ActionIcon
+                          aria-label={folder.public ? 'make private' : 'make public'}
+                          onClick={() => makePublic(folder)}
+                        >
+                          {folder.public ? <LockIcon /> : <UnlockIcon />}
+                        </ActionIcon>
+                      </Tooltip>
+                      <ActionIcon
+                        aria-label='view files'
+                        onClick={() => {
+                          setViewOpen(!viewOpen);
+                          setActiveFolderId(folder.id);
+                        }}
+                      >
+                        <FileIcon />
+                      </ActionIcon>
+                      <ActionIcon
+                        aria-label='copy link'
+                        onClick={() => {
+                          clipboard.copy(`${window.location.origin}/folder/${folder.id}`);
+                          if (!navigator.clipboard)
+                            showNotification({
+                              title: 'Unable to copy to clipboard',
+                              message: 'Zipline is unable to copy to clipboard due to security reasons.',
+                              color: 'red',
+                            });
+                          else
+                            showNotification({
+                              title: 'Copied folder link',
+                              message: (
+                                <>
+                                  Copied <Link href={`/folder/${folder.id}`}>folder link</Link> to clipboard
+                                </>
+                              ),
+                              color: 'green',
+                              icon: <CopyIcon />,
+                            });
+                        }}
+                      >
+                        <LinkIcon />
+                      </ActionIcon>
+                      <ActionIcon aria-label='delete' onClick={() => deleteFolder(folder)}>
+                        <DeleteIcon />
+                      </ActionIcon>
+                    </Group>
+                  </Group>
+                </Card>
+              ))
+            : null
+          : [1, 2, 3, 4].map((x) => (
+              <div key={x}>
+                <Skeleton width='100%' height={220} sx={{ borderRadius: 1 }} />
+              </div>
+            ))}
+      </SimpleGrid>
+    </>
+  );
+}

src/components/pages/Invites.tsx

@@ -38,7 +38,7 @@ function CreateInviteModal({ open, setOpen, updateInvites }) {
     if (!expires.includes(values.expires)) return form.setFieldError('expires', 'Invalid expiration');
     if (values.count < 1 || values.count > 100)
       return form.setFieldError('count', 'Must be between 1 and 100');
-    const expires_at =
+    const expiresAt =
       values.expires === 'never'
         ? null
         : new Date(
@@ -57,7 +57,7 @@ function CreateInviteModal({ open, setOpen, updateInvites }) {
     setOpen(false);
 
     const res = await useFetch('/api/auth/invite', 'POST', {
-      expires_at,
+      expiresAt,
       count: values.count,
     });
 
@@ -108,7 +108,7 @@ function CreateInviteModal({ open, setOpen, updateInvites }) {
           min={1}
           stepHoldDelay={200}
           stepHoldInterval={100}
-          parser={(v: string) => Number(v.replace(/[^\d]/g, ''))}
+          parser={(v: string) => v.replace(/[^\d]/g, '')}
         />
 
         <Group position='right' mt='md'>
@@ -158,11 +158,18 @@ export default function Invites() {
 
   const handleCopy = async (invite) => {
     clipboard.copy(`${window.location.protocol}//${window.location.host}/auth/register?code=${invite.code}`);
-    showNotification({
-      title: 'Copied to clipboard',
-      message: '',
-      icon: <CopyIcon />,
-    });
+    if (!navigator.clipboard)
+      showNotification({
+        title: 'Unable to copy to clipboard',
+        message: 'Zipline is unable to copy to clipboard due to security reasons.',
+        color: 'red',
+      });
+    else
+      showNotification({
+        title: 'Copied to clipboard',
+        message: '',
+        icon: <CopyIcon />,
+      });
   };
 
   const updateInvites = async () => {
@@ -201,26 +208,26 @@ export default function Invites() {
                         {invite.code}
                         {invite.used && <> (Used)</>}
                       </Title>
-                      <Tooltip label={new Date(invite.created_at).toLocaleString()}>
+                      <Tooltip label={new Date(invite.createdAt).toLocaleString()}>
                         <div>
-                          <MutedText size='sm'>Created {relativeTime(new Date(invite.created_at))}</MutedText>
+                          <MutedText size='sm'>Created {relativeTime(new Date(invite.createdAt))}</MutedText>
                         </div>
                       </Tooltip>
-                      <Tooltip label={new Date(invite.expires_at).toLocaleString()}>
+                      <Tooltip label={new Date(invite.expiresAt).toLocaleString()}>
                         <div>
-                          <MutedText size='sm'>{expireText(invite.expires_at)}</MutedText>
+                          <MutedText size='sm'>{expireText(invite.expiresAt)}</MutedText>
                         </div>
                       </Tooltip>
                     </Stack>
                   </Group>
-                  <Group position='right'>
+                  <Stack>
                     <ActionIcon aria-label='copy' onClick={() => handleCopy(invite)}>
                       <CopyIcon />
                     </ActionIcon>
                     <ActionIcon aria-label='delete' onClick={() => openDeleteModal(invite)}>
                       <DeleteIcon />
                     </ActionIcon>
-                  </Group>
+                  </Stack>
                 </Group>
               </Card>
             ))

src/components/pages/Manage/ClearStorage.tsx

@@ -0,0 +1,88 @@
+import { Button, Checkbox, Group, Modal, Text, Title } from '@mantine/core';
+import { closeAllModals, openConfirmModal } from '@mantine/modals';
+import { showNotification, updateNotification } from '@mantine/notifications';
+import { CheckIcon, CrossIcon } from 'components/icons';
+import useFetch from 'hooks/useFetch';
+
+export default function ClearStorage({ open, setOpen, check, setCheck }) {
+  const handleDelete = async (datasource: boolean, orphaned?: boolean) => {
+    showNotification({
+      id: 'clear-uploads',
+      title: 'Clearing...',
+      message: '',
+      loading: true,
+      autoClose: false,
+    });
+
+    const res = await useFetch('/api/admin/clear', 'POST', { datasource, orphaned });
+
+    if (res.error) {
+      updateNotification({
+        id: 'clear-uploads',
+        title: 'Error while clearing uploads',
+        message: res.error,
+        color: 'red',
+        icon: <CrossIcon />,
+      });
+    } else {
+      updateNotification({
+        id: 'clear-uploads',
+        title: 'Successfully cleared uploads',
+        message: '',
+        color: 'green',
+        icon: <CheckIcon />,
+      });
+    }
+  };
+
+  return (
+    <Modal
+      opened={open}
+      onClose={() => setOpen(false)}
+      title={<Title size='sm'>Are you sure you want to clear all uploads in the database?</Title>}
+    >
+      <Checkbox
+        id='orphanedFiles'
+        label='Clear only orphaned files?'
+        description='Orphaned files are not owned by anyone. They can&#39;t be seen the dashboard by anyone.'
+        checked={check}
+        onChange={(e) => setCheck(e.currentTarget.checked)}
+      />
+      <Group position='right' mt='md'>
+        <Button
+          onClick={() => {
+            setOpen(() => false);
+          }}
+        >
+          No
+        </Button>
+        <Button
+          onClick={() => {
+            setOpen(false);
+            openConfirmModal({
+              title: 'Do you want to clear storage too?',
+              labels: { confirm: 'Yes', cancel: check ? 'Ok' : 'No' },
+              children: check && (
+                <Text size='sm' color='gray'>
+                  Due to clearing orphaned files, storage clearing will be unavailable.
+                </Text>
+              ),
+              confirmProps: { disabled: check },
+              onConfirm: () => {
+                closeAllModals();
+                handleDelete(true);
+              },
+              onCancel: () => {
+                closeAllModals();
+                handleDelete(false, check);
+              },
+              onClose: () => setCheck(false),
+            });
+          }}
+        >
+          Yes
+        </Button>
+      </Group>
+    </Modal>
+  );
+}

src/components/pages/Manage/Flameshot.tsx

@@ -7,28 +7,31 @@ export default function Flameshot({ user, open, setOpen }) {
     const curl = [
       'curl',
       '-H',
-      '"Content-Type: multipart/form-data"',
-      '-H',
       `"authorization: ${user?.token}"`,
-      '-F',
-      'file=@/tmp/ss.png',
       `${
         window.location.protocol +
         '//' +
         window.location.hostname +
         (window.location.port ? ':' + window.location.port : '')
-      }/api/upload`,
+      }/api/${values.type === 'upload-file' ? 'upload' : 'shorten'}`,
     ];
 
+    if (values.type === 'upload-file') {
+      curl.push('-F', 'file=@/tmp/ss.png');
+      curl.push('-H', '"Content-Type: multipart/form-data"');
+    } else {
+      curl.push('-H', '"Content-Type: application/json"');
+    }
+
     const extraHeaders = {};
 
-    if (values.format !== 'RANDOM') {
+    if (values.format !== 'RANDOM' && values.type === 'upload-file') {
       extraHeaders['Format'] = values.format;
     } else {
       delete extraHeaders['Format'];
     }
 
-    if (values.imageCompression !== 0) {
+    if (values.imageCompression !== 0 && values.type === 'upload-file') {
       extraHeaders['Image-Compression-Percent'] = values.imageCompression;
     } else {
       delete extraHeaders['Image-Compression-Percent'];
@@ -40,25 +43,55 @@ export default function Flameshot({ user, open, setOpen }) {
       delete extraHeaders['Zws'];
     }
 
-    if (values.embed) {
+    if (values.embed && values.type === 'upload-file') {
       extraHeaders['Embed'] = 'true';
     } else {
       delete extraHeaders['Embed'];
     }
 
+    if (values.noJSON) {
+      extraHeaders['No-JSON'] = 'true';
+    } else {
+      delete extraHeaders['No-JSON'];
+    }
+
+    if (values.originalName && values.type === 'upload-file') {
+      extraHeaders['Original-Name'] = 'true';
+    } else {
+      delete extraHeaders['Original-Name'];
+    }
+
+    if (values.overrideDomain && values.overrideDomain.trim() !== '') {
+      extraHeaders['Override-Domain'] = values.overrideDomain;
+    } else {
+      delete extraHeaders['Override-Domain'];
+    }
+
     for (const [key, value] of Object.entries(extraHeaders)) {
       curl.push('-H');
       curl.push(`"${key}: ${value}"`);
     }
 
-    const shell = `#!/bin/bash${values.wlCompositorNotSupported ? '\nexport XDG_CURRENT_DESKTOP=sway\n' : ''}
-flameshot gui -p /tmp/ss.png;
-${curl.join(' ')} | jq -r '.files[0]' | tr -d '\\n' | ${values.wlCompatibility ? 'wl-copy' : 'xsel -ib'};
+    let shell;
+    if (values.type === 'upload-file') {
+      shell = `#!/bin/bash${values.wlCompositorNotSupported ? '\nexport XDG_CURRENT_DESKTOP=sway\n' : ''}
+flameshot gui -r > /tmp/ss.png;
+${curl.join(' ')}${values.noJSON ? '' : " | jq -r '.files[0]'"} | tr -d '\\n' | ${
+        values.wlCompatibility ? 'wl-copy' : 'xsel -ib'
+      };
 `;
+    } else if (values.type === 'shorten-url') {
+      shell = `#!/bin/bash
+arg=$1;
+${curl.join(' ')} -d "{\\"url\\": \\"$arg\\"}"${values.noJSON ? '' : " | jq -r '.url'"} | tr -d '\\n' | ${
+        values.wlCompatibility ? 'wl-copy' : 'xsel -ib'
+      };
+`;
+    }
 
     const pseudoElement = document.createElement('a');
     pseudoElement.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(shell));
-    pseudoElement.setAttribute('download', 'zipline.sh');
+    pseudoElement.setAttribute('download', `zipline${values.type === 'upload-file' ? '' : '-url'}.sh`);
     pseudoElement.style.display = 'none';
     document.body.appendChild(pseudoElement);
     pseudoElement.click();

src/components/pages/Manage/GeneratorModal.tsx

@@ -1,21 +1,85 @@
-import { Box, Button, Checkbox, Code, Group, Modal, NumberInput, Select, Text, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Checkbox,
+  Code,
+  Group,
+  Modal,
+  NumberInput,
+  Select,
+  Stack,
+  Switch,
+  Text,
+  TextInput,
+  Title,
+} from '@mantine/core';
 import { useForm } from '@mantine/form';
-import { DownloadIcon } from 'components/icons';
+import { DownloadIcon, GlobeIcon } from 'components/icons';
 import Link from 'components/Link';
 import MutedText from 'components/MutedText';
+import { useReducer, useState } from 'react';
+
+const DEFAULT_OD_DESC = 'Override the default domain(s). Type in a URL, e.g https://example.com';
 
 export function GeneratorModal({ opened, onClose, title, onSubmit, ...other }) {
   const form = useForm({
     initialValues: {
+      type: 'upload-file',
       format: 'RANDOM',
       imageCompression: 0,
       zeroWidthSpace: false,
       embed: false,
       wlCompatibility: false,
       wlCompositorNotSupported: false,
+      noJSON: false,
+      originalName: false,
+      overrideDomain: null,
     },
   });
 
+  const [isUploadFile, setIsUploadFile] = useState(true);
+
+  const onChangeType = (value) => {
+    setIsUploadFile(value === 'upload-file');
+    form.setFieldValue('type', value);
+  };
+
+  const [odState, setODState] = useReducer((state, newState) => ({ ...state, ...newState }), {
+    description: DEFAULT_OD_DESC,
+    error: '',
+    domain: '',
+  });
+
+  const handleOD = (e) => {
+    setODState({ error: '' });
+
+    if (e.currentTarget.value === '') {
+      setODState({ description: DEFAULT_OD_DESC, error: '', domain: null });
+      form.setFieldValue('overrideDomain', null);
+      return;
+    }
+
+    try {
+      const url = new URL(e.currentTarget.value);
+      setODState({
+        description: (
+          <>
+            {DEFAULT_OD_DESC}
+            <br />
+            <br />
+            Using domain &quot;<b>{url.hostname}</b>&quot;
+          </>
+        ),
+        error: '',
+        domain: url.hostname,
+      });
+      form.setFieldValue('overrideDomain', url.hostname);
+    } catch (e) {
+      setODState({ error: 'Invalid URL', domain: '' });
+      form.setFieldValue('overrideDomain', null);
+    }
+  };
+
   return (
     <Modal opened={opened} onClose={onClose} title={<Title order={3}>{title}</Title>} size='lg'>
       {other.desc && (
@@ -24,6 +88,18 @@ export function GeneratorModal({ opened, onClose, title, onSubmit, ...other }) {
         </MutedText>
       )}
       <form onSubmit={form.onSubmit((values) => onSubmit(values))}>
+        <Select
+          label='Type'
+          data={[
+            { value: 'upload-file', label: 'Upload file' },
+            { value: 'shorten-url', label: 'Shorten URLs' },
+          ]}
+          id='type'
+          my='sm'
+          {...form.getInputProps('type')}
+          onChange={onChangeType}
+        />
+
         <Select
           label='Select file name format'
           data={[
@@ -33,30 +109,62 @@ export function GeneratorModal({ opened, onClose, title, onSubmit, ...other }) {
             { value: 'NAME', label: 'Name (keeps original file name)' },
           ]}
           id='format'
+          my='sm'
+          disabled={!isUploadFile}
           {...form.getInputProps('format')}
         />
 
         <NumberInput
-          label={"Image Compression (leave at 0 if you don't want to compress)"}
+          label='Image Compression'
+          description='Set the image compression level (0-100). 0 is no compression, 100 is maximum compression.'
           max={100}
           min={0}
-          mt='md'
+          my='sm'
           id='imageCompression'
+          disabled={!isUploadFile}
           {...form.getInputProps('imageCompression')}
         />
 
-        <Group grow mt='md'>
-          <Checkbox
+        <TextInput
+          label='Override Domain'
+          onChange={handleOD}
+          icon={<GlobeIcon />}
+          description={odState.description}
+          error={odState.error}
+        />
+
+        <Stack my='md'>
+          <Switch
             label='Zero Width Space'
+            description='Use zero width spaces as the file name'
             id='zeroWidthSpace'
             {...form.getInputProps('zeroWidthSpace', { type: 'checkbox' })}
           />
-          <Checkbox label='Embed' id='embed' {...form.getInputProps('embed', { type: 'checkbox' })} />
-        </Group>
+          <Switch
+            description='Return response as plain text instead of JSON'
+            label='No JSON'
+            id='noJSON'
+            {...form.getInputProps('noJSON', { type: 'checkbox' })}
+          />
+          <Switch
+            description='Image will display with embedded metadata'
+            label='Embed'
+            id='embed'
+            disabled={!isUploadFile}
+            {...form.getInputProps('embed', { type: 'checkbox' })}
+          />
+          <Switch
+            description='Whether or not to show the original name when downloading this specific file. This will not change the name format in the URL.'
+            label='Original Name'
+            id='originalName'
+            disabled={!isUploadFile}
+            {...form.getInputProps('originalName', { type: 'checkbox' })}
+          />
+        </Stack>
 
         {title === 'Flameshot' && (
           <>
-            <Box mt='md'>
+            <Box my='md'>
               <Text>Wayland</Text>
               <MutedText size='sm'>
                 If using wayland, you can check the boxes below to your liking. This will require{' '}
@@ -67,7 +175,7 @@ export function GeneratorModal({ opened, onClose, title, onSubmit, ...other }) {
               </MutedText>
             </Box>
 
-            <Group mt='md'>
+            <Group my='md'>
               <Checkbox
                 label='Enable Wayland Compatibility'
                 description={
@@ -92,6 +200,7 @@ export function GeneratorModal({ opened, onClose, title, onSubmit, ...other }) {
                     <Code>XDG_CURRENT_DESKTOP=sway</Code> to workaround Flameshot&apos;s errors
                   </>
                 }
+                disabled={!isUploadFile}
                 id='wlCompositorNotSupported'
                 {...form.getInputProps('wlCompositorNotSupported', { type: 'checkbox' })}
               />
@@ -99,12 +208,10 @@ export function GeneratorModal({ opened, onClose, title, onSubmit, ...other }) {
           </>
         )}
 
-        <Group grow>
-          <Button mt='md' onClick={form.reset}>
-            Reset
-          </Button>
+        <Group grow my='md'>
+          <Button onClick={form.reset}>Reset</Button>
 
-          <Button mt='md' rightIcon={<DownloadIcon />} type='submit'>
+          <Button rightIcon={<DownloadIcon />} type='submit'>
             Download
           </Button>
         </Group>

src/components/pages/Manage/ShareX.tsx

@@ -1,57 +1,88 @@
-import { useState } from 'react';
+import { useReducer, useState } from 'react';
 import { GeneratorModal } from './GeneratorModal';
 
 export default function ShareX({ user, open, setOpen }) {
-  const [config, setConfig] = useState({
-    Version: '13.2.1',
-    Name: 'Zipline',
-    DestinationType: 'ImageUploader, TextUploader',
-    RequestMethod: 'POST',
-    RequestURL: `${
-      window.location.protocol +
-      '//' +
-      window.location.hostname +
-      (window.location.port ? ':' + window.location.port : '')
-    }/api/upload`,
-    Headers: {
-      Authorization: user?.token,
-    },
-    URL: '$json:files[0]$',
-    Body: 'MultipartFormData',
-    FileFormName: 'file',
-  });
-
   const onSubmit = (values) => {
-    if (values.format !== 'RANDOM') {
-      config.Headers['Format'] = values.format;
-      setConfig(config);
+    const hostname = window.location.hostname;
+
+    const config = {
+      Version: '14.1.0',
+      Name: `Zipline - ${hostname} - ${values.type === 'upload-file' ? 'File' : 'URL'}`,
+      DestinationType: 'ImageUploader, TextUploader, FileUploader',
+      RequestMethod: 'POST',
+      RequestURL: `${
+        window.location.protocol +
+        '//' +
+        window.location.hostname +
+        (window.location.port ? ':' + window.location.port : '')
+      }/api/upload`,
+      Headers: {
+        Authorization: user?.token,
+      },
+      URL: '{json:files[0]}',
+      Body: 'MultipartFormData',
+      FileFormName: 'file',
+      Data: undefined,
+    };
+
+    if (values.type === 'shorten-url') {
+      config.RequestURL = `${
+        window.location.protocol +
+        '//' +
+        window.location.hostname +
+        (window.location.port ? ':' + window.location.port : '')
+      }/api/shorten`;
+      config.URL = '{json:url}';
+      config.Body = 'JSON';
+      config.DestinationType = 'URLShortener,URLSharingService';
+      delete config.FileFormName;
+      config.Data = JSON.stringify({ url: '{input}' });
     } else {
-      delete config.Headers['Format'];
-      setConfig(config);
+      delete config.Data;
     }
 
-    if (values.imageCompression !== 0) {
+    if (values.format !== 'RANDOM' && values.type === 'upload-file') {
+      config.Headers['Format'] = values.format;
+    } else {
+      delete config.Headers['Format'];
+    }
+
+    if (values.imageCompression !== 0 && values.type === 'upload-file') {
       config.Headers['Image-Compression-Percent'] = values.imageCompression;
-      setConfig(config);
     } else {
       delete config.Headers['Image-Compression-Percent'];
-      setConfig(config);
     }
 
     if (values.zeroWidthSpace) {
       config.Headers['Zws'] = 'true';
-      setConfig(config);
     } else {
       delete config.Headers['Zws'];
-      setConfig(config);
     }
 
-    if (values.embed) {
+    if (values.embed && values.type === 'upload-file') {
       config.Headers['Embed'] = 'true';
-      setConfig(config);
     } else {
       delete config.Headers['Embed'];
-      setConfig(config);
+    }
+
+    if (values.noJSON) {
+      config.URL = '{response}';
+      config.Headers['No-JSON'] = 'true';
+    } else {
+      delete config.Headers['No-JSON'];
+      config.URL = values.type === 'upload-file' ? '{json:files[0]}' : '{json:url}';
+    }
+
+    if (values.originalName && values.type === 'upload-file') {
+      config.Headers['Original-Name'] = 'true';
+    } else {
+      delete config.Headers['Original-Name'];
+    }
+
+    if (values.overrideDomain && values.overrideDomain.trim() !== '') {
+      config.Headers['Override-Domain'] = values.overrideDomain;
+    } else {
+      delete config.Headers['Override-Domain'];
     }
 
     const pseudoElement = document.createElement('a');
@@ -59,7 +90,7 @@ export default function ShareX({ user, open, setOpen }) {
       'href',
       'data:application/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(config, null, '\t'))
     );
-    pseudoElement.setAttribute('download', 'zipline.sxcu');
+    pseudoElement.setAttribute('download', `zipline${values.type === 'upload-file' ? '' : '-url'}.sxcu`);
     pseudoElement.style.display = 'none';
     document.body.appendChild(pseudoElement);
     pseudoElement.click();

src/components/pages/Manage/TotpModal.tsx

@@ -1,5 +1,6 @@
 import { Button, Center, Image, Modal, NumberInput, Text, Title } from '@mantine/core';
 import { showNotification } from '@mantine/notifications';
+import { useForm } from '@mantine/form';
 import { CheckIcon, CrossIcon } from 'components/icons';
 import useFetch from 'hooks/useFetch';
 import { useEffect, useState } from 'react';
@@ -10,6 +11,7 @@ export function TotpModal({ opened, onClose, deleteTotp, setTotpEnabled }) {
   const [disabled, setDisabled] = useState(false);
   const [code, setCode] = useState(undefined);
   const [error, setError] = useState('');
+  const form = useForm();
 
   useEffect(() => {
     (async () => {
@@ -114,28 +116,35 @@ export function TotpModal({ opened, onClose, deleteTotp, setTotpEnabled }) {
         </>
       )}
 
-      <NumberInput
-        placeholder='2FA Code'
-        label='Verify'
-        size='xl'
-        hideControls
-        maxLength={6}
-        minLength={6}
-        value={code}
-        onChange={(e) => setCode(e)}
-        error={error}
-      />
-
-      <Button
-        disabled={disabled}
-        size='lg'
-        fullWidth
-        mt='md'
-        rightIcon={<CheckIcon />}
-        onClick={deleteTotp ? disableTotp : verifyCode}
+      <form
+        onSubmit={form.onSubmit(() => {
+          deleteTotp ? disableTotp() : verifyCode();
+        })}
       >
-        Verify{deleteTotp ? ' and Disable' : ''}
-      </Button>
+        <NumberInput
+          placeholder='2FA Code'
+          label='Verify'
+          size='xl'
+          hideControls
+          maxLength={6}
+          minLength={6}
+          value={code}
+          onChange={(e) => setCode(e)}
+          data-autofocus
+          error={error}
+        />
+
+        <Button
+          disabled={disabled}
+          size='lg'
+          fullWidth
+          mt='md'
+          rightIcon={<CheckIcon />}
+          onClick={deleteTotp ? disableTotp : verifyCode}
+        >
+          Verify{deleteTotp ? ' and Disable' : ''}
+        </Button>
+      </form>
     </Modal>
   );
 }

src/components/pages/Manage/index.tsx

@@ -8,6 +8,7 @@ import {
   Group,
   Image,
   PasswordInput,
+  SimpleGrid,
   Space,
   Text,
   TextInput,
@@ -15,7 +16,7 @@ import {
   Tooltip,
 } from '@mantine/core';
 import { useForm } from '@mantine/form';
-import { randomId, useInterval } from '@mantine/hooks';
+import { randomId, useInterval, useMediaQuery } from '@mantine/hooks';
 import { useModals } from '@mantine/modals';
 import { showNotification, updateNotification } from '@mantine/notifications';
 import {
@@ -41,6 +42,7 @@ import { bytesToHuman } from 'lib/utils/bytes';
 import { capitalize } from 'lib/utils/client';
 import { useEffect, useState } from 'react';
 import { useRecoilState } from 'recoil';
+import ClearStorage from './ClearStorage';
 import Flameshot from './Flameshot';
 import ShareX from './ShareX';
 import { TotpModal } from './TotpModal';
@@ -75,10 +77,12 @@ export default function Manage({ oauth_registration, oauth_providers: raw_oauth_
   const [totpOpen, setTotpOpen] = useState(false);
   const [shareXOpen, setShareXOpen] = useState(false);
   const [flameshotOpen, setFlameshotOpen] = useState(false);
+  const [clrStorOpen, setClrStorOpen] = useState(false);
   const [exports, setExports] = useState([]);
   const [file, setFile] = useState<File>(null);
   const [fileDataURL, setFileDataURL] = useState(user.avatar ?? null);
   const [totpEnabled, setTotpEnabled] = useState(!!user.totpSecret);
+  const [checked, setCheck] = useState(false);
 
   const getDataURL = (f: File): Promise<string> => {
     return new Promise((res, rej) => {
@@ -139,9 +143,10 @@ export default function Manage({ oauth_registration, oauth_providers: raw_oauth_
     initialValues: {
       username: user.username,
       password: '',
-      embedTitle: user.embedTitle ?? '',
-      embedColor: user.embedColor,
-      embedSiteName: user.embedSiteName ?? '',
+      embedTitle: user.embed?.title ?? null,
+      embedColor: user.embed?.color ?? '',
+      embedSiteName: user.embed?.siteName ?? null,
+      embedDescription: user.embed?.description ?? null,
       domains: user.domains.join(','),
     },
   });
@@ -149,9 +154,12 @@ export default function Manage({ oauth_registration, oauth_providers: raw_oauth_
   const onSubmit = async (values) => {
     const cleanUsername = values.username.trim();
     const cleanPassword = values.password.trim();
-    const cleanEmbedTitle = values.embedTitle.trim();
-    const cleanEmbedColor = values.embedColor.trim();
-    const cleanEmbedSiteName = values.embedSiteName.trim();
+    const cleanEmbed = {
+      title: values.embedTitle ? values.embedTitle.trim() : null,
+      color: values.embedColor !== '' ? values.embedColor.trim() : null,
+      siteName: values.embedSiteName ? values.embedSiteName.trim() : null,
+      description: values.embedDescription ? values.embedDescription.trim() : null,
+    };
 
     if (cleanUsername === '') return form.setFieldError('username', "Username can't be nothing");
 
@@ -166,13 +174,11 @@ export default function Manage({ oauth_registration, oauth_providers: raw_oauth_
     const data = {
       username: cleanUsername,
       password: cleanPassword === '' ? null : cleanPassword,
-      embedTitle: cleanEmbedTitle === '' ? null : cleanEmbedTitle,
-      embedColor: cleanEmbedColor === '' ? null : cleanEmbedColor,
-      embedSiteName: cleanEmbedSiteName === '' ? null : cleanEmbedSiteName,
       domains: values.domains
         .split(/\s?,\s?/)
         .map((x) => x.trim())
         .filter((x) => x !== ''),
+      embed: cleanEmbed,
     };
 
     const newUser = await useFetch('/api/user', 'PATCH', data);
@@ -309,58 +315,6 @@ export default function Manage({ oauth_registration, oauth_providers: raw_oauth_
     }
   };
 
-  const openClearData = () => {
-    modals.openConfirmModal({
-      title: 'Are you sure you want to clear all uploads in the database?',
-      closeOnConfirm: false,
-      labels: { confirm: 'Yes', cancel: 'No' },
-      onConfirm: () => {
-        modals.openConfirmModal({
-          title: 'Do you want to clear storage too?',
-          labels: { confirm: 'Yes', cancel: 'No' },
-          onConfirm: () => {
-            handleClearData(true);
-            modals.closeAll();
-          },
-          onCancel: () => {
-            handleClearData(false);
-            modals.closeAll();
-          },
-        });
-      },
-    });
-  };
-
-  const handleClearData = async (datasource?: boolean) => {
-    showNotification({
-      id: 'clear-uploads',
-      title: 'Clearing...',
-      message: '',
-      loading: true,
-      autoClose: false,
-    });
-
-    const res = await useFetch('/api/admin/clear', 'POST', { datasource });
-
-    if (res.error) {
-      updateNotification({
-        id: 'clear-uploads',
-        title: 'Error while clearing uploads',
-        message: res.error,
-        color: 'red',
-        icon: <CrossIcon />,
-      });
-    } else {
-      updateNotification({
-        id: 'clear-uploads',
-        title: 'Successfully cleared uploads',
-        message: '',
-        color: 'green',
-        icon: <CheckIcon />,
-      });
-    }
-  };
-
   const handleOauthUnlink = async (provider) => {
     const res = await useFetch('/api/auth/oauth', 'DELETE', {
       provider,
@@ -405,14 +359,31 @@ export default function Manage({ oauth_registration, oauth_providers: raw_oauth_
           my='sm'
           {...form.getInputProps('password')}
         />
-        <TextInput id='embedTitle' label='Embed Title' my='sm' {...form.getInputProps('embedTitle')} />
-        <ColorInput id='embedColor' label='Embed Color' my='sm' {...form.getInputProps('embedColor')} />
-        <TextInput
-          id='embedSiteName'
-          label='Embed Site Name'
-          my='sm'
-          {...form.getInputProps('embedSiteName')}
-        />
+
+        <SimpleGrid
+          cols={4}
+          breakpoints={[
+            { maxWidth: 768, cols: 1 },
+            { minWidth: 769, maxWidth: 1024, cols: 2 },
+            { minWidth: 1281, cols: 4 },
+          ]}
+        >
+          <TextInput id='embedTitle' label='Embed Title' my='sm' {...form.getInputProps('embedTitle')} />
+          <ColorInput id='embedColor' label='Embed Color' my='sm' {...form.getInputProps('embedColor')} />
+          <TextInput
+            id='embedSiteName'
+            label='Embed Site Name'
+            my='sm'
+            {...form.getInputProps('embedSiteName')}
+          />
+          <TextInput
+            id='embedDescription'
+            label='Embed Description'
+            my='sm'
+            {...form.getInputProps('embedDescription')}
+          />
+        </SimpleGrid>
+
         <TextInput
           id='domains'
           label='Domains'
@@ -423,7 +394,18 @@ export default function Manage({ oauth_registration, oauth_providers: raw_oauth_
         />
 
         <Group position='right' mt='md'>
-          <Button type='submit'>Save User</Button>
+          <Button
+            type='submit'
+            size='lg'
+            my='sm'
+            sx={{
+              '@media screen and (max-width: 768px)': {
+                width: '100%',
+              },
+            }}
+          >
+            Save
+          </Button>
         </Group>
       </form>
 
@@ -436,7 +418,16 @@ export default function Manage({ oauth_registration, oauth_providers: raw_oauth_
               : 'You do not have two factor authentication enabled.'}
           </MutedText>
 
-          <Button size='lg' my='sm' onClick={() => setTotpOpen(true)}>
+          <Button
+            size='lg'
+            my='sm'
+            onClick={() => setTotpOpen(true)}
+            sx={{
+              '@media screen and (max-width: 768px)': {
+                width: '100%',
+              },
+            }}
+          >
             {totpEnabled ? 'Disable' : 'Enable'} Two Factor Authentication
           </Button>
 
@@ -503,6 +494,7 @@ export default function Manage({ oauth_registration, oauth_providers: raw_oauth_
               '&:hover': {
                 backgroundColor: t.other.hover,
               },
+              color: t.colorScheme === 'dark' ? 'white' : 'black',
             })}
             size='xl'
             p='sm'
@@ -511,7 +503,7 @@ export default function Manage({ oauth_registration, oauth_providers: raw_oauth_
           </Button>
         </Card>
 
-        <Group position='right' mt='md'>
+        <Group position='right' my='md' grow={useMediaQuery('(max-width: 768px)')}>
           <Button
             onClick={() => {
               setFile(null);
@@ -525,12 +517,12 @@ export default function Manage({ oauth_registration, oauth_providers: raw_oauth_
         </Group>
       </Box>
 
-      <Box mb='md'>
+      <Box my='md'>
         <Title>Manage Data</Title>
         <MutedText size='md'>Delete, or export your data into a zip file.</MutedText>
       </Box>
 
-      <Group>
+      <Group my='md' grow={useMediaQuery('(max-width: 768px)')}>
         <Button onClick={openDeleteModal} rightIcon={<DeleteIcon />} color='red'>
           Delete All Data
         </Button>
@@ -573,11 +565,11 @@ export default function Manage({ oauth_registration, oauth_providers: raw_oauth_
       {user.administrator && (
         <Box mt='md'>
           <Title>Server</Title>
-          <Group>
+          <Group my='md' grow={useMediaQuery('(max-width: 768px)')}>
             <Button size='md' onClick={forceUpdateStats} color='red' rightIcon={<RefreshIcon />}>
               Force Update Stats
             </Button>
-            <Button size='md' onClick={openClearData} color='red' rightIcon={<TrashIcon />}>
+            <Button size='md' onClick={() => setClrStorOpen(true)} color='red' rightIcon={<TrashIcon />}>
               Delete all uploads
             </Button>
           </Group>
@@ -586,16 +578,35 @@ export default function Manage({ oauth_registration, oauth_providers: raw_oauth_
 
       <Title my='md'>Uploaders</Title>
       <Group>
-        <Button size='xl' onClick={() => setShareXOpen(true)} rightIcon={<ShareXIcon />}>
+        <Button
+          size='xl'
+          onClick={() => setShareXOpen(true)}
+          rightIcon={<ShareXIcon />}
+          sx={{
+            '@media screen and (max-width: 768px)': {
+              width: '100%',
+            },
+          }}
+        >
           Generate ShareX Config
         </Button>
-        <Button size='xl' onClick={() => setFlameshotOpen(true)} rightIcon={<FlameshotIcon />}>
+        <Button
+          size='xl'
+          onClick={() => setFlameshotOpen(true)}
+          rightIcon={<FlameshotIcon />}
+          sx={{
+            '@media screen and (max-width: 768px)': {
+              width: '100%',
+            },
+          }}
+        >
           Generate Flameshot Script
         </Button>
       </Group>
 
       <ShareX user={user} open={shareXOpen} setOpen={setShareXOpen} />
       <Flameshot user={user} open={flameshotOpen} setOpen={setFlameshotOpen} />
+      <ClearStorage open={clrStorOpen} setOpen={setClrStorOpen} check={checked} setCheck={setCheck} />
     </>
   );
 }

src/components/pages/MetadataView.tsx

@@ -1,13 +1,11 @@
-import { Button, Center, Group, Skeleton, Stack, Table, TextInput, Title } from '@mantine/core';
+import { Button, Center, Group, Skeleton, Table, TextInput, Title } from '@mantine/core';
 import { useClipboard } from '@mantine/hooks';
 import { showNotification } from '@mantine/notifications';
 import { CopyIcon } from 'components/icons';
 import useFetch from 'hooks/useFetch';
-import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 
 export default function MetadataView({ fileId }) {
-  const router = useRouter();
   const clipboard = useClipboard();
 
   const [metadata, setMetadata] = useState([]);
@@ -29,11 +27,18 @@ export default function MetadataView({ fileId }) {
 
   const copy = (value) => {
     clipboard.copy(value);
-    showNotification({
-      title: 'Copied to clipboard',
-      message: value,
-      icon: <CopyIcon />,
-    });
+    if (!navigator.clipboard)
+      showNotification({
+        title: 'Unable to copy to clipboard',
+        message: 'Zipline is unable to copy to clipboard due to security reasons.',
+        color: 'red',
+      });
+    else
+      showNotification({
+        title: 'Copied to clipboard',
+        message: value,
+        icon: <CopyIcon />,
+      });
   };
 
   const searchValue = (value) => {

src/components/pages/Stats/Graphs.tsx

@@ -1,132 +1,66 @@
-import { Box, Card, Grid, LoadingOverlay, MantineTheme, Title, useMantineTheme } from '@mantine/core';
-import {
-  ArcElement,
-  CategoryScale,
-  Chart as ChartJS,
-  ChartData,
-  ChartOptions,
-  LinearScale,
-  LineController,
-  LineElement,
-  PointElement,
-  Tooltip,
-} from 'chart.js';
+import { Box, Card, Grid, LoadingOverlay, Title, useMantineTheme } from '@mantine/core';
+
 import { useStats } from 'lib/queries/stats';
 import { bytesToHuman } from 'lib/utils/bytes';
-import { useMemo } from 'react';
-import { Chart } from 'react-chartjs-2';
+import { useEffect, useMemo, useState } from 'react';
 
-ChartJS.register(ArcElement, LinearScale, CategoryScale, PointElement, LineController, LineElement, Tooltip);
-
-const CHART_OPTIONS = (theme: MantineTheme): ChartOptions => ({
-  plugins: {
-    tooltip: {
-      enabled: true,
-      intersect: false,
-    },
-  },
-
-  scales: {
-    y: {
-      ticks: {
-        callback: (value) => value.toLocaleString(),
-        color: theme.colors.gray[6],
-      },
-
-      grid: {
-        color: theme.colors.gray[8],
-      },
-    },
-
-    x: {
-      ticks: {
-        color: theme.colors.gray[6],
-      },
-
-      grid: {
-        color: theme.colors.gray[8],
-      },
-    },
-  },
-});
-
-export type LineChartData = ChartData<'line', number[], string>;
-export type ChartDataMemo = {
-  views: LineChartData;
-  uploads: LineChartData;
-  storage: LineChartData;
-} | void;
+import { CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 
 export default function Graphs() {
   const historicalStats = useStats(10);
   const theme = useMantineTheme();
 
-  const chartOptions = useMemo(() => CHART_OPTIONS(theme), [theme]);
-
-  const chartData = useMemo<ChartDataMemo>(() => {
-    if (historicalStats.isLoading || !historicalStats.data) return;
+  const chartData = useMemo(() => {
+    if (historicalStats.isLoading || !historicalStats.data) return null;
 
     const data = Array.from(historicalStats.data).reverse();
-    const labels = data.map((stat) => new Date(stat.created_at).toLocaleDateString());
-    const viewData = data.map((stat) => stat.data.views_count);
-    const uploadData = data.map((stat) => stat.data.count);
-    const storageData = data.map((stat) => stat.data.size_num);
+
+    const views = data.map((stat) => ({
+      date: new Date(stat.createdAt).toLocaleDateString(),
+      views: stat.data.views_count,
+    }));
+
+    const uploads = data.map((stat) => ({
+      date: new Date(stat.createdAt).toLocaleDateString(),
+      uploads: stat.data.count,
+    }));
+
+    const storage = data.map((stat) => ({
+      date: new Date(stat.createdAt).toLocaleDateString(),
+      bytes: stat.data.size_num,
+    }));
 
     return {
-      views: {
-        labels,
-        datasets: [
-          {
-            label: ' Views',
-            data: viewData,
-            borderColor: theme.colors.blue[6],
-            backgroundColor: theme.colors.blue[0],
-          },
-        ],
-      },
-
-      uploads: {
-        labels,
-        datasets: [
-          {
-            label: ' Uploads',
-            data: uploadData,
-            borderColor: theme.colors.blue[6],
-            backgroundColor: theme.colors.blue[0],
-          },
-        ],
-      },
-
-      storage: {
-        labels,
-        datasets: [
-          {
-            label: ' Storage',
-            data: storageData,
-            borderColor: theme.colors.blue[6],
-            backgroundColor: theme.colors.blue[0],
-          },
-        ],
-      },
+      views,
+      uploads,
+      storage,
     };
   }, [historicalStats]);
 
-  return (
+  return historicalStats.isLoading ? (
+    <LoadingOverlay visible={historicalStats.isLoading} />
+  ) : (
     <Box mt='md'>
-      <LoadingOverlay visible={historicalStats.isLoading} />
-
       <Grid>
         {/* 3/4 - views */}
         <Grid.Col md={12}>
           <Card>
             <Title size='h4'>Total Views</Title>
             {chartData && (
-              <Chart
-                type='line'
-                data={chartData.views}
-                options={chartOptions}
-                style={{ maxHeight: '20vh' }}
-              />
+              <ResponsiveContainer width='100%' height={250}>
+                <LineChart data={chartData.views}>
+                  <CartesianGrid strokeDasharray='3 3' />
+                  <XAxis dataKey='date' />
+                  <YAxis />
+                  <Tooltip
+                    contentStyle={{
+                      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : 'white',
+                      borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : 'white',
+                    }}
+                  />
+                  <Line type='monotone' dataKey='views' name='Views' stroke='#8884d8' activeDot={{ r: 8 }} />
+                </LineChart>
+              </ResponsiveContainer>
             )}
           </Card>
         </Grid.Col>
@@ -136,12 +70,26 @@ export default function Graphs() {
           <Card>
             <Title size='h4'>Total Uploads</Title>
             {chartData && (
-              <Chart
-                type='line'
-                data={chartData.uploads}
-                options={chartOptions}
-                style={{ maxHeight: '20vh' }}
-              />
+              <ResponsiveContainer width='100%' height={250}>
+                <LineChart data={chartData.uploads}>
+                  <CartesianGrid strokeDasharray='3 3' />
+                  <XAxis dataKey='date' />
+                  <YAxis />
+                  <Tooltip
+                    contentStyle={{
+                      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : 'white',
+                      borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : 'white',
+                    }}
+                  />
+                  <Line
+                    type='monotone'
+                    dataKey='uploads'
+                    name='Uploads'
+                    stroke='#8884d8'
+                    activeDot={{ r: 8 }}
+                  />
+                </LineChart>
+              </ResponsiveContainer>
             )}
           </Card>
         </Grid.Col>
@@ -151,39 +99,27 @@ export default function Graphs() {
           <Card>
             <Title size='h4'>Storage Usage</Title>
             {chartData && (
-              <Chart
-                type='line'
-                data={chartData.storage}
-                options={{
-                  ...chartOptions,
-
-                  scales: {
-                    ...chartOptions.scales,
-                    y: {
-                      ...chartOptions.scales.y,
-
-                      ticks: {
-                        callback: (value) => bytesToHuman(value as number),
-                        color: theme.colors.gray[6],
-                      },
-                    },
-                  },
-
-                  plugins: {
-                    ...chartOptions.plugins,
-                    tooltip: {
-                      ...chartOptions.plugins.tooltip,
-                      callbacks: {
-                        label: (context) => {
-                          const value = context.raw as number;
-                          return bytesToHuman(value);
-                        },
-                      },
-                    },
-                  },
-                }}
-                style={{ maxHeight: '20vh' }}
-              />
+              <ResponsiveContainer width='100%' height={250}>
+                <LineChart data={chartData.storage}>
+                  <CartesianGrid strokeDasharray='3 3' />
+                  <XAxis dataKey='date' />
+                  <YAxis width={80} tickFormatter={(value) => bytesToHuman(value as number)} />
+                  <Tooltip
+                    contentStyle={{
+                      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : 'white',
+                      borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.colors.gray[3],
+                    }}
+                    formatter={(value) => bytesToHuman(value as number)}
+                  />
+                  <Line
+                    type='monotone'
+                    stroke='#8884d8'
+                    activeDot={{ r: 8 }}
+                    dataKey='bytes'
+                    name='Storage'
+                  />
+                </LineChart>
+              </ResponsiveContainer>
             )}
           </Card>
         </Grid.Col>

src/components/pages/Stats/Types.tsx

@@ -1,36 +1,39 @@
-import { Box, Card, Center, Grid, LoadingOverlay, Title } from '@mantine/core';
-import { ChartData } from 'chart.js';
+import { Box, Card, Center, Grid, LoadingOverlay, Title, useMantineTheme } from '@mantine/core';
+
 import { SmallTable } from 'components/SmallTable';
 import { useStats } from 'lib/queries/stats';
 import { colorHash } from 'lib/utils/client';
-import { useMemo } from 'react';
-import { Pie } from 'react-chartjs-2';
+import { useEffect, useMemo, useState } from 'react';
+
+import { Pie, PieChart, ResponsiveContainer, Tooltip } from 'recharts';
 
 export default function Types() {
   const stats = useStats();
+  const theme = useMantineTheme();
 
-  if (stats.isLoading) return <LoadingOverlay visible />;
+  const latest = useMemo(() => {
+    if (stats.isLoading || !stats.data) return null;
 
-  const latest = stats.data[0];
+    return stats.data[0];
+  }, [stats]);
+
+  const chartData = useMemo(() => {
+    if (!latest) return null;
+
+    const data = latest.data.types_count.map((type) => ({
+      name: type.mimetype,
+      value: type.count,
+      fill: colorHash(type.mimetype),
+    }));
 
-  const chartData = useMemo<{
-    uploadTypes: ChartData<'pie', number[], string>;
-  }>(() => {
     return {
-      uploadTypes: {
-        labels: latest?.data.types_count.map((x) => x.mimetype),
-        datasets: [
-          {
-            data: latest?.data.types_count.map((x) => x.count),
-            label: ' Count',
-            backgroundColor: latest?.data.types_count.map((x) => colorHash(x.mimetype)),
-          },
-        ],
-      },
+      data,
     };
   }, [latest]);
 
-  return (
+  return !latest ? (
+    <LoadingOverlay visible={stats.isLoading} />
+  ) : (
     <Box mt='md'>
       {latest.data.count_by_user.length ? (
         <Card>
@@ -57,7 +60,33 @@ export default function Types() {
           </Grid.Col>
 
           <Grid.Col md={12} lg={4}>
-            <Center>{chartData && <Pie data={chartData.uploadTypes} style={{ maxHeight: '20vh' }} />}</Center>
+            <Center>
+              {chartData && (
+                <ResponsiveContainer width='100%' height={250}>
+                  <PieChart>
+                    <Pie
+                      data={chartData.data}
+                      dataKey='value'
+                      nameKey='name'
+                      cx='50%'
+                      cy='50%'
+                      outerRadius={80}
+                      label={({ name, value }) => `${name} (${value})`}
+                    />
+                    <Tooltip
+                      contentStyle={{
+                        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : 'white',
+                        borderColor:
+                          theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.colors.gray[3],
+                      }}
+                      itemStyle={{
+                        color: theme.colorScheme === 'dark' ? 'white' : 'black',
+                      }}
+                    />
+                  </PieChart>
+                </ResponsiveContainer>
+              )}
+            </Center>
           </Grid.Col>
         </Grid>
       </Card>

src/components/pages/Upload/File.tsx

@@ -1,4 +1,5 @@
 import {
+  Box,
   Button,
   Collapse,
   Group,
@@ -6,6 +7,8 @@ import {
   PasswordInput,
   Progress,
   Select,
+  Stack,
+  Text,
   Title,
   Tooltip,
 } from '@mantine/core';
@@ -15,6 +18,7 @@ import { showNotification, updateNotification } from '@mantine/notifications';
 import Dropzone from 'components/dropzone/Dropzone';
 import FileDropzone from 'components/dropzone/DropzoneFile';
 import { ClockIcon, CrossIcon, UploadIcon } from 'components/icons';
+import MutedText from 'components/MutedText';
 import { invalidateFiles } from 'lib/queries/files';
 import { userSelector } from 'lib/recoil/user';
 import { expireReadToDate, randomChars } from 'lib/utils/client';
@@ -46,7 +50,7 @@ export default function File({ chunks: chunks_config }) {
     });
   });
 
-  const handleChunkedFiles = async (expires_at: Date, toChunkFiles: File[]) => {
+  const handleChunkedFiles = async (expiresAt: Date, toChunkFiles: File[]) => {
     for (let i = 0; i !== toChunkFiles.length; ++i) {
       const file = toChunkFiles[i];
       const identifier = randomChars(4);
@@ -124,6 +128,12 @@ export default function File({ chunks: chunks_config }) {
                 setTimeout(() => setProgress(0), 1000);
 
                 clipboard.copy(json.files[0]);
+                if (!navigator.clipboard)
+                  showNotification({
+                    title: 'Unable to copy to clipboard',
+                    message: 'Zipline is unable to copy to clipboard due to security reasons.',
+                    color: 'red',
+                  });
               }
 
               ready = true;
@@ -149,7 +159,7 @@ export default function File({ chunks: chunks_config }) {
         req.setRequestHeader('X-Zipline-Partial-MimeType', file.type);
         req.setRequestHeader('X-Zipline-Partial-Identifier', identifier);
         req.setRequestHeader('X-Zipline-Partial-LastChunk', j === chunks.length - 1 ? 'true' : 'false');
-        options.expires !== 'never' && req.setRequestHeader('Expires-At', 'date=' + expires_at.toISOString());
+        options.expires !== 'never' && req.setRequestHeader('Expires-At', 'date=' + expiresAt.toISOString());
         options.password.trim() !== '' && req.setRequestHeader('Password', options.password);
         options.maxViews &&
           options.maxViews !== 0 &&
@@ -159,6 +169,7 @@ export default function File({ chunks: chunks_config }) {
         options.embedded && req.setRequestHeader('Embed', 'true');
         options.zeroWidth && req.setRequestHeader('Zws', 'true');
         options.format !== 'default' && req.setRequestHeader('Format', options.format);
+        options.originalName && req.setRequestHeader('Original-Name', 'true');
 
         req.send(body);
 
@@ -168,7 +179,7 @@ export default function File({ chunks: chunks_config }) {
   };
 
   const handleUpload = async () => {
-    const expires_at = options.expires === 'never' ? null : expireReadToDate(options.expires);
+    const expiresAt = options.expires === 'never' ? null : expireReadToDate(options.expires);
 
     setProgress(0);
     setLoading(true);
@@ -195,7 +206,7 @@ export default function File({ chunks: chunks_config }) {
         autoClose: false,
       });
 
-      return handleChunkedFiles(expires_at, toChunkFiles);
+      return handleChunkedFiles(expiresAt, toChunkFiles);
     }
 
     showNotification({
@@ -241,7 +252,7 @@ export default function File({ chunks: chunks_config }) {
               autoClose: false,
             });
 
-            return handleChunkedFiles(expires_at, toChunkFiles);
+            return handleChunkedFiles(expiresAt, toChunkFiles);
           }
         } else {
           updateNotification({
@@ -260,7 +271,7 @@ export default function File({ chunks: chunks_config }) {
     if (bodyLength !== 0) {
       req.open('POST', '/api/upload');
       req.setRequestHeader('Authorization', user.token);
-      options.expires !== 'never' && req.setRequestHeader('Expires-At', 'date=' + expires_at.toISOString());
+      options.expires !== 'never' && req.setRequestHeader('Expires-At', 'date=' + expiresAt.toISOString());
       options.password.trim() !== '' && req.setRequestHeader('Password', options.password);
       options.maxViews &&
         options.maxViews !== 0 &&
@@ -270,6 +281,8 @@ export default function File({ chunks: chunks_config }) {
       options.embedded && req.setRequestHeader('Embed', 'true');
       options.zeroWidth && req.setRequestHeader('Zws', 'true');
       options.format !== 'default' && req.setRequestHeader('Format', options.format);
+      options.originalName && req.setRequestHeader('Original-Name', 'true');
+      options.overrideDomain && req.setRequestHeader('Override-Domain', options.overrideDomain);
 
       req.send(body);
     }
@@ -277,32 +290,50 @@ export default function File({ chunks: chunks_config }) {
 
   return (
     <>
-      <OptionsModal />
+      {OptionsModal}
       <Title mb='md'>Upload Files</Title>
 
       <Dropzone loading={loading} onDrop={(f) => setFiles([...files, ...f])}>
-        <Group position='center' spacing='md'>
-          {files.map((file) => (
-            <FileDropzone key={randomId()} file={file} />
-          ))}
-        </Group>
+        <Stack justify='space-between' h='100%'>
+          {files.length ? (
+            <Group spacing='md'>
+              {files.map((file) => (
+                <FileDropzone
+                  key={randomId()}
+                  file={file}
+                  onRemove={() => setFiles(files.filter((f) => f !== file))}
+                />
+              ))}
+            </Group>
+          ) : (
+            <Group position='center'>
+              <MutedText>Files will appear here once you drop/select them</MutedText>
+            </Group>
+          )}
+
+          <Stack>
+            <Group position='right' mt='md'>
+              <Button onClick={() => setOpened(true)} variant='outline'>
+                Options
+              </Button>
+              <Button onClick={() => setFiles([])} color='red' variant='outline'>
+                Clear Files
+              </Button>
+              <Button
+                leftIcon={<UploadIcon />}
+                onClick={handleUpload}
+                disabled={files.length === 0 ? true : false}
+              >
+                Upload
+              </Button>
+            </Group>
+
+            <Collapse in={progress !== 0}>
+              {progress !== 0 && <Progress mt='md' value={progress} animate />}
+            </Collapse>
+          </Stack>
+        </Stack>
       </Dropzone>
-
-      <Collapse in={progress !== 0}>
-        {progress !== 0 && <Progress mt='md' value={progress} animate />}
-      </Collapse>
-
-      <Group position='right' mt='md'>
-        <Button onClick={() => setOpened(true)} variant='outline'>
-          Options
-        </Button>
-        <Button onClick={() => setFiles([])} color='red' variant='outline'>
-          Clear Files
-        </Button>
-        <Button leftIcon={<UploadIcon />} onClick={handleUpload} disabled={files.length === 0 ? true : false}>
-          Upload
-        </Button>
-      </Group>
     </>
   );
 }

src/components/pages/Upload/Text.tsx

@@ -31,7 +31,7 @@ export default function Text() {
   const handleUpload = async () => {
     const file = new File([value], 'text.' + lang);
 
-    const expires_at = options.expires === 'never' ? null : expireReadToDate(options.expires);
+    const expiresAt = options.expires === 'never' ? null : expireReadToDate(options.expires);
 
     showNotification({
       id: 'upload-text',
@@ -63,20 +63,22 @@ export default function Text() {
     req.setRequestHeader('Authorization', user.token);
     req.setRequestHeader('UploadText', 'true');
 
-    options.expires !== 'never' && req.setRequestHeader('Expires-At', 'date=' + expires_at.toISOString());
+    options.expires !== 'never' && req.setRequestHeader('Expires-At', 'date=' + expiresAt.toISOString());
     options.password.trim() !== '' && req.setRequestHeader('Password', options.password);
     options.maxViews && options.maxViews !== 0 && req.setRequestHeader('Max-Views', String(options.maxViews));
     options.compression !== 'none' && req.setRequestHeader('Image-Compression-Percent', options.compression);
     options.embedded && req.setRequestHeader('Embed', 'true');
     options.zeroWidth && req.setRequestHeader('Zws', 'true');
     options.format !== 'default' && req.setRequestHeader('Format', options.format);
+    options.originalName && req.setRequestHeader('Original-Name', 'true');
+    options.overrideDomain && req.setRequestHeader('Override-Domain', options.overrideDomain);
 
     req.send(body);
   };
 
   return (
     <>
-      <OptionsModal />
+      {OptionsModal}
       <Title mb='md'>Upload Text</Title>
 
       <Tabs defaultValue='text' variant='pills'>

src/components/pages/Upload/showFilesModal.tsx

@@ -1,17 +1,24 @@
-import { Button, Table, Title } from '@mantine/core';
+import { ActionIcon, Box, Button, Group, Stack, Table, Title, Tooltip } from '@mantine/core';
 import { showNotification } from '@mantine/notifications';
-import { CopyIcon } from 'components/icons';
+import { CopyIcon, LinkIcon } from 'components/icons';
 import Link from 'components/Link';
 
 export default function showFilesModal(clipboard, modals, files: string[]) {
   const open = (idx: number) => window.open(files[idx], '_blank');
   const copy = (idx: number) => {
     clipboard.copy(files[idx]);
-    showNotification({
-      title: 'Copied to clipboard',
-      message: <Link href={files[idx]}>{files[idx]}</Link>,
-      icon: <CopyIcon />,
-    });
+    if (!navigator.clipboard)
+      showNotification({
+        title: 'Unable to copy to clipboard',
+        message: 'Zipline is unable to copy to clipboard due to security reasons.',
+        color: 'red',
+      });
+    else
+      showNotification({
+        title: 'Copied to clipboard',
+        message: <Link href={files[idx]}>{files[idx]}</Link>,
+        icon: <CopyIcon />,
+      });
   };
 
   modals.openModal({
@@ -19,25 +26,27 @@ export default function showFilesModal(clipboard, modals, files: string[]) {
     size: 'auto',
     children: (
       <Table withBorder={false} withColumnBorders={false} highlightOnHover horizontalSpacing={'sm'}>
-        <tbody>
+        <Stack>
           {files.map((file, idx) => (
-            <tr key={file}>
-              <td>
+            <Group key={idx} position='apart'>
+              <Group position='left'>
                 <Link href={file}>{file}</Link>
-              </td>
-              <td>
-                <Button.Group>
-                  <Button variant='outline' onClick={() => copy(idx)}>
-                    Copy
-                  </Button>
-                  <Button variant='outline' onClick={() => open(idx)}>
-                    Open
-                  </Button>
-                </Button.Group>
-              </td>
-            </tr>
+              </Group>
+              <Group position='right'>
+                <Tooltip label='Open link in a new tab'>
+                  <ActionIcon onClick={() => open(idx)} variant='filled' color='primary'>
+                    <LinkIcon />
+                  </ActionIcon>
+                </Tooltip>
+                <Tooltip label='Copy link to clipboard'>
+                  <ActionIcon onClick={() => copy(idx)} variant='filled' color='primary'>
+                    <CopyIcon />
+                  </ActionIcon>
+                </Tooltip>
+              </Group>
+            </Group>
           ))}
-        </tbody>
+        </Stack>
       </Table>
     ),
   });

src/components/pages/Upload/useUploadOptions.tsx

@@ -7,61 +7,87 @@ import {
   Select,
   Stack,
   Switch,
+  TextInput,
   Title,
 } from '@mantine/core';
-import { ClockIcon, ImageIcon, KeyIcon, TypeIcon, UserIcon } from 'components/icons';
-import React, { Dispatch, SetStateAction, useState } from 'react';
+import { ClockIcon, ImageIcon, KeyIcon, TypeIcon, UserIcon, GlobeIcon } from 'components/icons';
+import React, { Dispatch, SetStateAction, useReducer, useState } from 'react';
 
-export default function useUploadOptions(): [
-  {
-    expires: string;
-    password: string;
-    maxViews: number;
-    compression: string;
-    zeroWidth: boolean;
-    embedded: boolean;
-    format: string;
-  },
-  Dispatch<SetStateAction<boolean>>,
-  React.FC
-] {
-  const [expires, setExpires] = useState('never');
-  const [password, setPassword] = useState('');
-  const [maxViews, setMaxViews] = useState(0);
-  const [compression, setCompression] = useState<string>('none');
-  const [zeroWidth, setZeroWidth] = useState(false);
-  const [embedded, setEmbedded] = useState(false);
-  const [format, setFormat] = useState('default');
+export type UploadOptionsState = {
+  expires: string;
+  password: string;
+  maxViews: number;
+  compression: string;
+  zeroWidth: boolean;
+  embedded: boolean;
+  format: string;
+  originalName: boolean;
+  overrideDomain: string;
+};
 
-  const [opened, setOpened] = useState(false);
+const DEFAULT_OD_DESC = 'Override the default domain(s). Type in a URL, e.g https://example.com';
 
-  const reset = () => {
-    setExpires('never');
-    setPassword('');
-    setMaxViews(0);
-    setCompression('none');
-    setZeroWidth(false);
-    setEmbedded(false);
-    setFormat('default');
+export function OptionsModal({
+  opened,
+  setOpened,
+  state,
+  setState,
+  reset,
+}: {
+  opened: boolean;
+  setOpened: Dispatch<SetStateAction<boolean>>;
+  state: UploadOptionsState;
+  setState: Dispatch<SetStateAction<any>>;
+  reset: () => void;
+}) {
+  const [odState, setODState] = useReducer((state, newState) => ({ ...state, ...newState }), {
+    description: DEFAULT_OD_DESC,
+    error: '',
+  });
+
+  const handleOD = (e) => {
+    setODState({ error: '' });
+
+    if (e.currentTarget.value === '') {
+      setODState({ description: DEFAULT_OD_DESC, error: '' });
+      setState({ overrideDomain: '' });
+      return;
+    }
+
+    try {
+      const url = new URL(e.currentTarget.value);
+      setODState({
+        description: (
+          <>
+            {DEFAULT_OD_DESC}
+            <br />
+            <br />
+            Using domain &quot;<b>{url.hostname}</b>&quot;
+          </>
+        ),
+      });
+      setState({ overrideDomain: url.hostname });
+    } catch (e) {
+      setODState({ error: 'Invalid URL' });
+    }
   };
 
-  const OptionsModal: React.FC = () => (
-    <Modal title={<Title>Upload Options</Title>} size='auto' opened={opened} onClose={() => setOpened(false)}>
+  return (
+    <Modal title={<Title>Upload Options</Title>} size='lg' opened={opened} onClose={() => setOpened(false)}>
       <Stack>
         <NumberInput
           label='Max Views'
           description='The maximum number of times this file can be viewed. Leave blank for unlimited views.'
-          value={maxViews}
-          onChange={setMaxViews}
+          value={state.maxViews}
+          onChange={(e) => setState({ maxViews: e })}
           min={0}
           icon={<UserIcon />}
         />
-
         <Select
           label='Expires'
           description='The date and time this file will expire. Leave blank for never.'
-          value={expires}
-          onChange={(e) => setExpires(e)}
+          value={state.expires}
+          onChange={(e) => setState({ expires: e })}
           icon={<ClockIcon size={14} />}
           data={[
             { value: 'never', label: 'Never' },
@@ -94,12 +120,11 @@ export default function useUploadOptions(): [
             { value: '1y', label: '1 year' },
           ]}
         />
-
         <Select
           label='Compression'
           description='The compression level to use when uploading this file. Leave blank for default.'
-          value={compression}
-          onChange={(e) => setCompression(e)}
+          value={state.compression}
+          onChange={(e) => setState({ compression: e })}
           icon={<ImageIcon />}
           data={[
             { value: 'none', label: 'None' },
@@ -108,12 +133,11 @@ export default function useUploadOptions(): [
             { value: '75', label: 'High (75%)' },
           ]}
         />
-
         <Select
           label='Format'
           description="The file name format to use when uploading this file. Leave blank for the server's default."
-          value={format}
-          onChange={(e) => setFormat(e)}
+          value={state.format}
+          onChange={(e) => setState({ format: e })}
           icon={<TypeIcon />}
           data={[
             { value: 'default', label: 'Default' },
@@ -123,31 +147,42 @@ export default function useUploadOptions(): [
             { value: 'UUID', label: 'UUID' },
           ]}
         />
-
         <PasswordInput
           label='Password'
           description='The password required to view this file. Leave blank for no password.'
-          value={password}
-          onChange={(e) => setPassword(e.currentTarget.value)}
+          value={state.password}
+          onChange={(e) => setState({ password: e.currentTarget.value })}
           icon={<KeyIcon />}
         />
-
+        <TextInput
+          label='Override Domain'
+          onChange={handleOD}
+          icon={<GlobeIcon />}
+          description={odState.description}
+          error={odState.error}
+        />
         <Group>
           <Switch
             label='Zero Width'
             description='Whether or not to use zero width characters for the file name.'
-            checked={zeroWidth}
-            onChange={(e) => setZeroWidth(e.currentTarget.checked)}
+            checked={state.zeroWidth}
+            onChange={(e) => setState({ zeroWidth: e.currentTarget.checked })}
           />
 
           <Switch
             label='Embedded'
             description='Whether or not to embed with OG tags for this file.'
-            checked={embedded}
-            onChange={(e) => setEmbedded(e.currentTarget.checked)}
+            checked={state.embedded}
+            onChange={(e) => setState({ embedded: e.currentTarget.checked })}
+          />
+
+          <Switch
+            label='Keep Original Name'
+            description='Whether or not to show the original name when downloading this specific file. This will not change the name format in the URL.'
+            checked={state.originalName}
+            onChange={(e) => setState({ originalName: e.currentTarget.checked })}
           />
         </Group>
-
         <Group grow>
           <Button onClick={() => reset()} color='red'>
             Reset Options
@@ -157,18 +192,47 @@ export default function useUploadOptions(): [
       </Stack>
     </Modal>
   );
+}
+
+export default function useUploadOptions(): [UploadOptionsState, Dispatch<SetStateAction<boolean>>, any] {
+  const [state, setState] = useReducer((state, newState) => ({ ...state, ...newState }), {
+    expires: 'never',
+    password: '',
+    maxViews: 0,
+    compression: 'none',
+    zeroWidth: false,
+    embedded: false,
+    format: 'default',
+    originalName: false,
+    overrideDomain: '',
+  } as UploadOptionsState);
+
+  const [opened, setOpened] = useState(false);
+
+  const reset = () => {
+    setState({
+      expires: 'never',
+      password: '',
+      maxViews: 0,
+      compression: 'none',
+      zeroWidth: false,
+      embedded: false,
+      format: 'default',
+      originalName: false,
+      overrideDomain: '',
+    });
+  };
 
   return [
-    {
-      expires,
-      password,
-      maxViews,
-      compression,
-      zeroWidth,
-      embedded,
-      format,
-    },
+    state,
     setOpened,
-    OptionsModal,
+    <OptionsModal
+      state={state}
+      setState={setState}
+      reset={reset}
+      opened={opened}
+      setOpened={setOpened}
+      key={1}
+    />,
   ];
 }

src/components/pages/Urls/URLCard.tsx

@@ -14,11 +14,18 @@ export default function URLCard({ url }: { url: URLResponse }) {
 
   const copyURL = (u) => {
     clipboard.copy(`${window.location.protocol}//${window.location.host}${u.url}`);
-    showNotification({
-      title: 'Copied to clipboard',
-      message: '',
-      icon: <CopyIcon />,
-    });
+    if (!navigator.clipboard)
+      showNotification({
+        title: 'Unable to copy to clipboard',
+        message: 'Zipline is unable to copy to clipboard due to security reasons.',
+        color: 'red',
+      });
+    else
+      showNotification({
+        title: 'Copied to clipboard',
+        message: '',
+        icon: <CopyIcon />,
+      });
   };
 
   const deleteURL = async (u) => {
@@ -51,9 +58,9 @@ export default function URLCard({ url }: { url: URLResponse }) {
         <Group position='left'>
           <Stack spacing={0}>
             <Title>{url.vanity ?? url.id}</Title>
-            <Tooltip label={new Date(url.created_at).toLocaleString()}>
+            <Tooltip label={new Date(url.createdAt).toLocaleString()}>
               <div>
-                <MutedText size='sm'>Created: {relativeTime(new Date(url.created_at))}</MutedText>
+                <MutedText size='sm'>Created: {relativeTime(new Date(url.createdAt))}</MutedText>
               </div>
             </Tooltip>
             {url.vanity && <MutedText size='sm'>ID: {url.id}</MutedText>}
@@ -70,7 +77,7 @@ export default function URLCard({ url }: { url: URLResponse }) {
             </MutedText>
           </Stack>
         </Group>
-        <Group position='right'>
+        <Stack>
           <ActionIcon href={url.url} component='a' target='_blank'>
             <ExternalLinkIcon />
           </ActionIcon>
@@ -80,7 +87,7 @@ export default function URLCard({ url }: { url: URLResponse }) {
           <ActionIcon aria-label='delete' onClick={() => deleteURL(url)}>
             <TrashIcon />
           </ActionIcon>
-        </Group>
+        </Stack>
       </Group>
     </Card>
   );

src/components/pages/Users/index.tsx

@@ -113,7 +113,7 @@ export default function Users() {
                         <MutedText size='sm'>Administrator: {user.administrator ? 'yes' : 'no'}</MutedText>
                       </Stack>
                     </Group>
-                    <Group position='right'>
+                    <Stack>
                       {user.administrator && !self.superAdmin ? null : (
                         <>
                           <ActionIcon
@@ -130,7 +130,7 @@ export default function Users() {
                           </ActionIcon>
                         </>
                       )}
-                    </Group>
+                    </Stack>
                   </Group>
                 </Card>
               ))

src/lib/config.ts

@@ -1,7 +1,11 @@
-import { Config } from './config/Config';
-import readConfig from './config/readConfig';
-import validateConfig from './config/validateConfig';
+import { Config } from 'config/Config';
+import readConfig from 'config/readConfig';
+import validateConfig from 'config/validateConfig';
 
 if (!global.config) global.config = validateConfig(readConfig());
 
 export default global.config as Config;
+
+declare global {
+  var config: Config;
+}

src/lib/config/Config.ts

@@ -74,15 +74,18 @@ export interface ConfigWebsiteExternalLinks {
 }
 
 export interface ConfigDiscord {
-  url: string;
-  username: string;
-  avatar_url: string;
+  url?: string;
+  username?: string;
+  avatar_url?: string;
 
   upload: ConfigDiscordContent;
   shorten: ConfigDiscordContent;
 }
 
 export interface ConfigDiscordContent {
+  url?: string;
+  username?: string;
+  avatar_url?: string;
   content: string;
   embed: ConfigDiscordEmbed;
 }

src/lib/config/readConfig.ts

@@ -2,8 +2,8 @@ import { parse } from 'dotenv';
 import { expand } from 'dotenv-expand';
 import { existsSync, readFileSync } from 'fs';
 import { resolve } from 'path';
-import Logger from '../logger';
-import { humanToBytes } from '../utils/bytes';
+import Logger from 'lib/logger';
+import { humanToBytes } from 'utils/bytes';
 
 export type ValueType = 'string' | 'number' | 'boolean' | 'array' | 'json-array' | 'human-to-byte' | 'path';
 
@@ -107,6 +107,9 @@ export default function readConfig() {
     map('DISCORD_USERNAME', 'string', 'discord.username'),
     map('DISCORD_AVATAR_URL', 'string', 'discord.avatar_url'),
 
+    map('DISCORD_UPLOAD_URL', 'string', 'discord.upload.url'),
+    map('DISCORD_UPLOAD_USERNAME', 'string', 'discord.upload.username'),
+    map('DISCORD_UPLOAD_AVATAR_URL', 'string', 'discord.upload.avatar_url'),
     map('DISCORD_UPLOAD_CONTENT', 'string', 'discord.upload.content'),
     map('DISCORD_UPLOAD_EMBED_TITLE', 'string', 'discord.upload.embed.title'),
     map('DISCORD_UPLOAD_EMBED_DESCRIPTION', 'string', 'discord.upload.embed.description'),
@@ -116,6 +119,9 @@ export default function readConfig() {
     map('DISCORD_UPLOAD_EMBED_THUMBNAIL', 'boolean', 'discord.upload.embed.thumbnail'),
     map('DISCORD_UPLOAD_EMBED_TIMESTAMP', 'boolean', 'discord.upload.embed.timestamp'),
 
+    map('DISCORD_SHORTEN_URL', 'string', 'discord.shorten.url'),
+    map('DISCORD_SHORTEN_USERNAME', 'string', 'discord.shorten.username'),
+    map('DISCORD_SHORTEN_AVATAR_URL', 'string', 'discord.shorten.avatar_url'),
     map('DISCORD_SHORTEN_CONTENT', 'string', 'discord.shorten.content'),
     map('DISCORD_SHORTEN_EMBED_TITLE', 'string', 'discord.shorten.embed.title'),
     map('DISCORD_SHORTEN_EMBED_DESCRIPTION', 'string', 'discord.shorten.embed.description'),

src/lib/config/validateConfig.ts

@@ -1,11 +1,14 @@
 import { s } from '@sapphire/shapeshift';
 import type { Config } from './Config';
 import { inspect } from 'util';
-import Logger from '../logger';
-import { humanToBytes } from '../utils/bytes';
+import Logger from 'lib/logger';
+import { humanToBytes } from 'utils/bytes';
 
 const discord_content = s
   .object({
+    url: s.string.nullish.default(null),
+    username: s.string.nullish.default(null),
+    avatar_url: s.string.nullish.default(null),
     content: s.string.nullish.default(null),
     embed: s
       .object({
@@ -141,11 +144,9 @@ const validator = s.object({
     }),
   discord: s
     .object({
-      url: s.string,
-      username: s.string.default('Zipline'),
-      avatar_url: s.string.default(
-        'https://raw.githubusercontent.com/diced/zipline/9b60147e112ec5b70170500b85c75ea621f41d03/public/zipline.png'
-      ),
+      url: s.string.nullish.default(null),
+      username: s.string.nullish.default(null),
+      avatar_url: s.string.nullish.default(null),
       upload: discord_content,
       shorten: discord_content,
     })
@@ -249,10 +250,28 @@ export default function validate(config): Config {
       }
     }
 
+    const reserved = ['/view', '/dashboard', '/code', '/folder', '/api', '/auth'];
+    if (reserved.some((r) => validated.uploader.route.startsWith(r))) {
+      throw {
+        errors: [`The uploader route cannot be ${validated.uploader.route}, this is a reserved route.`],
+        show: true,
+      };
+    } else if (reserved.some((r) => validated.urls.route.startsWith(r))) {
+      throw {
+        errors: [`The urls route cannot be ${validated.urls.route}, this is a reserved route.`],
+        show: true,
+      };
+    }
+
     return validated as unknown as Config;
   } catch (e) {
     if (process.env.ZIPLINE_DOCKER_BUILD) return null;
 
+    if (e.show) {
+      Logger.get('config').error('Config is invalid, see below:').error(e.errors.join('\n'));
+      process.exit(1);
+    }
+
     logger.debug(`config error: ${inspect(e, { depth: Infinity })}`);
 
     e.stack = '';

src/lib/datasource.ts

@@ -24,3 +24,7 @@ if (!global.datasource) {
 }
 
 export default global.datasource as Datasource;
+
+declare global {
+  var datasource: Datasource;
+}

src/lib/datasources/Supabase.ts

@@ -1,7 +1,7 @@
 import { Datasource } from '.';
 import { ConfigSupabaseDatasource } from 'lib/config/Config';
-import { guess } from '../mimes';
-import Logger from '../logger';
+import { guess } from 'lib/mimes';
+import Logger from 'lib/logger';
 import { Readable } from 'stream';
 
 export class Supabase extends Datasource {

src/lib/discord.ts

@@ -1,8 +1,8 @@
-import { Image, Url, User } from '@prisma/client';
+import { File, Url, User } from '@prisma/client';
 import config from 'lib/config';
-import { ConfigDiscordContent } from 'lib/config/Config';
-import Logger from './logger';
-import { parseString, ParseValue } from './utils/parser';
+import { ConfigDiscordContent } from 'config/Config';
+import Logger from 'lib/logger';
+import { parseString, ParseValue } from 'utils/parser';
 
 const logger = Logger.get('discord');
 
@@ -11,12 +11,12 @@ export function parseContent(
   args: ParseValue
 ): ConfigDiscordContent & { url: string } {
   return {
-    content: parseString(content.content, args),
+    content: content.content ? parseString(content.content, args) : null,
     embed: content.embed
       ? {
-          title: parseString(content.embed.title, args),
-          description: parseString(content.embed.description, args),
-          footer: parseString(content.embed.footer, args),
+          title: content.embed.title ? parseString(content.embed.title, args) : null,
+          description: content.embed.description ? parseString(content.embed.description, args) : null,
+          footer: content.embed.footer ? parseString(content.embed.footer, args) : null,
           color: content.embed.color,
           thumbnail: content.embed.thumbnail,
           timestamp: content.embed.timestamp,
@@ -27,21 +27,25 @@ export function parseContent(
   };
 }
 
-export async function sendUpload(user: User, image: Image, raw_link: string, link: string) {
+export async function sendUpload(user: User, file: File, raw_link: string, link: string) {
   if (!config.discord.upload) return;
+  if (!config.discord.url && !config.discord.upload.url) return;
 
+  logger.debug(`discord config:\n${JSON.stringify(config.discord)}`);
   const parsed = parseContent(config.discord.upload, {
-    file: image,
+    file,
     user,
     link,
     raw_link,
   });
 
-  const isImage = image.mimetype.startsWith('image/');
+  const isImage = file.mimetype.startsWith('image/');
 
   const body = JSON.stringify({
-    username: config.discord.username,
-    avatar_url: config.discord.avatar_url,
+    username: (config.discord.username ?? config.discord.upload.username) || 'Zipline',
+    avatar_url:
+      (config.discord.avatar_url ?? config.discord.upload.avatar_url) ||
+      'https://raw.githubusercontent.com/diced/zipline/9b60147e112ec5b70170500b85c75ea621f41d03/public/zipline.png',
     content: parsed.content ?? null,
     embeds: parsed.embed
       ? [
@@ -49,7 +53,7 @@ export async function sendUpload(user: User, image: Image, raw_link: string, lin
             title: parsed.embed.title ?? null,
             description: parsed.embed.description ?? null,
             url: parsed.url ?? null,
-            timestamp: parsed.embed.timestamp ? image.created_at.toISOString() : null,
+            timestamp: parsed.embed.timestamp ? file.createdAt.toISOString() : null,
             color: parsed.embed.color ?? null,
             footer: parsed.embed.footer
               ? {
@@ -73,8 +77,8 @@ export async function sendUpload(user: User, image: Image, raw_link: string, lin
       : null,
   });
 
-  logger.debug('attempting to send shorten notification to discord', body);
-  const res = await fetch(config.discord.url, {
+  logger.debug('attempting to send upload notification to discord', body);
+  const res = await fetch(config.discord.url || config.discord.upload.url, {
     method: 'POST',
     body,
     headers: {
@@ -85,7 +89,7 @@ export async function sendUpload(user: User, image: Image, raw_link: string, lin
   if (!res.ok) {
     const text = await res.text();
     logger
-      .error(`Failed to send shorten notification to discord: ${res.status}`)
+      .error(`Failed to send upload notification to discord: ${res.status}`)
       .error(`Received response:\n${text}`);
   }
 
@@ -94,6 +98,7 @@ export async function sendUpload(user: User, image: Image, raw_link: string, lin
 
 export async function sendShorten(user: User, url: Url, link: string) {
   if (!config.discord.shorten) return;
+  if (!config.discord.url && !config.discord.shorten.url) return;
 
   const parsed = parseContent(config.discord.shorten, {
     url,
@@ -102,8 +107,10 @@ export async function sendShorten(user: User, url: Url, link: string) {
   });
 
   const body = JSON.stringify({
-    username: config.discord.username,
-    avatar_url: config.discord.avatar_url,
+    username: (config.discord.username ?? config.discord.shorten.username) || 'Zipline',
+    avatar_url:
+      (config.discord.avatar_url ?? config.discord.shorten.avatar_url) ||
+      'https://raw.githubusercontent.com/diced/zipline/9b60147e112ec5b70170500b85c75ea621f41d03/public/zipline.png',
     content: parsed.content ?? null,
     embeds: parsed.embed
       ? [
@@ -111,7 +118,7 @@ export async function sendShorten(user: User, url: Url, link: string) {
             title: parsed.embed.title ?? null,
             description: parsed.embed.description ?? null,
             url: parsed.url ?? null,
-            timestamp: parsed.embed.timestamp ? url.created_at.toISOString() : null,
+            timestamp: parsed.embed.timestamp ? url.createdAt.toISOString() : null,
             color: parsed.embed.color ?? null,
             footer: parsed.embed.footer
               ? {
@@ -124,7 +131,7 @@ export async function sendShorten(user: User, url: Url, link: string) {
   });
 
   logger.debug('attempting to send shorten notification to discord', body);
-  const res = await fetch(config.discord.url, {
+  const res = await fetch(config.discord.url || config.discord.shorten.url, {
     method: 'POST',
     body,
     headers: {

src/lib/exts.ts

@@ -15,7 +15,7 @@ export default {
   yaml: 'YAML',
   c: 'C',
   cpp: 'C++',
-  csharp: 'C#',
+  cs: 'C#',
   go: 'Go',
   docker: 'Docker',
   toml: 'TOML',
@@ -40,7 +40,6 @@ export default {
 
 export const extToPrismComponent = (ext: string) => {
   // await import(prismjs/components/prism-${extToPrismComponent(ext)}.js)
-
   return {
     md: 'markdown',
     css: 'css',
@@ -57,7 +56,7 @@ export const extToPrismComponent = (ext: string) => {
     yaml: 'yaml',
     c: 'c',
     cpp: 'cpp',
-    csharp: 'csharp',
+    cs: 'csharp',
     go: 'go',
     docker: 'docker',
     toml: 'toml',

src/lib/logger.ts

@@ -1,4 +1,11 @@
-import { blueBright, cyan, red, yellow } from 'colorette';
+const COLORS = {
+  blueBright: (str: string) => `\x1b[34m${str}\x1b[0m`,
+  cyan: (str: string) => `\x1b[36m${str}\x1b[0m`,
+  red: (str: string) => `\x1b[31m${str}\x1b[0m`,
+  yellow: (str: string) => `\x1b[33m${str}\x1b[0m`,
+  gray: (str: string) => `\x1b[90m${str}\x1b[0m`,
+};
+
 import dayjs from 'dayjs';
 
 export enum LoggerLevel {
@@ -10,6 +17,10 @@ export enum LoggerLevel {
 export default class Logger {
   public name: string;
 
+  static filters(): string[] {
+    return (process.env.LOGGER_FILTERS ?? '').split(',').filter((x) => x !== '');
+  }
+
   static get(klass: any) {
     if (typeof klass !== 'function') if (typeof klass !== 'string') throw new Error('not string/function');
 
@@ -26,13 +37,24 @@ export default class Logger {
     return new Logger(`${this.name}::${name}`);
   }
 
+  show(): boolean {
+    const filters = Logger.filters();
+    if (!filters.length) return true;
+
+    return filters.includes(this.name);
+  }
+
   info(...args: any[]): this {
+    if (!this.show()) return this;
+
     process.stdout.write(this.formatMessage(LoggerLevel.INFO, this.name, args.join(' ')));
 
     return this;
   }
 
   error(...args: any[]): this {
+    if (!this.show()) return this;
+
     process.stdout.write(
       this.formatMessage(LoggerLevel.ERROR, this.name, args.map((error) => error.stack ?? error).join(' '))
     );
@@ -41,7 +63,8 @@ export default class Logger {
   }
 
   debug(...args: any[]): this {
-    if (!process.env.DEBUG) return;
+    if (!process.env.DEBUG) return this;
+    if (!this.show()) return this;
 
     process.stdout.write(this.formatMessage(LoggerLevel.DEBUG, this.name, args.join(' ')));
 
@@ -50,17 +73,17 @@ export default class Logger {
 
   formatMessage(level: LoggerLevel, name: string, message: string) {
     const time = dayjs().format('YYYY-MM-DD hh:mm:ss,SSS A');
-    return `${time} ${this.formatLevel(level)} [${blueBright(name)}] ${message}\n`;
+    return `${COLORS.gray(time)} ${this.formatLevel(level)} [${COLORS.blueBright(name)}] ${message}\n`;
   }
 
   formatLevel(level: LoggerLevel) {
     switch (level) {
       case LoggerLevel.INFO:
-        return cyan('info ');
+        return COLORS.cyan('info ');
       case LoggerLevel.ERROR:
-        return red('error');
+        return COLORS.red('error');
       case LoggerLevel.DEBUG:
-        return yellow('debug');
+        return COLORS.yellow('debug');
     }
   }
 }

src/lib/middleware/withOAuth.ts

@@ -56,14 +56,38 @@ export const withOAuth =
 
     const { state } = req.query as { state?: string };
 
-    const existingOauth = await prisma.oAuth.findUnique({
-      where: {
-        provider_oauthId: {
-          provider: provider.toUpperCase() as OauthProviders,
-          oauthId: oauth_resp.user_id,
+    let existingOauth;
+    try {
+      existingOauth = await prisma.oAuth.findUniqueOrThrow({
+        where: {
+          provider_oauthId: {
+            provider: provider.toUpperCase() as OauthProviders,
+            oauthId: oauth_resp.user_id as string,
+          },
         },
-      },
-    });
+      });
+    } catch (e) {
+      logger.debug(`Failed to find existing oauth. Using fallback. ${e}`);
+      if (e.code === 'P2022' || e.code === 'P2025') {
+        const existing = await prisma.user.findFirst({
+          where: {
+            oauth: {
+              some: {
+                provider: provider.toUpperCase() as OauthProviders,
+                username: oauth_resp.username,
+              },
+            },
+          },
+          include: {
+            oauth: true,
+          },
+        });
+        existingOauth = existing?.oauth?.find((o) => o.provider === provider.toUpperCase());
+        if (existingOauth) existingOauth.fallback = true;
+      } else {
+        logger.error(`Failed to find existing oauth. ${e}`);
+      }
+    }
 
     const existingUser = await prisma.user.findFirst({
       where: {
@@ -98,7 +122,7 @@ export const withOAuth =
                 token: oauth_resp.access_token,
                 refresh: oauth_resp.refresh_token || null,
                 username: oauth_resp.username,
-                oauthId: oauth_resp.user_id,
+                oauthId: oauth_resp.user_id as string,
               },
             },
             avatar: oauth_resp.avatar,
@@ -125,7 +149,7 @@ export const withOAuth =
           token: oauth_resp.access_token,
           refresh: oauth_resp.refresh_token || null,
           username: oauth_resp.username,
-          oauthId: oauth_resp.user_id,
+          oauthId: oauth_resp.user_id as string,
         },
       });
 
@@ -133,7 +157,7 @@ export const withOAuth =
       logger.info(`User ${user.username} (${user.id}) logged in via oauth(${provider})`);
 
       return res.redirect('/dashboard');
-    } else if (existingOauth) {
+    } else if ((existingOauth && existingOauth.fallback) || existingOauth) {
       await prisma.oAuth.update({
         where: {
           id: existingOauth!.id,
@@ -142,7 +166,7 @@ export const withOAuth =
           token: oauth_resp.access_token,
           refresh: oauth_resp.refresh_token || null,
           username: oauth_resp.username,
-          oauthId: oauth_resp.user_id,
+          oauthId: oauth_resp.user_id as string,
         },
       });
 
@@ -158,28 +182,35 @@ export const withOAuth =
       return oauthError(`Username ${oauth_resp.username} is already taken, unable to create account.`);
 
     logger.debug('creating new user via oauth');
-    const nuser = await prisma.user.create({
-      data: {
-        username: oauth_resp.username,
-        token: createToken(),
-        oauth: {
-          create: {
-            provider: OauthProviders[provider.toUpperCase()],
-            token: oauth_resp.access_token,
-            refresh: oauth_resp.refresh_token || null,
-            username: oauth_resp.username,
-            oauthId: oauth_resp.user_id,
+    try {
+      const nuser = await prisma.user.create({
+        data: {
+          username: oauth_resp.username,
+          token: createToken(),
+          oauth: {
+            create: {
+              provider: OauthProviders[provider.toUpperCase()],
+              token: oauth_resp.access_token,
+              refresh: oauth_resp.refresh_token || null,
+              username: oauth_resp.username,
+              oauthId: oauth_resp.user_id as string,
+            },
           },
+          avatar: oauth_resp.avatar,
         },
-        avatar: oauth_resp.avatar,
-      },
-    });
+      });
 
-    logger.debug(`created user ${JSON.stringify(nuser)} via oauth(${provider})`);
-    logger.info(`Created user ${nuser.username} via oauth(${provider})`);
+      logger.debug(`created user ${JSON.stringify(nuser)} via oauth(${provider})`);
+      logger.info(`Created user ${nuser.username} via oauth(${provider})`);
 
-    res.setUserCookie(nuser.id);
-    logger.info(`User ${nuser.username} (${nuser.id}) logged in via oauth(${provider})`);
+      res.setUserCookie(nuser.id);
+      logger.info(`User ${nuser.username} (${nuser.id}) logged in via oauth(${provider})`);
 
-    return res.redirect('/dashboard');
+      return res.redirect('/dashboard');
+    } catch (e) {
+      if (e.code === 'P2002') {
+        logger.debug(`account already linked with ${provider}`);
+        return oauthError('This account is already linked with another user.');
+      } else throw e;
+    }
   };

src/lib/middleware/withZipline.ts

@@ -18,9 +18,19 @@ export interface NextApiFile {
   size: number;
 }
 
-export interface UserExtended extends User {
+export interface UserOauth extends User {
   oauth: OAuth[];
 }
+export type UserExtended = UserOauth & {
+  embed: UserEmbed;
+};
+
+export interface UserEmbed {
+  title?: string;
+  siteName?: string;
+  description?: string;
+  color?: string;
+}
 
 export type NextApiReq = NextApiRequest & {
   user: () => Promise<UserExtended | null>;
@@ -166,7 +176,7 @@ export const withZipline =
             include: { oauth: true },
           });
 
-          if (user) return user;
+          if (user) return user as UserExtended;
         }
 
         const userId = req.getCookie('user');
@@ -182,7 +192,7 @@ export const withZipline =
         });
 
         if (!user) return null;
-        return user;
+        return user as UserExtended;
       } catch (e) {
         Logger.get('withZipline').debug(e.message);
         if (e.code && e.code === 'ERR_CRYPTO_TIMING_SAFE_EQUAL_LENGTH') {

src/lib/prisma.ts

@@ -5,3 +5,7 @@ if (!global.prisma) {
 }
 
 export default global.prisma as PrismaClient;
+
+declare global {
+  var prisma: PrismaClient;
+}

src/lib/queries/files.ts

@@ -2,9 +2,9 @@ import { useMutation, useQuery } from '@tanstack/react-query';
 import queryClient from './client';
 
 export type UserFilesResponse = {
-  created_at: string;
-  expires_at?: string;
-  file: string;
+  createdAt: Date;
+  expiresAt?: Date;
+  name: string;
   mimetype: string;
   id: string;
   favorite: boolean;
@@ -23,7 +23,8 @@ export const useFiles = (query: { [key: string]: string } = {}) => {
           ? data
           : data.map((x) => ({
               ...x,
-              created_at: new Date(x.created_at).toLocaleString(),
+              createdAt: new Date(x.createdAt),
+              expiresAt: x.expiresAt ? new Date(x.expiresAt) : null,
             }))
       );
   });
@@ -39,7 +40,13 @@ export const usePaginatedFiles = (page?: number, filter: string = 'media', favor
   return useQuery<UserFilesResponse[]>(['files', queryString], async () => {
     return fetch('/api/user/paged?' + queryString)
       .then((res) => res.json() as Promise<UserFilesResponse[]>)
-      .then((data) => data.map((x) => ({ ...x, created_at: new Date(x.created_at).toLocaleString() })));
+      .then((data) =>
+        data.map((x) => ({
+          ...x,
+          createdAt: new Date(x.createdAt),
+          expiresAt: x.expiresAt ? new Date(x.expiresAt) : null,
+        }))
+      );
   });
 };
 
@@ -50,7 +57,8 @@ export const useRecent = (filter?: string) => {
       .then((data) =>
         data.map((x) => ({
           ...x,
-          created_at: new Date(x.created_at).toLocaleString(),
+          createdAt: new Date(x.createdAt),
+          expiresAt: x.expiresAt ? new Date(x.expiresAt) : null,
         }))
       );
   });

src/lib/queries/folders.ts

@@ -0,0 +1,46 @@
+import { useMutation, useQuery } from '@tanstack/react-query';
+import queryClient from './client';
+import { UserFilesResponse } from './files';
+
+export type UserFoldersResponse = {
+  id: number;
+  name: string;
+  userId: number;
+  createdAt: string;
+  updatedAt: string;
+  public: boolean;
+  files?: UserFilesResponse[];
+};
+
+export const useFolders = (query: { [key: string]: string } = {}) => {
+  const queryBuilder = new URLSearchParams(query);
+  const queryString = queryBuilder.toString();
+
+  return useQuery<UserFoldersResponse[]>(['folders', queryString], async () => {
+    return fetch('/api/user/folders?' + queryString)
+      .then((res) => res.json() as Promise<UserFoldersResponse[]>)
+      .then((data) =>
+        data.map((x) => ({
+          ...x,
+          createdAt: new Date(x.createdAt).toLocaleString(),
+          updatedAt: new Date(x.updatedAt).toLocaleString(),
+        }))
+      );
+  });
+};
+
+export const useFolder = (id: string, withFiles: boolean = false) => {
+  return useQuery<UserFoldersResponse>(['folder', id], async () => {
+    return fetch('/api/user/folders/' + id + (withFiles ? '?files=true' : ''))
+      .then((res) => res.json() as Promise<UserFoldersResponse>)
+      .then((data) => ({
+        ...data,
+        createdAt: new Date(data.createdAt).toLocaleString(),
+        updatedAt: new Date(data.updatedAt).toLocaleString(),
+      }));
+  });
+};
+
+export function invalidateFolders() {
+  return queryClient.invalidateQueries(['folders']);
+}

src/lib/queries/stats.ts

@@ -6,7 +6,7 @@ type StatsTypesCount = {
 };
 
 export type Stats = {
-  created_at: string;
+  createdAt: string;
   id: number;
   data: {
     count: number;

src/lib/queries/url.ts

@@ -2,7 +2,7 @@ import { useMutation, useQuery } from '@tanstack/react-query';
 import queryClient from './client';
 
 export type URLResponse = {
-  created_at: string;
+  createdAt: string;
   destination: string;
   id: string;
   url: string;

src/lib/queries/version.ts

@@ -1,7 +1,18 @@
 import { useQuery } from '@tanstack/react-query';
 
+export type VersionResponse = {
+  isUpstream: boolean;
+  update?: boolean;
+  updateToType?: keyof VersionResponse['versions'];
+  versions: {
+    stable: string;
+    upstream: string;
+    current: string;
+  };
+};
+
 export const useVersion = () => {
-  return useQuery<{ local: string; upstream: string }>(
+  return useQuery<VersionResponse>(
     ['version'],
     async () => {
       return fetch('/api/version').then((res) => res.json());

src/lib/util.ts

@@ -1,4 +1,4 @@
-import { InvisibleImage, InvisibleUrl } from '@prisma/client';
+import { InvisibleFile, InvisibleUrl } from '@prisma/client';
 import { hash, verify } from 'argon2';
 import { randomBytes } from 'crypto';
 import { readdir, stat } from 'fs/promises';
@@ -60,11 +60,11 @@ export function randomInvis(length: number) {
     .concat(invisibleCharset[0]);
 }
 
-export function createInvisImage(length: number, imageId: number) {
-  const retry = async (): Promise<InvisibleImage> => {
+export function createInvisImage(length: number, fileId: number) {
+  const retry = async (): Promise<InvisibleFile> => {
     const invis = randomInvis(length);
 
-    const existing = await prisma.invisibleImage.findUnique({
+    const existing = await prisma.invisibleFile.findUnique({
       where: {
         invis,
       },
@@ -72,10 +72,10 @@ export function createInvisImage(length: number, imageId: number) {
 
     if (existing) return retry();
 
-    const inv = await prisma.invisibleImage.create({
+    const inv = await prisma.invisibleFile.create({
       data: {
         invis,
-        imageId,
+        fileId,
       },
     });
 

src/lib/utils/exif.ts

@@ -1,4 +1,4 @@
-import { Image } from '@prisma/client';
+import { File } from '@prisma/client';
 import { createWriteStream } from 'fs';
 import { ExifTool, Tags } from 'exiftool-vendored';
 import datasource from 'lib/datasource';
@@ -32,12 +32,12 @@ export async function readMetadata(filePath: string): Promise<Tags> {
   return exif;
 }
 
-export async function removeGPSData(image: Image): Promise<void> {
+export async function removeGPSData(image: File): Promise<void> {
   const exiftool = new ExifTool({ cleanupChildProcs: false });
-  const file = join(tmpdir(), `zipline-exif-remove-${Date.now()}-${image.file}`);
+  const file = join(tmpdir(), `zipline-exif-remove-${Date.now()}-${image.name}`);
   logger.debug(`writing temp file to remove GPS data: ${file}`);
 
-  const stream = await datasource.get(image.file);
+  const stream = await datasource.get(image.name);
   const writeStream = createWriteStream(file);
   stream.pipe(writeStream);
 
@@ -68,7 +68,6 @@ export async function removeGPSData(image: Image): Promise<void> {
     GPSLongitude: null,
     GPSLongitudeRef: null,
     GPSMapDatum: null,
-    GPSMeasureMode: null,
     GPSPosition: null,
     GPSProcessingMethod: null,
     GPSSatellites: null,
@@ -80,9 +79,9 @@ export async function removeGPSData(image: Image): Promise<void> {
     GPSTrackRef: null,
   });
 
-  logger.debug(`reading file to upload to datasource: ${file} -> ${image.file}`);
+  logger.debug(`reading file to upload to datasource: ${file} -> ${image.name}`);
   const buffer = await readFile(file);
-  await datasource.save(image.file, buffer);
+  await datasource.save(image.name, buffer);
 
   logger.debug(`removing temp file: ${file}`);
   await unlink(file);

src/lib/utils/parser.ts

@@ -1,7 +1,7 @@
-import type { Image, User, Url } from '@prisma/client';
+import type { File, User, Url } from '@prisma/client';
 
 export type ParseValue = {
-  file?: Image;
+  file?: File;
   url?: Url;
   user?: User;
 
@@ -10,6 +10,7 @@ export type ParseValue = {
 };
 
 export function parseString(str: string, value: ParseValue) {
+  if (!str) return null;
   str = str.replace(/\{link\}/gi, value.link).replace(/\{raw_link\}/gi, value.raw_link);
 
   const re = /\{(?<type>file|url|user)\.(?<prop>\w+)(::(?<mod>\w+))?\}/gi;

src/lib/utils/urls.ts

@@ -0,0 +1,3 @@
+export function formatRootUrl(route: string, src: string) {
+  return `${route === '/' ? '' : route}/${encodeURI(src)}`;
+}

src/pages/api/admin/clear.ts

@@ -7,8 +7,18 @@ const logger = Logger.get('admin');
 
 async function handler(req: NextApiReq, res: NextApiRes, user: UserExtended) {
   try {
-    const { count } = await prisma.image.deleteMany({});
-    logger.info(`User ${user.username} (${user.id}) cleared the database of ${count} images`);
+    const { datasource, orphaned } = req.body;
+    if (orphaned) {
+      const { count } = await prisma.file.deleteMany({
+        where: {
+          userId: null,
+        },
+      });
+      logger.info(`User ${user.username} (${user.id}) cleared the database of ${count} orphaned files`);
+      return res.json({ message: 'cleared storage (orphaned only)' });
+    }
+    const { count } = await prisma.file.deleteMany({});
+    logger.info(`User ${user.username} (${user.id}) cleared the database of ${count} files`);
 
     if (req.body.datasource) {
       await datasource.clear();

src/pages/api/auth/create.ts

@@ -13,9 +13,7 @@ const logger = Logger.get('user');
 async function handler(req: NextApiReq, res: NextApiRes) {
   // handle invites
   if (req.body.code) {
-    if (!config.features.invites && req.body.code) return res.badRequest('invites are disabled');
-    if (!config.features.user_registration && !req.body.code)
-      return res.badRequest('user registration is disabled');
+    if (!config.features.invites) return res.badRequest('invites are disabled');
 
     const { code, username, password } = req.body as {
       code?: string;

src/pages/api/auth/image.ts

@@ -8,24 +8,26 @@ import { extname } from 'path';
 async function handler(req: NextApiReq, res: NextApiRes) {
   const { id, password } = req.query;
 
-  const image = await prisma.image.findFirst({
+  const file = await prisma.file.findFirst({
     where: {
       id: Number(id),
     },
   });
 
-  if (!image) return res.notFound('image not found');
+  if (!file) return res.notFound('image not found');
   if (!password) return res.badRequest('no password provided');
 
-  const valid = await checkPassword(password as string, image.password);
+  const decoded = decodeURIComponent(password as string);
+
+  const valid = await checkPassword(decoded, file.password);
   if (!valid) return res.badRequest('wrong password');
 
-  const data = await datasource.get(image.file);
+  const data = await datasource.get(file.name);
   if (!data) return res.notFound('image not found');
 
-  const size = await datasource.size(image.file);
+  const size = await datasource.size(file.name);
 
-  const mimetype = await guess(extname(image.file));
+  const mimetype = await guess(extname(file.name));
   res.setHeader('Content-Type', mimetype);
   res.setHeader('Content-Length', size);
 

src/pages/api/auth/invite.ts

@@ -10,12 +10,12 @@ async function handler(req: NextApiReq, res: NextApiRes, user: UserExtended) {
   if (!config.features.invites) return res.badRequest('invites are disabled');
 
   if (req.method === 'POST') {
-    const { expires_at, count } = req.body as {
-      expires_at: string;
+    const { expiresAt, count } = req.body as {
+      expiresAt: string;
       count: number;
     };
 
-    const expiry = expires_at ? new Date(expires_at) : null;
+    const expiry = expiresAt ? new Date(expiresAt) : null;
     if (expiry) {
       if (!expiry.getTime()) return res.badRequest('invalid date');
       if (expiry.getTime() < Date.now()) return res.badRequest('date is in the past');
@@ -28,7 +28,7 @@ async function handler(req: NextApiReq, res: NextApiRes, user: UserExtended) {
         data.push({
           code: randomChars(config.features.invites_length),
           createdById: user.id,
-          expires_at: expiry,
+          expiresAt: expiry,
         });
       }
 
@@ -48,7 +48,7 @@ async function handler(req: NextApiReq, res: NextApiRes, user: UserExtended) {
         data: {
           code: randomChars(config.features.invites_length),
           createdById: user.id,
-          expires_at: expiry,
+          expiresAt: expiry,
         },
       });
 
@@ -78,7 +78,7 @@ async function handler(req: NextApiReq, res: NextApiRes, user: UserExtended) {
   } else {
     const invites = await prisma.invite.findMany({
       orderBy: {
-        created_at: 'desc',
+        createdAt: 'desc',
       },
     });
 

src/pages/api/auth/register.ts

@@ -0,0 +1,66 @@
+import { readFile } from 'fs/promises';
+import config from 'lib/config';
+import Logger from 'lib/logger';
+import { NextApiReq, NextApiRes, withZipline } from 'lib/middleware/withZipline';
+import { guess } from 'lib/mimes';
+import prisma from 'lib/prisma';
+import { createToken, hashPassword } from 'lib/util';
+import { jsonUserReplacer } from 'lib/utils/client';
+import { extname } from 'path';
+
+const logger = Logger.get('user');
+
+async function handler(req: NextApiReq, res: NextApiRes) {
+  if (!config.features.user_registration) return res.badRequest('user registration is disabled');
+
+  const { username, password, administrator } = req.body as {
+    username: string;
+    password: string;
+    administrator: boolean;
+  };
+
+  if (!username) return res.badRequest('no username');
+  if (!password) return res.badRequest('no password');
+
+  const existing = await prisma.user.findFirst({
+    where: {
+      username,
+    },
+  });
+  if (existing) return res.badRequest('user exists');
+
+  const hashed = await hashPassword(password);
+
+  let avatar;
+  if (config.features.default_avatar) {
+    logger.debug(`using default avatar ${config.features.default_avatar}`);
+
+    const buf = await readFile(config.features.default_avatar);
+    const mimetype = await guess(extname(config.features.default_avatar));
+    logger.debug(`guessed mimetype ${mimetype} for ${config.features.default_avatar}`);
+
+    avatar = `data:${mimetype};base64,${buf.toString('base64')}`;
+  }
+
+  const newUser = await prisma.user.create({
+    data: {
+      password: hashed,
+      username,
+      token: createToken(),
+      administrator,
+      avatar,
+    },
+  });
+
+  logger.debug(`registered user ${JSON.stringify(newUser, jsonUserReplacer)}`);
+
+  delete newUser.password;
+
+  logger.info(`User ${newUser.username} (${newUser.id}) registered`);
+
+  return res.json(newUser);
+}
+
+export default withZipline(handler, {
+  methods: ['POST'],
+});

src/pages/api/exif.ts

@@ -17,7 +17,7 @@ async function handler(req: NextApiReq, res: NextApiRes, user: UserExtended) {
   const { id } = req.query as { id: string };
   if (!id) return res.badRequest('no id');
 
-  const image = await prisma.image.findFirst({
+  const image = await prisma.file.findFirst({
     where: {
       id: Number(id),
       userId: user.id,
@@ -27,11 +27,11 @@ async function handler(req: NextApiReq, res: NextApiRes, user: UserExtended) {
   if (!image) return res.notFound('image not found');
 
   logger.info(
-    `${user.username} (${user.id}) requested to read exif metadata for image ${image.file} (${image.id})`
+    `${user.username} (${user.id}) requested to read exif metadata for image ${image.name} (${image.id})`
   );
 
   if (config.datasource.type === 'local') {
-    const filePath = join(config.datasource.local.directory, image.file);
+    const filePath = join(config.datasource.local.directory, image.name);
     logger.debug(`attemping to read exif metadata from ${filePath}`);
 
     if (!existsSync(filePath)) return res.notFound('image not found on fs');
@@ -41,10 +41,10 @@ async function handler(req: NextApiReq, res: NextApiRes, user: UserExtended) {
 
     return res.json(data);
   } else {
-    const file = join(tmpdir(), `zipline-exif-read-${Date.now()}-${image.file}`);
+    const file = join(tmpdir(), `zipline-exif-read-${Date.now()}-${image.name}`);
     logger.debug(`writing temp file to view metadata: ${file}`);
 
-    const stream = await datasource.get(image.file);
+    const stream = await datasource.get(image.name);
     const writeStream = createWriteStream(file);
     stream.pipe(writeStream);
 

src/pages/api/shorten.ts

@@ -8,7 +8,7 @@ import { createInvisURL, randomChars } from 'lib/util';
 const logger = Logger.get('shorten');
 
 async function handler(req: NextApiReq, res: NextApiRes) {
-  if (!req.headers.authorization) return res.badRequest('no authorization');
+  if (!req.headers.authorization) return res.forbidden('no authorization');
 
   const user = await prisma.user.findFirst({
     where: {
@@ -20,6 +20,8 @@ async function handler(req: NextApiReq, res: NextApiRes) {
   if (!req.body) return res.badRequest('no body');
   if (!req.body.url) return res.badRequest('no url');
 
+  if (req.body.vanity && req.body.vanity.trim().length === 0) return res.badRequest('vanity is empty');
+
   const maxUrlViews = req.headers['max-views'] ? Number(req.headers['max-views']) : null;
   if (isNaN(maxUrlViews)) return res.badRequest('invalid max views (invalid number)');
   if (maxUrlViews < 0) return res.badRequest('invalid max views (max views < 0)');
@@ -54,20 +56,30 @@ async function handler(req: NextApiReq, res: NextApiRes) {
 
   logger.info(`User ${user.username} (${user.id}) shortenned a url ${url.destination} (${url.id})`);
 
+  let domain;
+  if (req.headers['override-domain']) {
+    domain = `${zconfig.core.return_https ? 'https' : 'http'}://${req.headers['override-domain']}`;
+  } else if (user.domains.length) {
+    domain = user.domains[Math.floor(Math.random() * user.domains.length)];
+  } else {
+    domain = `${zconfig.core.return_https ? 'https' : 'http'}://${req.headers.host}`;
+  }
+
+  const responseUrl = `${domain}${zconfig.urls.route === '/' ? '/' : zconfig.urls.route + '/'}${
+    req.body.vanity ? encodeURI(req.body.vanity) : invis ? invis.invis : url.id
+  }`;
+
   if (config.discord?.shorten) {
-    await sendShorten(
-      user,
-      url,
-      `${zconfig.core.return_https ? 'https' : 'http'}://${req.headers.host}${zconfig.urls.route}/${
-        req.body.vanity ? req.body.vanity : invis ? invis.invis : url.id
-      }`
-    );
+    await sendShorten(user, url, responseUrl);
+  }
+
+  if (req.headers['no-json']) {
+    res.setHeader('Content-Type', 'text/plain');
+    return res.end(responseUrl);
   }
 
   return res.json({
-    url: `${zconfig.core.return_https ? 'https' : 'http'}://${req.headers.host}${zconfig.urls.route}/${
-      req.body.vanity ? req.body.vanity : invis ? invis.invis : url.id
-    }`,
+    url: responseUrl,
   });
 }
 

src/pages/api/stats.ts

@@ -27,16 +27,16 @@ async function handler(req: NextApiReq, res: NextApiRes, user: UserExtended) {
     let stats: Stats[] = await prisma.$queryRaw`
       SELECT *
       FROM "Stats" as t JOIN
-            (SELECT MAX(t2."created_at") as max_timestamp
+            (SELECT MAX(t2."createdAt") as max_timestamp
               FROM "Stats" t2
-              GROUP BY date(t2."created_at")
+              GROUP BY date(t2."createdAt")
             ) t2
-            ON t."created_at" = t2.max_timestamp
-      ORDER BY t."created_at" DESC
+            ON t."createdAt" = t2.max_timestamp
+      ORDER BY t."createdAt" DESC
       LIMIT ${amount}
     `;
 
-    if (config.website.show_files_per_user) {
+    if (!config.website.show_files_per_user) {
       stats = stats.map((stat) => {
         (stat.data as any).count_by_user = [];
         return stat;

src/pages/api/upload.ts

@@ -1,4 +1,4 @@
-import { ImageFormat, InvisibleImage } from '@prisma/client';
+import { FileNameFormat, InvisibleFile } from '@prisma/client';
 import { randomUUID } from 'crypto';
 import dayjs from 'dayjs';
 import { readdir, readFile, unlink, writeFile } from 'fs/promises';
@@ -37,15 +37,15 @@ async function handler(req: NextApiReq, res: NextApiRes) {
     });
   });
 
-  const response: { files: string[]; expires_at?: Date; removed_gps?: boolean } = { files: [] };
-  const expires_at = req.headers['expires-at'] as string;
+  const response: { files: string[]; expiresAt?: Date; removed_gps?: boolean } = { files: [] };
+  const expiresAt = req.headers['expires-at'] as string;
   let expiry: Date;
 
-  if (expires_at) {
-    expiry = parseExpiry(expires_at);
+  if (expiresAt) {
+    expiry = parseExpiry(expiresAt);
     if (!expiry) return res.badRequest('invalid date');
     else {
-      response.expires_at = expiry;
+      response.expiresAt = expiry;
     }
   }
 
@@ -55,7 +55,7 @@ async function handler(req: NextApiReq, res: NextApiRes) {
   }
 
   const rawFormat = ((req.headers.format || '') as string).toUpperCase() || zconfig.uploader.default_format;
-  const format: ImageFormat = Object.keys(ImageFormat).includes(rawFormat) && ImageFormat[rawFormat];
+  const format: FileNameFormat = Object.keys(FileNameFormat).includes(rawFormat) && FileNameFormat[rawFormat];
 
   const imageCompressionPercent = req.headers['image-compression-percent']
     ? Number(req.headers['image-compression-percent'])
@@ -127,16 +127,16 @@ async function handler(req: NextApiReq, res: NextApiRes) {
       let fileName: string;
 
       switch (format) {
-        case ImageFormat.RANDOM:
+        case FileNameFormat.RANDOM:
           fileName = randomChars(zconfig.uploader.length);
           break;
-        case ImageFormat.DATE:
+        case FileNameFormat.DATE:
           fileName = dayjs().format(zconfig.uploader.format_date);
           break;
-        case ImageFormat.UUID:
+        case FileNameFormat.UUID:
           fileName = randomUUID({ disableEntropyCache: true });
           break;
-        case ImageFormat.NAME:
+        case FileNameFormat.NAME:
           fileName = filename.split('.')[0];
           break;
         default:
@@ -150,57 +150,55 @@ async function handler(req: NextApiReq, res: NextApiRes) {
       }
 
       const compressionUsed = imageCompressionPercent && mimetype.startsWith('image/');
-      let invis: InvisibleImage;
+      let invis: InvisibleFile;
 
-      const file = await prisma.image.create({
+      const file = await prisma.file.create({
         data: {
-          file: `${fileName}${compressionUsed ? '.jpg' : `${ext ? '.' : ''}${ext}`}`,
+          name: `${fileName}${compressionUsed ? '.jpg' : `${ext ? '.' : ''}${ext}`}`,
           mimetype,
           userId: user.id,
           embed: !!req.headers.embed,
           format,
           password,
-          expires_at: expiry,
+          expiresAt: expiry,
           maxViews: fileMaxViews,
+          originalName: req.headers['original-name'] ? filename ?? null : null,
         },
       });
 
       if (req.headers.zws) invis = await createInvisImage(zconfig.uploader.length, file.id);
 
-      await datasource.save(file.file, Buffer.from(chunks));
+      await datasource.save(file.name, Buffer.from(chunks));
 
-      logger.info(`User ${user.username} (${user.id}) uploaded ${file.file} (${file.id}) (chunked)`);
-      if (user.domains.length) {
-        const domain = user.domains[Math.floor(Math.random() * user.domains.length)];
-        response.files.push(
-          `${domain}${zconfig.uploader.route === '/' ? '' : zconfig.uploader.route}/${
-            invis ? invis.invis : file.file
-          }`
-        );
+      logger.info(`User ${user.username} (${user.id}) uploaded ${file.name} (${file.id}) (chunked)`);
+      let domain;
+      if (req.headers['override-domain']) {
+        domain = `${zconfig.core.return_https ? 'https' : 'http'}://${req.headers['override-domain']}`;
+      } else if (user.domains.length) {
+        domain = user.domains[Math.floor(Math.random() * user.domains.length)];
       } else {
-        response.files.push(
-          `${zconfig.core.return_https ? 'https' : 'http'}://${req.headers.host}${
-            zconfig.uploader.route === '/' ? '' : zconfig.uploader.route
-          }/${invis ? invis.invis : file.file}`
-        );
+        domain = `${zconfig.core.return_https ? 'https' : 'http'}://${req.headers.host}`;
       }
 
+      const responseUrl = `${domain}${zconfig.uploader.route === '/' ? '/' : zconfig.uploader.route + '/'}${
+        invis ? invis.invis : encodeURI(file.name)
+      }`;
+
+      response.files.push(responseUrl);
+
       if (zconfig.discord?.upload) {
-        await sendUpload(
-          user,
-          file,
-          `${zconfig.core.return_https ? 'https' : 'http'}://${req.headers.host}/r/${
-            invis ? invis.invis : file.file
-          }`,
-          `${zconfig.core.return_https ? 'https' : 'http'}://${req.headers.host}${
-            zconfig.uploader.route === '/' ? '' : zconfig.uploader.route
-          }/${invis ? invis.invis : file.file}`
-        );
+        await sendUpload(user, file, `${domain}/r/${invis ? invis.invis : file.name}`, responseUrl);
       }
 
       if (zconfig.exif.enabled && zconfig.exif.remove_gps && mimetype.startsWith('image/')) {
-        await removeGPSData(file);
-        response.removed_gps = true;
+        try {
+          await removeGPSData(file);
+          response.removed_gps = true;
+        } catch (e) {
+          logger.error(`Failed to remove GPS data from ${file.name} (${file.id}) - ${e.message}`);
+
+          response.removed_gps = false;
+        }
       }
 
       return res.json(response);
@@ -255,19 +253,30 @@ async function handler(req: NextApiReq, res: NextApiRes) {
     let fileName: string;
 
     switch (format) {
-      case ImageFormat.RANDOM:
+      case FileNameFormat.RANDOM:
         fileName = randomChars(zconfig.uploader.length);
         break;
-      case ImageFormat.DATE:
+      case FileNameFormat.DATE:
         fileName = dayjs().format(zconfig.uploader.format_date);
         break;
-      case ImageFormat.UUID:
+      case FileNameFormat.UUID:
         fileName = randomUUID({ disableEntropyCache: true });
         break;
-      case ImageFormat.NAME:
+      case FileNameFormat.NAME:
         fileName = file.originalname.split('.')[0];
         break;
       default:
+        if (req.headers['x-zipline-filename']) {
+          fileName = req.headers['x-zipline-filename'] as string;
+          const existing = await prisma.file.findFirst({
+            where: {
+              name: fileName,
+            },
+          });
+          if (existing) return res.badRequest(`file[${i}]: filename already exists: '${fileName}'`);
+
+          break;
+        }
         fileName = randomChars(zconfig.uploader.length);
         break;
     }
@@ -278,66 +287,63 @@ async function handler(req: NextApiReq, res: NextApiRes) {
     }
 
     const compressionUsed = imageCompressionPercent && file.mimetype.startsWith('image/');
-    let invis: InvisibleImage;
-    const image = await prisma.image.create({
+    let invis: InvisibleFile;
+    const fileUpload = await prisma.file.create({
       data: {
-        file: `${fileName}${compressionUsed ? '.jpg' : `${ext ? '.' : ''}${ext}`}`,
+        name: `${fileName}${compressionUsed ? '.jpg' : `${ext ? '.' : ''}${ext}`}`,
         mimetype: req.headers.uploadtext ? 'text/plain' : compressionUsed ? 'image/jpeg' : file.mimetype,
         userId: user.id,
         embed: !!req.headers.embed,
         format,
         password,
-        expires_at: expiry,
+        expiresAt: expiry,
         maxViews: fileMaxViews,
+        originalName: req.headers['original-name'] ? file.originalname ?? null : null,
+        size: file.size,
       },
     });
 
-    if (req.headers.zws) invis = await createInvisImage(zconfig.uploader.length, image.id);
+    if (req.headers.zws) invis = await createInvisImage(zconfig.uploader.length, fileUpload.id);
 
     if (compressionUsed) {
       const buffer = await sharp(file.buffer).jpeg({ quality: imageCompressionPercent }).toBuffer();
-      await datasource.save(image.file, buffer);
+      await datasource.save(fileUpload.name, buffer);
       logger.info(
         `User ${user.username} (${user.id}) compressed image from ${file.buffer.length} -> ${buffer.length} bytes`
       );
     } else {
-      await datasource.save(image.file, file.buffer);
+      await datasource.save(fileUpload.name, file.buffer);
     }
 
-    logger.info(`User ${user.username} (${user.id}) uploaded ${image.file} (${image.id})`);
-    if (user.domains.length) {
-      const domain = user.domains[Math.floor(Math.random() * user.domains.length)];
-      response.files.push(
-        `${domain}${zconfig.uploader.route === '/' ? '' : zconfig.uploader.route}/${
-          invis ? invis.invis : image.file
-        }`
-      );
+    logger.info(`User ${user.username} (${user.id}) uploaded ${fileUpload.name} (${fileUpload.id})`);
+    let domain;
+    if (req.headers['override-domain']) {
+      domain = `${zconfig.core.return_https ? 'https' : 'http'}://${req.headers['override-domain']}`;
+    } else if (user.domains.length) {
+      domain = user.domains[Math.floor(Math.random() * user.domains.length)];
     } else {
-      response.files.push(
-        `${zconfig.core.return_https ? 'https' : 'http'}://${req.headers.host}${
-          zconfig.uploader.route === '/' ? '' : zconfig.uploader.route
-        }/${invis ? invis.invis : image.file}`
-      );
+      domain = `${zconfig.core.return_https ? 'https' : 'http'}://${req.headers.host}`;
     }
 
-    logger.debug(`sent response: ${JSON.stringify(response)}`);
+    const responseUrl = `${domain}${zconfig.uploader.route === '/' ? '/' : zconfig.uploader.route + '/'}${
+      invis ? invis.invis : encodeURI(fileUpload.name)
+    }`;
+
+    response.files.push(responseUrl);
 
     if (zconfig.discord?.upload) {
-      await sendUpload(
-        user,
-        image,
-        `${zconfig.core.return_https ? 'https' : 'http'}://${req.headers.host}/r/${
-          invis ? invis.invis : image.file
-        }`,
-        `${zconfig.core.return_https ? 'https' : 'http'}://${req.headers.host}${
-          zconfig.uploader.route === '/' ? '' : zconfig.uploader.route
-        }/${invis ? invis.invis : image.file}`
-      );
+      await sendUpload(user, fileUpload, `${domain}/r/${invis ? invis.invis : fileUpload.name}`, responseUrl);
     }
 
-    if (zconfig.exif.enabled && zconfig.exif.remove_gps && image.mimetype.startsWith('image/')) {
-      await removeGPSData(image);
-      response.removed_gps = true;
+    if (zconfig.exif.enabled && zconfig.exif.remove_gps && fileUpload.mimetype.startsWith('image/')) {
+      try {
+        await removeGPSData(fileUpload);
+        response.removed_gps = true;
+      } catch (e) {
+        logger.error(`Failed to remove GPS data from ${fileUpload.name} (${fileUpload.id}) - ${e.message}`);
+
+        response.removed_gps = false;
+      }
     }
   }
 
@@ -363,6 +369,11 @@ async function handler(req: NextApiReq, res: NextApiRes) {
     }
   }
 
+  if (req.headers['no-json']) {
+    res.setHeader('Content-Type', 'text/plain');
+    return res.end(response.files.join(','));
+  }
+
   return res.json(response);
 }
 

src/pages/api/user/[id].ts

@@ -31,7 +31,7 @@ async function handler(req: NextApiReq, res: NextApiRes, user: UserExtended) {
     if (req.body.delete_files) {
       logger.debug(`attempting to delete ${newTarget.id}'s files`);
 
-      const files = await prisma.image.findMany({
+      const files = await prisma.file.findMany({
         where: {
           userId: newTarget.id,
         },
@@ -39,13 +39,13 @@ async function handler(req: NextApiReq, res: NextApiRes, user: UserExtended) {
 
       for (let i = 0; i !== files.length; ++i) {
         try {
-          await datasource.delete(files[i].file);
+          await datasource.delete(files[i].name);
         } catch {
-          logger.debug(`failed to find file ${files[i].file} to delete`);
+          logger.debug(`failed to find file ${files[i].name} to delete`);
         }
       }
 
-      const { count } = await prisma.image.deleteMany({
+      const { count } = await prisma.file.deleteMany({
         where: {
           userId: newTarget.id,
         },
@@ -101,22 +101,10 @@ async function handler(req: NextApiReq, res: NextApiRes, user: UserExtended) {
         data: { avatar: req.body.avatar },
       });
 
-    if (req.body.embedTitle)
+    if (req.body.embed)
       await prisma.user.update({
         where: { id: target.id },
-        data: { embedTitle: req.body.embedTitle },
-      });
-
-    if (req.body.embedColor)
-      await prisma.user.update({
-        where: { id: target.id },
-        data: { embedColor: req.body.embedColor },
-      });
-
-    if (req.body.embedSiteName)
-      await prisma.user.update({
-        where: { id: target.id },
-        data: { embedSiteName: req.body.embedSiteName },
+        data: { embed: req.body.embed },
       });
 
     if (req.body.systemTheme)

src/pages/api/user/check.ts

@@ -3,8 +3,9 @@ import prisma from 'lib/prisma';
 import { NextApiReq, NextApiRes, withZipline } from 'middleware/withZipline';
 
 async function handler(req: NextApiReq, res: NextApiRes) {
-  if (!config.features.invites || !config.features.user_registration)
-    return res.forbidden('user/invites are disabled');
+  if (!config.features.user_registration && !req.body.code)
+    return res.badRequest('user registration is disabled');
+  else if (!config.features.invites && req.body.code) return res.forbidden('user/invites are disabled');
 
   if (!req.body?.code) return res.badRequest('no code');
   if (!req.body?.username) return res.badRequest('no username');
@@ -17,6 +18,7 @@ async function handler(req: NextApiReq, res: NextApiRes) {
 
   const user = await prisma.user.findFirst({
     where: { username },
+    select: { id: true },
   });
 
   if (user) return res.badRequest('username already exists');