feat(v3.4.7): version

* Add Openstack support

* Fix datasource getting

* Restore example config + remove useless vscode dir

* Restore example config + remove useless vscode dir

* Add config.ts to the entryPoints list

* Fix indenting problems with switch-case

* Replace openstack-swift-client

* Add openstack to the config validator

* Rename Openstack to Swift

* Better error handling for swift

* More error handling

* Update Swift.ts

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

.eslintrc.json

@@ -1,7 +1,7 @@
 {
   "extends": ["next", "next/core-web-vitals"],
   "rules": {
-    "indent": ["error", 2],
+    "indent": ["error", 2, { "SwitchCase": 1 }],
     "linebreak-style": ["error", "unix"],
     "quotes": ["error", "single"],
     "semi": ["error", "always"],
@@ -17,7 +17,7 @@
     "react/no-direct-mutation-state": "warn",
     "react/no-is-mounted": "warn",
     "react/no-typos": "error",
-    "react/react-in-jsx-scope": "error",
+    "react/react-in-jsx-scope": "off",
     "react/require-render-return": "error",
     "react/style-prop-object": "warn",
     "@next/next/no-img-element": "off"

.github/workflows/docker-arm.yml

@@ -1,41 +0,0 @@
-name: 'CD: Push ARM64 Docker Images'
-
-on:
-  push:
-    branches: [ trunk ]
-    paths:
-      - 'src/**'
-      - 'server/**'
-      - 'prisma/**'
-      - '.github/**'
-  workflow_dispatch:
-
-jobs:
-  push_to_ghcr:
-    name: Push Image to GitHub Packages
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check out the repo
-        uses: actions/checkout@v2
-
-      - name: Setup QEMU
-        uses: docker/setup-qemu-action@v1
-
-      - name: Set up Docker Buildx
-        id: buildx
-        uses: docker/setup-buildx-action@v1
-
-      - name: Login to Github Packages
-        uses: docker/login-action@v1
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Build Docker Image
-        uses: docker/build-push-action@v2
-        with:
-          file: ./Dockerfile-arm
-          platforms: linux/arm64
-          push: true
-          tags: ghcr.io/diced/zipline/arm64:trunk

.github/workflows/docker.yml

@@ -8,6 +8,7 @@ on:
       - 'server/**'
       - 'prisma/**'
       - '.github/**'
+      - 'Dockerfile'
   workflow_dispatch:
 
 jobs:
@@ -42,7 +43,7 @@ jobs:
         uses: docker/build-push-action@v2
         with:
           push: true
+          platforms: linux/amd64,linux/arm64
           tags: |
             ghcr.io/diced/zipline/zipline:trunk
-            ghcr.io/diced/zipline/amd64:trunk
-            diced/zipline:trunk
+            diced/zipline:trunk

Dockerfile

@@ -1,15 +1,28 @@
-FROM node:16-alpine AS deps
+FROM ghcr.io/diced/prisma-binaries:3.15.x as prisma
+
+FROM alpine:3.16 AS deps
+RUN mkdir -p /prisma-engines
 WORKDIR /build
 
 COPY .yarn .yarn
 COPY package.json yarn.lock .yarnrc.yml ./
 
-RUN apk add --no-cache libc6-compat
+RUN apk add --no-cache nodejs yarn
 RUN yarn install --immutable
 
-FROM node:16-alpine AS builder
+FROM alpine:3.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 nodejs yarn openssl openssl-dev
+
 COPY --from=deps /build/node_modules ./node_modules
 COPY src ./src
 COPY scripts ./scripts
@@ -22,18 +35,25 @@ ENV NEXT_TELEMETRY_DISABLED 1
 
 RUN yarn build
 
-FROM node:16-alpine AS runner
+FROM alpine:3.16 AS runner
 WORKDIR /zipline
 
+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 nodejs yarn openssl openssl-dev
+
 ENV NODE_ENV production
 ENV NEXT_TELEMETRY_DISABLED 1
 
-RUN addgroup --system --gid 1001 zipline
-RUN adduser --system --uid 1001 zipline
-
-COPY --from=builder --chown=zipline:zipline /build/.next ./.next
-COPY --from=builder --chown=zipline:zipline /build/dist ./dist
-COPY --from=builder --chown=zipline:zipline /build/node_modules ./node_modules
+COPY --from=builder /build/.next ./.next
+COPY --from=builder /build/dist ./dist
+COPY --from=builder /build/node_modules ./node_modules
 
 COPY --from=builder /build/next.config.js ./next.config.js
 COPY --from=builder /build/src ./src
@@ -42,6 +62,4 @@ COPY --from=builder /build/prisma ./prisma
 COPY --from=builder /build/tsconfig.json ./tsconfig.json
 COPY --from=builder /build/package.json ./package.json
 
-USER zipline
-
 CMD ["node", "dist/server"]

Dockerfile-arm

@@ -1,46 +0,0 @@
-FROM node:16 AS deps
-WORKDIR /build
-
-COPY .yarn .yarn
-COPY package.json yarn.lock .yarnrc.yml ./
-
-RUN yarn install --immutable
-
-FROM node:16 AS builder
-WORKDIR /build
-
-COPY --from=deps /build/node_modules ./node_modules
-COPY src ./src
-COPY scripts ./scripts
-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 ./
-
-ENV ZIPLINE_DOCKER_BUILD 1
-ENV NEXT_TELEMETRY_DISABLED 1
-
-RUN yarn build
-
-FROM node:16 AS runner
-WORKDIR /zipline
-
-ENV NODE_ENV production
-ENV NEXT_TELEMETRY_DISABLED 1
-
-RUN addgroup --system --gid 1001 zipline
-RUN adduser --system --uid 1001 zipline
-
-COPY --from=builder --chown=zipline:zipline /build/.next ./.next
-COPY --from=builder --chown=zipline:zipline /build/dist ./dist
-COPY --from=builder --chown=zipline:zipline /build/node_modules ./node_modules
-
-COPY --from=builder /build/next.config.js ./next.config.js
-COPY --from=builder /build/src ./src
-COPY --from=builder /build/scripts ./scripts
-COPY --from=builder /build/prisma ./prisma
-COPY --from=builder /build/tsconfig.json ./tsconfig.json
-COPY --from=builder /build/package.json ./package.json
-
-USER zipline
-
-CMD ["node", "dist/server"]

README.md

@@ -1,14 +1,14 @@
 <div align="center">
   <img src="https://raw.githubusercontent.com/diced/zipline/trunk/public/zipline_small.png"/>
-  
+
   Zipline is a ShareX/file upload server that is easy to use, packed with features and can be setup in one command!
-  
+
   ![Build](https://img.shields.io/github/workflow/status/diced/zipline/CD:%20Push%20Docker%20Images?logo=github&style=flat-square)
   ![Stars](https://img.shields.io/github/stars/diced/zipline?logo=github&style=flat-square)
   ![Version](https://img.shields.io/github/package-json/v/diced/zipline?logo=git&logoColor=white&style=flat-square)
   ![GitHub last commit (branch)](https://img.shields.io/github/last-commit/diced/zipline/trunk?logo=git&logoColor=white&style=flat-square)
   [![Discord](https://img.shields.io/discord/729771078196527176?color=%23777ed3&label=discord&logo=discord&logoColor=white&style=flat-square)](https://discord.gg/EAhCRfGxCF)
-  
+
 </div>
 
 ## Features
@@ -23,13 +23,91 @@
 - URL Formats (uuid, dates, random alphanumeric, original name, zws)
 - Discord embeds (OG metadata)
 - Gallery viewer, and multiple file format support
+- Code highlighting
 - Easy setup instructions on [docs](https://zipl.vercel.app/) (One command install `docker-compose up -d`)
 
-## Installing
-[See how to install here](https://zipl.vercel.app/docs/get-started)
+# Usage
 
-## Configuration
-[See how to configure here](https://zipl.vercel.app/docs/config/overview)
+## Install & run with Docker
+This section requires [Docker](https://docs.docker.com/get-docker/) and [docker-compose](https://docs.docker.com/compose/install/).
 
-## Theming
-[See how to theme here](https://zipl.vercel.app/docs/themes/reference)
+```shell
+git clone https://github.com/diced/zipline
+cd zipline
+
+docker-compose up -d
+```
+
+### After installing
+After installing, please edit the `docker-compose.yml` file and find the line that says `SECRET=changethis` and replace `changethis` with a random string.
+Ways you could generate the string could be from a password managers generator, or you could just slam your keyboard and hope for the best.
+
+## Building & running from source
+This section requires [nodejs](https://nodejs.org), [yarn](https://yarnpkg.com/) or [npm](https://npmjs.com).
+```shell
+git clone https://github.com/diced/zipline
+cd zipline
+
+# npm install
+yarn install
+# npm run build
+yarn build
+# npm start
+yarn start
+```
+
+# NGINX Proxy
+This section requires [NGINX](https://nginx.org/).
+
+```nginx
+server {
+  listen 80 default_server;
+  client_max_body_size 100M;
+  server_name <your domain (optional)>;
+  location / {
+    proxy_pass http://localhost:3000;
+    proxy_set_header Host $host;
+    proxy_set_header X-Real-IP $remote_addr;
+    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    proxy_set_header X-Forwarded-Proto $scheme;
+  }
+}
+```
+
+# Website
+The default port is `3000`, once you have accessed it you can see a login screen. The default credentials are "administrator" and "password". Once you login please immediately change the details to something more secure. You can do this by clicking on the top right corner where it says "administrator" with a gear icon and clicking Manage Account.
+
+# ShareX (Windows)
+This section requires [ShareX](https://www.getsharex.com/).
+
+After navigating to Zipline, click on the top right corner where it says your username and click Manage Account. Scroll down to see "ShareX Config", select the one you would prefer using. After this you can import the .sxcu into sharex. [More information here](https://zipl.vercel.app/docs/uploaders/sharex)
+
+# Flameshot (Linux)
+This section requires [Flameshot](https://www.flameshot.org/), [jq](https://stedolan.github.io/jq/), and [xsel](https://github.com/kfish/xsel).
+
+To upload files using flameshot we will use a script. Replace $TOKEN and $HOST with your own values, you probably know how to do this if you use linux.
+
+```shell
+DATE=$(date '+%h_%Y_%d_%I_%m_%S.png');
+flameshot gui -r > ~/Pictures/$DATE;
+
+curl -H "Content-Type: multipart/form-data" -H "authorization: $TOKEN" -F file=@$1 $HOST/api/upload | jq -r 'files[0].url' | xsel -ib
+```
+
+# Contributing
+
+## Bug reports
+Create an issue on GitHub, please include the following (if one of them is not applicable to the issue then it's not needed):
+* The steps to reproduce the bug
+* Logs of Zipline
+* The version of Zipline
+* Your OS & Browser including server OS
+* What you were expecting to see
+
+## Feature requests
+Create an issue on GitHub, please include the following:
+* Breif explanation of the feature in the title (very breif please)
+* How it would work (detailed, but optional)
+
+## Pull Requests (contributions to the codebase)
+Create a pull request on GitHub. If your PR does not pass the action checks, then please fix the errors. If your PR was submitted before a release, and I have pushed a new release, please make sure to update your PR to reflect any changes, usually this is handled by GitHub.

config.example.toml

@@ -1,10 +1,32 @@
 [core]
-secure = true
-secret = 'changethis'
+secure = true # whether to return https or http in links
+secret = 'changethis' # change this or zipline will not work
 host = '0.0.0.0'
 port = 3000
 database_url = 'postgres://postgres:postgres@postgres/postgres'
 
+[datasource]
+type = 'local' # s3, local, or swift
+
+[datasource.local]
+directory = './uploads' # directory to store uploads in
+
+[datasource.s3]
+access_key_id = 'AKIAEXAMPLEKEY'
+secret_access_key = 'somethingsomethingsomething'
+bucket = 'zipline-storage'
+endpoint = 's3.amazonaws.com'
+region = 'us-west-2' # not required, defaults to us-east-1 if not specified
+force_s3_path = false
+
+[datasource.swift]
+container = 'default'
+auth_endpoint = 'http://127.0.0.1:49155/v3' # only supports v3 swift endpoints at the moment.
+username = 'swift'
+password = 'fingertips'
+project_id = 'Default'
+domain_id = 'Default'
+
 [urls]
 route = '/go'
 length = 6
@@ -13,7 +35,10 @@ length = 6
 route = '/u'
 embed_route = '/a'
 length = 6
-directory = './uploads'
 user_limit = 104900000 # 100mb
 admin_limit = 104900000 # 100mb
-disabled_extentions = ['jpg']
+disabled_extensions = ['jpg']
+
+[ratelimit]
+user = 5 # 5 seconds
+admin = 0 # 0 seconds, disabled

docker-compose.arm.yml

@@ -1,46 +0,0 @@
-version: '3'
-services:
-  postgres:
-    image: postgres
-    restart: always
-    environment:
-      - POSTGRES_USER=postgres
-      - POSTGRES_PASSWORD=postgres
-      - POSTGRES_DATABASE=postgres
-    volumes:
-      - pg_data:/var/lib/postgresql/data
-    healthcheck:
-      test: ['CMD-SHELL', 'pg_isready -U postgres']
-      interval: 10s
-      timeout: 5s
-      retries: 5
-
-  zipline:
-    image: ghcr.io/diced/zipline/arm64:trunk
-    ports:
-      - '3000:3000'
-    restart: unless-stopped
-    environment: 
-      - SECURE=false
-      - SECRET=changethis
-      - HOST=0.0.0.0
-      - PORT=3000
-      - DATASOURCE_TYPE=local
-      - DATASOURCE_DIRECTORY=./uploads
-      - DATABASE_URL=postgresql://postgres:postgres@postgres/postgres/
-      - UPLOADER_ROUTE=/u
-      - UPLOADER_EMBED_ROUTE=/a
-      - UPLOADER_LENGTH=6
-      - UPLOADER_ADMIN_LIMIT=104900000
-      - UPLOADER_USER_LIMIT=104900000
-      - UPLOADER_DISABLED_EXTS=
-      - URLS_ROUTE=/go
-      - URLS_LENGTH=6
-    volumes:
-      - '$PWD/uploads:/zipline/uploads'
-      - '$PWD/public:/zipline/public'
-    depends_on:
-      - 'postgres'
-
-volumes:
-  pg_data:

docker-compose.dev.yml

@@ -28,7 +28,7 @@ services:
       - HOST=0.0.0.0
       - PORT=3000
       - DATASOURCE_TYPE=local
-      - DATASOURCE_DIRECTORY=./uploads
+      - DATASOURCE_LOCAL_DIRECTORY=./uploads
       - DATABASE_URL=postgresql://postgres:postgres@postgres/postgres/
       - UPLOADER_ROUTE=/u
       - UPLOADER_EMBED_ROUTE=/a

esbuild.config.js

@@ -17,17 +17,20 @@ const { rm } = require('fs/promises');
     treeShaking: true,
     entryPoints: [
       'src/server/index.ts',
-      'src/server/server.ts',
       'src/server/util.ts',
-      'src/server/validateConfig.ts',
       'src/lib/logger.ts',
-      'src/lib/readConfig.ts',
-      'src/lib/datasource/datasource.ts',
-      'src/lib/datasource/index.ts',
-      'src/lib/datasource/Local.ts',
-      'src/lib/datasource/S3.ts',
-      'src/lib/ds.ts',
       'src/lib/config.ts',
+      'src/lib/mimes.ts',
+      'src/lib/exts.ts',
+      'src/lib/config/Config.ts',
+      'src/lib/config/readConfig.ts',
+      'src/lib/config/validateConfig.ts',
+      'src/lib/datasources/Datasource.ts',
+      'src/lib/datasources/index.ts',
+      'src/lib/datasources/Local.ts',
+      'src/lib/datasources/S3.ts',
+      'src/lib/datasources/Swift.ts',
+      'src/lib/datasource.ts',
     ],
     format: 'cjs',
     resolveExtensions: ['.ts', '.js'],
@@ -35,6 +38,6 @@ const { rm } = require('fs/promises');
     watch,
     incremental: watch,
     sourcemap: false,
-    minify: process.env.NODE_ENV === 'production',
+    minify: false,
   });
 })();

next.config.js

@@ -8,4 +8,9 @@ module.exports = {
       },
     ];
   },
+  api: {
+    responseLimit: false,
+  },
+  poweredByHeader: false,
+  reactStrictMode: true,
 };

package.json

@@ -1,9 +1,9 @@
 {
   "name": "zipline",
-  "version": "3.4.4",
+  "version": "3.4.7",
   "license": "MIT",
   "scripts": {
-    "dev": "node esbuild.config.js && REACT_EDITOR=code-insiders NODE_ENV=development node dist/server",
+    "dev": "node esbuild.config.js && REACT_EDITOR=code NODE_ENV=development node dist/server",
     "build": "npm-run-all build:server build:schema build:next",
     "build:server": "node esbuild.config.js",
     "build:next": "next build",
@@ -11,7 +11,6 @@
     "migrate:dev": "prisma migrate dev --create-only",
     "start": "node dist/server",
     "lint": "next lint",
-    "seed": "ts-node --compiler-options \"{\\\"module\\\":\\\"commonjs\\\"}\" --transpile-only prisma/seed.ts",
     "docker:run": "docker-compose up -d",
     "docker:down": "docker-compose down",
     "docker:build-dev": "docker-compose --file docker-compose.dev.yml up --build"
@@ -31,12 +30,12 @@
     "@prisma/sdk": "^3.15.2",
     "@reduxjs/toolkit": "^1.8.2",
     "argon2": "^0.28.5",
-    "aws-sdk": "^2.1156.0",
     "colorette": "^2.0.19",
     "cookie": "^0.5.0",
     "fecha": "^4.2.3",
     "fflate": "^0.7.3",
     "find-my-way": "^6.3.0",
+    "minio": "^7.0.28",
     "multer": "^1.4.5-lts.1",
     "next": "^12.1.6",
     "prisma": "^3.15.2",
@@ -45,12 +44,11 @@
     "react-redux": "^8.0.2",
     "react-table": "^7.8.0",
     "redux": "^4.2.0",
-    "redux-thunk": "^2.4.1",
-    "uuid": "^8.3.2",
     "yup": "^0.32.11"
   },
   "devDependencies": {
     "@types/cookie": "^0.5.1",
+    "@types/minio": "^7.0.13",
     "@types/multer": "^1.4.7",
     "@types/node": "^15.12.2",
     "babel-plugin-import": "^1.13.5",

prisma/migrations/20220620173040_ratelimit_date/migration.sql

@@ -0,0 +1,9 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `ratelimited` on the `User` table. All the data in the column will be lost.
+
+*/
+-- AlterTable
+ALTER TABLE "User" DROP COLUMN "ratelimited",
+ADD COLUMN     "ratelimit" TIMESTAMP(3);

prisma/schema.prisma

@@ -17,7 +17,7 @@ model User {
   embedTitle    String?
   embedColor    String    @default("#2f3136")
   embedSiteName String?   @default("{image.file} • {user.name}")
-  ratelimited   Boolean   @default(false)
+  ratelimit     DateTime?
   domains       String[]
   images        Image[]
   urls          Url[]

scripts/migrate-v2-v3.js

@@ -1,35 +0,0 @@
-const { readdir } = require('fs/promises');
-const { extname } = require('path');
-const validateConfig = require('../server/validateConfig');
-const Logger = require('../src/lib/logger');
-const readConfig = require('../src/lib/readConfig');
-const mimes = require('./mimes');
-const { PrismaClient } = require('@prisma/client');
-
-(async () => {
-  const config = readConfig();
-
-  await validateConfig(config);
-
-  process.env.DATABASE_URL = config.core.database_url;
-
-  const files = await readdir(process.argv[2]);
-  const data = files.map(x => {
-    const mime = mimes[extname(x)] ?? 'application/octet-stream';
-
-    return {
-      file: x,
-      mimetype: mime,
-      userId: 1,
-    };
-  });
-
-  const prisma = new PrismaClient();
-
-  Logger.get('migrator').info('starting migrations...');
-  await prisma.image.createMany({
-    data,
-  });
-  Logger.get('migrator').info('finished migrations! It is recomended to move your old uploads folder (' + process.argv[2] + ') to the current one which is ' + config.uploader.directory);
-  process.exit();
-})();

src/components/Backdrop.tsx

@@ -1,8 +0,0 @@
-import React from 'react';
-import { LoadingOverlay } from '@mantine/core';
-
-export default function Backdrop({ open }) {
-  return (
-    <LoadingOverlay visible={open} />
-  );
-}

src/components/Card.tsx

@@ -1,14 +1,9 @@
-import React from 'react';
-import {
-  Card as MCard,
-  Title,
-} from '@mantine/core';
+import { Card as MCard, Title } from '@mantine/core';
 
-export default function Card(props) {
-  const { name, children, ...other } = props;
+export default function Card({ name, children, ...other }) {
 
   return (
-    <MCard padding='md' shadow='sm' {...other}>
+    <MCard p='md' shadow='sm' {...other}>
       <Title order={2}>{name}</Title>
       {children}
     </MCard>

src/components/File.tsx

@@ -1,11 +1,11 @@
-import React, { useState } from 'react';
-import useFetch from 'hooks/useFetch';
 import { Button, Card, Group, Image as MImage, Modal, Title } from '@mantine/core';
+import { useClipboard } from '@mantine/hooks';
 import { useNotifications } from '@mantine/notifications';
 import { CopyIcon, Cross1Icon, StarIcon, TrashIcon } from '@modulz/radix-icons';
-import { useClipboard } from '@mantine/hooks';
+import useFetch from 'hooks/useFetch';
+import { useState } from 'react';
 
-export default function Image({ image, updateImages }) {
+export default function File({ image, updateImages }) {
   const [open, setOpen] = useState(false);
   const [t] = useState(image.mimetype.split('/')[0]);
   const notif = useNotifications();
@@ -56,7 +56,7 @@ export default function Image({ image, updateImages }) {
   const Type = (props) => {
     return {
       'video': <video controls {...props} />,
-      'image': <MImage {...props} />,
+      'image': <MImage withPlaceholder {...props} />,
       'audio': <audio controls {...props} />,
     }[t];
   };

src/components/ImagesTable.tsx

@@ -1,17 +1,12 @@
+/* eslint-disable jsx-a11y/alt-text */
 /* eslint-disable react/jsx-key */
 /* eslint-disable react/display-name */
 // Code taken from https://codesandbox.io/s/eojw8 and is modified a bit (the entire src/components/table directory)
-import React from 'react';
-import {
-  usePagination,
-  useTable,
-} from 'react-table';
 import {
   ActionIcon,
   createStyles,
   Divider,
-  Group,
-  Pagination,
+  Group, Image, Pagination,
   Select,
   Table,
   Text,
@@ -22,6 +17,10 @@ import {
   EnterIcon,
   TrashIcon,
 } from '@modulz/radix-icons';
+import {
+  usePagination,
+  useTable,
+} from 'react-table';
 
 const pageSizeOptions = ['10', '25', '50'];
 
@@ -42,6 +41,26 @@ const useStyles = createStyles((t) => ({
   sortDirectionIcon: { transition: 'transform 200ms ease' },
 }));
 
+export function FilePreview({ url, type }) {
+  const Type = props => {
+    return {
+      'video': <video autoPlay controls {...props} />,
+      'image': <Image {...props} />,
+      'audio': <audio autoPlay controls {...props} />,
+    }[type.split('/')[0]];
+  };
+
+  return (
+    <Type
+      sx={{ maxWidth: '10vw', maxHeight: '100vh' }}
+      style={{ maxWidth: '10vw', maxHeight: '100vh' }}
+      mr='sm'
+      src={url}
+      alt={'Unable to preview file'}
+    />
+  );
+}
+
 export default function ImagesTable({
   columns,
   data = [],

src/components/Layout.tsx

@@ -1,15 +1,14 @@
-import React, { useState } from 'react';
-import Link from 'next/link';
-
-import { useRouter } from 'next/router';
-import { useStoreDispatch } from 'lib/redux/store';
-import { updateUser } from 'lib/redux/reducers/user';
-import useFetch from 'hooks/useFetch';
-import { CheckIcon, CopyIcon, Cross1Icon, FileIcon, GearIcon, HomeIcon, Link1Icon, ResetIcon, UploadIcon, PinRightIcon, PersonIcon, Pencil1Icon, MixerHorizontalIcon } from '@modulz/radix-icons';
-import { AppShell, Burger, Divider, Group, Header, MediaQuery, Navbar, Paper, Popover, ScrollArea, Select, Text, ThemeIcon, Title, UnstyledButton, useMantineTheme, Box } from '@mantine/core';
+import { AppShell, Box, Burger, Divider, Group, Header, MediaQuery, Navbar, Paper, Popover, ScrollArea, Select, Text, ThemeIcon, Title, UnstyledButton, useMantineTheme } from '@mantine/core';
+import { useClipboard } from '@mantine/hooks';
 import { useModals } from '@mantine/modals';
 import { useNotifications } from '@mantine/notifications';
-import { useClipboard } from '@mantine/hooks';
+import { CheckIcon, CopyIcon, Cross1Icon, FileIcon, GearIcon, HomeIcon, Link1Icon, MixerHorizontalIcon, Pencil1Icon, PersonIcon, PinRightIcon, ResetIcon, UploadIcon } from '@modulz/radix-icons';
+import useFetch from 'hooks/useFetch';
+import { updateUser } from 'lib/redux/reducers/user';
+import { useStoreDispatch } from 'lib/redux/store';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { useState } from 'react';
 import { friendlyThemeName, themes } from './Theming';
 
 function MenuItemLink(props) {
@@ -123,6 +122,7 @@ export default function Layout({ children, user }) {
   const openResetToken = () => modals.openConfirmModal({
     title: 'Reset Token',
     centered: true,
+    overlayBlur: 3,
     children: (
       <Text size='sm'>
         Once you reset your token, you will have to update any uploaders to use this new token.
@@ -155,6 +155,7 @@ export default function Layout({ children, user }) {
   const openCopyToken = () => modals.openConfirmModal({
     title: 'Copy Token',
     centered: true,
+    overlayBlur: 3,
     children: (
       <Text size='sm'>
         Make sure you don&apos;t share this token with anyone as they will be able to upload files on your behalf.
@@ -181,7 +182,7 @@ export default function Layout({ children, user }) {
       fixed
       navbar={
         <Navbar
-          padding='md'
+          p='md'
           hiddenBreakpoint='sm'
           hidden={!opened}
           width={{ sm: 200, lg: 230 }}
@@ -196,7 +197,7 @@ export default function Layout({ children, user }) {
             {items.map(({ icon, text, link }) => (
               <Link href={link} key={text} passHref>
                 <UnstyledButton
-                  sx={{ 
+                  sx={{
                     display: 'block',
                     width: '100%',
                     padding: theme.spacing.xs,
@@ -247,7 +248,7 @@ export default function Layout({ children, user }) {
         </Navbar>
       }
       header={
-        <Header height={70} padding='md'>
+        <Header height={70} p='md'>
           <div style={{ display: 'flex', alignItems: 'center', height: '100%' }}>
             <MediaQuery largerThan='sm' styles={{ display: 'none' }}>
               <Burger
@@ -293,10 +294,13 @@ export default function Layout({ children, user }) {
                   <Text sx={{
                     color: theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6],
                     fontWeight: 500,
-                    fontSize: theme.fontSizes.xs,
+                    fontSize: theme.fontSizes.sm,
                     padding: `${theme.spacing.xs / 2}px ${theme.spacing.sm}px`,
                     cursor: 'default',
-                  }}>User: {user.username}</Text>
+                  }}
+                  >
+                    {user.username}
+                  </Text>
                   <MenuItemLink icon={<GearIcon />} href='/dashboard/manage'>Manage Account</MenuItemLink>
                   <MenuItem icon={<CopyIcon />} onClick={() => {setOpen(false);openCopyToken();}}>Copy Token</MenuItem>
                   <MenuItem icon={<ResetIcon />} onClick={() => {setOpen(false);openResetToken();}} color='red'>Reset Token</MenuItem>
@@ -325,7 +329,7 @@ export default function Layout({ children, user }) {
         </Header>
       }
     >
-      <Paper withBorder padding='md' shadow='xs'>{children}</Paper>
+      <Paper withBorder p='md' shadow='xs'>{children}</Paper>
     </AppShell>
   );
 }

src/components/Link.tsx

@@ -1,10 +1,10 @@
 /// https://github.com/mui-org/material-ui/blob/next/examples/nextjs/src/Link.js
 /* eslint-disable jsx-a11y/anchor-has-content */
-import React, { forwardRef } from 'react';
-import clsx from 'clsx';
-import { useRouter } from 'next/router';
-import NextLink from 'next/link';
 import { Text } from '@mantine/core';
+import clsx from 'clsx';
+import NextLink from 'next/link';
+import { useRouter } from 'next/router';
+import { forwardRef } from 'react';
 
 export const NextLinkComposed = forwardRef(function NextLinkComposed(props: any, ref) {
   const { to, linkAs, href, replace, scroll, passHref, shallow, prefetch, locale, ...other } =

src/components/MutedText.tsx

@@ -0,0 +1,5 @@
+import { Text } from '@mantine/core';
+
+export default function MutedText({ children, ...props }) {
+  return <Text color='gray' size='xl' {...props}>{children}</Text>;
+}

src/components/SmallTable.tsx

@@ -0,0 +1,29 @@
+import { Box, Table } from '@mantine/core';
+import { randomId } from '@mantine/hooks';
+
+export function SmallTable({ rows, columns }) {
+  return (
+    <Box sx={{ pt: 1 }}>
+      <Table highlightOnHover>
+        <thead>
+          <tr>
+            {columns.map(col => (
+              <th key={randomId()}>{col.name}</th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map(row => (
+            <tr key={randomId()}>
+              {columns.map(col => (
+                <td key={randomId()}>
+                  {col.format ? col.format(row[col.id]) : row[col.id]}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </Table>
+    </Box>
+  );
+}

src/components/StatText.tsx

@@ -1,6 +0,0 @@
-import React from 'react';
-import { Text } from '@mantine/core';
-
-export default function StatText({ children }) {
-  return <Text color='gray' size='xl'>{children}</Text>;
-}

src/components/Theming.tsx

@@ -1,22 +1,22 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 
 // themes
-import dark_blue from 'lib/themes/dark_blue';
-import light_blue from 'lib/themes/light_blue';
-import dark from 'lib/themes/dark';
 import ayu_dark from 'lib/themes/ayu_dark';
-import ayu_mirage from 'lib/themes/ayu_mirage';
 import ayu_light from 'lib/themes/ayu_light';
-import nord from 'lib/themes/nord';
+import ayu_mirage from 'lib/themes/ayu_mirage';
+import dark from 'lib/themes/dark';
+import dark_blue from 'lib/themes/dark_blue';
 import dracula from 'lib/themes/dracula';
+import light_blue from 'lib/themes/light_blue';
 import matcha_dark_azul from 'lib/themes/matcha_dark_azul';
+import nord from 'lib/themes/nord';
 import qogir_dark from 'lib/themes/qogir_dark';
 
-import { useStoreSelector } from 'lib/redux/store';
 import { MantineProvider, MantineThemeOverride } from '@mantine/core';
+import { useColorScheme } from '@mantine/hooks';
 import { ModalsProvider } from '@mantine/modals';
 import { NotificationsProvider } from '@mantine/notifications';
-import { useColorScheme } from '@mantine/hooks';
+import { useStoreSelector } from 'lib/redux/store';
 
 export const themes = {
   system: (colorScheme: 'dark' | 'light') => colorScheme === 'dark' ? dark_blue : light_blue,

src/components/dropzone/Dropzone.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Dropzone as MantineDropzone } from '@mantine/dropzone';
+import { Group, Text, useMantineTheme } from '@mantine/core';
+import { UploadIcon, CrossCircledIcon, ImageIcon } from '@modulz/radix-icons';
+
+function ImageUploadIcon({ status, ...props }) {
+  if (status.accepted) {
+    return <UploadIcon {...props} />;
+  }
+
+  if (status.rejected) {
+    return <CrossCircledIcon {...props} />;
+  }
+
+  return <ImageIcon {...props} />;
+}
+
+function getIconColor(status, theme) {
+  return status.accepted
+    ? theme.colors[theme.primaryColor][6]
+    : status.rejected
+      ? theme.colors.red[6]
+      : theme.colorScheme === 'dark'
+        ? theme.colors.dark[0]
+        : theme.black;
+}
+
+
+export default function Dropzone({ loading, onDrop, children }) {
+  const theme = useMantineTheme();
+
+  return (
+    <MantineDropzone loading={loading} onDrop={onDrop}>
+      {status => (
+        <>
+          <Group position='center' spacing='xl' style={{ minHeight: 220, pointerEvents: 'none' }}>
+            <ImageUploadIcon
+              status={status}
+              style={{ width: 80, height: 80, color: getIconColor(status, theme) }}
+            />
+
+            <Text size='xl' inline>
+              Drag images here or click to select files
+            </Text>
+          </Group>
+
+          {children}
+        </>
+      )}
+    </MantineDropzone>
+  );
+}

src/components/dropzone/DropzoneFile.tsx

@@ -0,0 +1,60 @@
+/* eslint-disable jsx-a11y/alt-text */
+import React from 'react';
+import { Image, Table, Tooltip, Badge, useMantineTheme } from '@mantine/core';
+
+export function FilePreview({ file }: { file: File }) {
+  const Type = props => {
+    return {
+      'video': <video autoPlay controls {...props} />,
+      'image': <Image withPlaceholder {...props} />,
+      'audio': <audio autoPlay controls {...props} />,
+    }[file.type.split('/')[0]];
+  };
+
+  return (
+    <Type
+      sx={{ maxWidth: '10vw', maxHeight: '100vh' }}
+      style={{ maxWidth: '10vw', maxHeight: '100vh' }}
+      src={URL.createObjectURL(file)}
+      alt={file.name}
+    />
+  );
+}
+
+export default function FileDropzone({ file }: { file: File }) {
+  const theme = useMantineTheme();
+
+  return (
+    <Tooltip
+      position='top'
+      placement='center'
+      allowPointerEvents
+      label={
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <FilePreview file={file} />
+
+          <Table sx={{ color: theme.colorScheme === 'dark' ? 'black' : 'white' }} ml='md'>
+            <tbody>
+              <tr>
+                <td>Name</td>
+                <td>{file.name}</td>
+              </tr>
+              <tr>
+                <td>Type</td>
+                <td>{file.type}</td>
+              </tr>
+              <tr>
+                <td>Last Modified</td>
+                <td>{new Date(file.lastModified).toLocaleString()}</td>
+              </tr>
+            </tbody>
+          </Table>
+        </div>
+      }
+    >
+      <Badge size='lg'>
+        {file.name}
+      </Badge>
+    </Tooltip>
+  );
+}

src/components/pages/Dashboard.tsx

@@ -1,33 +1,19 @@
-import React, { useEffect, useState } from 'react';
-
+import { SimpleGrid, Skeleton, Text, Title } from '@mantine/core';
+import { randomId, useClipboard } from '@mantine/hooks';
+import { useNotifications } from '@mantine/notifications';
+import { CopyIcon, Cross1Icon, TrashIcon } from '@modulz/radix-icons';
 import Card from 'components/Card';
-import ZiplineImage from 'components/Image';
+import File from 'components/File';
 import ImagesTable from 'components/ImagesTable';
+import Link from 'components/Link';
+import MutedText from 'components/MutedText';
+import { bytesToRead } from 'lib/clientUtils';
 import useFetch from 'lib/hooks/useFetch';
 import { useStoreSelector } from 'lib/redux/store';
-import { Text, Skeleton, Title, SimpleGrid } from '@mantine/core';
-import { randomId, useClipboard } from '@mantine/hooks';
-import Link from 'components/Link';
-import { CopyIcon, Cross1Icon, TrashIcon } from '@modulz/radix-icons';
-import { useNotifications } from '@mantine/notifications';
-import StatText from 'components/StatText';
+import { useEffect, useState } from 'react';
 
 type Aligns = 'inherit' | 'right' | 'left' | 'center' | 'justify';
 
-export function bytesToRead(bytes: number) {
-  if (isNaN(bytes)) return '0.0 B';
-  if (bytes === Infinity) return '0.0 B';
-  const units = ['B', 'kB', 'MB', 'GB', 'TB', 'PB'];
-  let num = 0;
-
-  while (bytes > 1024) {
-    bytes /= 1024;
-    ++num;
-  }
-
-  return `${bytes.toFixed(1)} ${units[num]}`;
-}
-
 export default function Dashboard() {
   const user = useStoreSelector(state => state.user);
 
@@ -86,8 +72,8 @@ export default function Dashboard() {
   
   return (
     <>
-      <Title>Welcome back {user?.username}</Title>
-      <Text color='gray' sx={{ paddingBottom: 4 }}>You have <b>{images.length ? images.length : '...'}</b> files</Text>
+      <Title>Welcome back, {user?.username}</Title>
+      <Text color='gray' mb='sm'>You have <b>{images.length ? images.length : '...'}</b> files</Text>
 
       <Title>Recent Files</Title>
       <SimpleGrid
@@ -98,7 +84,7 @@ export default function Dashboard() {
         ]}
       >
         {recent.length ? recent.map(image => (
-          <ZiplineImage key={randomId()} image={image} updateImages={updateImages} />
+          <File key={randomId()} image={image} updateImages={updateImages} />
         )) : [1,2,3,4].map(x => (
           <div key={x}>
             <Skeleton width='100%' height={220} sx={{ borderRadius: 1 }}/>
@@ -116,20 +102,22 @@ export default function Dashboard() {
         ]}
       >
         <Card name='Size' sx={{ height: '100%' }}>
-          <StatText>{stats ? stats.size : <Skeleton height={8} />}</StatText>
+          <MutedText>{stats ? stats.size : <Skeleton height={8} />}</MutedText>
           <Title order={2}>Average Size</Title>
-          <StatText>{stats ? bytesToRead(stats.size_num / stats.count) : <Skeleton height={8} />}</StatText>
+          <MutedText>{stats ? bytesToRead(stats.size_num / stats.count) : <Skeleton height={8} />}</MutedText>
         </Card>
         <Card name='Images' sx={{ height: '100%' }}>
-          <StatText>{stats ? stats.count : <Skeleton height={8} />}</StatText>
+          <MutedText>{stats ? stats.count : <Skeleton height={8} />}</MutedText>
           <Title order={2}>Views</Title>
-          <StatText>{stats ? `${stats.views_count} (${isNaN(stats.views_count / stats.count) ? 0 : Math.round(stats.views_count / stats.count)})` : <Skeleton height={8} />}</StatText>
+          <MutedText>{stats ? `${stats.views_count} (${isNaN(stats.views_count / stats.count) ? 0 : Math.round(stats.views_count / stats.count)})` : <Skeleton height={8} />}</MutedText>
         </Card>
         <Card name='Users' sx={{ height: '100%' }}>
-          <StatText>{stats ? stats.count_users : <Skeleton height={8} />}</StatText>
+          <MutedText>{stats ? stats.count_users : <Skeleton height={8} />}</MutedText>
         </Card>
       </SimpleGrid>
 
+      <Title mt='md'>Files</Title>
+      <Text>View your gallery <Link href='/dashboard/files'>here</Link>.</Text>
       <ImagesTable
         columns={[
           { accessor: 'file', Header: 'Name', minWidth: 170, align: 'inherit' as Aligns },
@@ -141,34 +129,6 @@ export default function Dashboard() {
         copyImage={copyImage}
         viewImage={viewImage}
       />
-
-      {/* <Title mt='md'>Files</Title>
-      <Text>View previews of your files in the <Link href='/dashboard/files'>browser</Link>.</Text>
-      <ReactTable
-        columns={[
-          { accessor: 'file', Header: 'Name', minWidth: 170, align: 'inherit' as Aligns },
-          { accessor: 'mimetype', Header: 'Type', minWidth: 100, align: 'inherit' as Aligns },
-          { accessor: 'created_at', Header: 'Date' },
-        ]}
-        data={images}
-        pagination
-      />
-      <Card name='Files per User' mt={22}>
-        <StatTable
-          columns={[
-            { id: 'username', name: 'Name' },
-            { id: 'count', name: 'Files' },
-          ]}
-          rows={stats ? stats.count_by_user : []} />
-      </Card>
-      <Card name='Types' mt={22}>
-        <StatTable
-          columns={[
-            { id: 'mimetype', name: 'Type' },
-            { id: 'count', name: 'Count' },
-          ]}
-          rows={stats ? stats.types_count : []} />
-      </Card> */}
     </>
   );
 }

src/components/pages/Files.tsx

@@ -1,10 +1,9 @@
-import React, { useEffect, useState } from 'react';
-
-import ZiplineImage from 'components/Image';
-import useFetch from 'hooks/useFetch';
-import { Box, Accordion, Pagination, Title, SimpleGrid, Skeleton, Group, ActionIcon } from '@mantine/core';
+import { Accordion, ActionIcon, Box, Group, Pagination, SimpleGrid, Skeleton, Title } from '@mantine/core';
 import { PlusIcon } from '@modulz/radix-icons';
+import File from 'components/File';
+import useFetch from 'hooks/useFetch';
 import Link from 'next/link';
+import { useEffect, useState } from 'react';
 
 export default function Files() {
   const [pages, setPages] = useState([]);
@@ -27,48 +26,50 @@ export default function Files() {
 
   return (
     <>
-      <Group>
-        <Title sx={{ marginBottom: 12 }}>Files</Title>
+      <Group mb='md'>
+        <Title>Files</Title>
         <Link href='/dashboard/upload' passHref>
           <ActionIcon component='a' variant='filled' color='primary'><PlusIcon/></ActionIcon>
         </Link>
       </Group>
-      <Accordion
-        offsetIcon={false}
-        sx={t => ({
-          marginTop: 2,
-          border: '1px solid',
-          marginBottom: 12,
-          borderColor: t.colorScheme === 'dark' ? t.colors.dark[6] : t.colors.gray[0] ,
-        })}
-      >
-        <Accordion.Item label={<Title>Favorite Files</Title>}>
-          <SimpleGrid
-            cols={3}
-            spacing='lg'
-            breakpoints={[
-              { maxWidth: 'sm', cols: 1, spacing: 'sm' },
-            ]}
-          >
-            {favoritePages.length ? favoritePages[(favoritePage - 1) ?? 0].map(image => (
-              <div key={image.id}>
-                <ZiplineImage image={image} updateImages={() => updatePages(true)} />
-              </div>
-            )) : null}
-          </SimpleGrid>
-          <Box
-            sx={{
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-              paddingTop: 12,
-              paddingBottom: 3,
-            }}
-          >
-            <Pagination total={favoritePages.length} page={favoritePage} onChange={setFavoritePage}/>
-          </Box>
-        </Accordion.Item>
-      </Accordion>
+      {favoritePages.length ? (
+        <Accordion
+          offsetIcon={false}
+          sx={t => ({
+            marginTop: 2,
+            border: '1px solid',
+            marginBottom: 12,
+            borderColor: t.colorScheme === 'dark' ? t.colors.dark[6] : t.colors.gray[0] ,
+          })}
+        >
+          <Accordion.Item label={<Title>Favorite Files</Title>}>
+            <SimpleGrid
+              cols={3}
+              spacing='lg'
+              breakpoints={[
+                { maxWidth: 'sm', cols: 1, spacing: 'sm' },
+              ]}
+            >
+              {favoritePages.length ? favoritePages[(favoritePage - 1) ?? 0].map(image => (
+                <div key={image.id}>
+                  <File image={image} updateImages={() => updatePages(true)} />
+                </div>
+              )) : null}
+            </SimpleGrid>
+            <Box
+              sx={{
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                paddingTop: 12,
+                paddingBottom: 3,
+              }}
+            >
+              <Pagination total={favoritePages.length} page={favoritePage} onChange={setFavoritePage}/>
+            </Box>
+          </Accordion.Item>
+        </Accordion>
+      ) : null}
       <SimpleGrid
         cols={3}
         spacing='lg'
@@ -78,7 +79,7 @@ export default function Files() {
       >
         {pages.length ? pages[(page - 1) ?? 0].map(image => (
           <div key={image.id}>
-            <ZiplineImage image={image} updateImages={() => updatePages(true)} />
+            <File image={image} updateImages={() => updatePages(true)} />
           </div>
         )) : [1,2,3,4].map(x => (
           <div key={x}>

src/components/pages/Manage.tsx

@@ -1,13 +1,15 @@
-import React, { useState } from 'react';
-
-import useFetch from 'hooks/useFetch';
-import Link from 'components/Link';
-import { useStoreDispatch, useStoreSelector } from 'lib/redux/store';
-import { updateUser } from 'lib/redux/reducers/user';
-import { randomId, useForm } from '@mantine/hooks';
-import { Tooltip, TextInput, Button, Text, Title, Group, ColorInput, MultiSelect, Space } from '@mantine/core';
-import { DownloadIcon, Cross1Icon } from '@modulz/radix-icons';
+import { Box, Button, Card, ColorInput, Group, MultiSelect, Space, Text, TextInput, PasswordInput, Title, Tooltip } from '@mantine/core';
+import { randomId, useForm, useInterval } from '@mantine/hooks';
+import { useModals } from '@mantine/modals';
 import { useNotifications } from '@mantine/notifications';
+import { Cross1Icon, DownloadIcon, TrashIcon } from '@modulz/radix-icons';
+import Link from 'components/Link';
+import { SmallTable } from 'components/SmallTable';
+import useFetch from 'hooks/useFetch';
+import { bytesToRead } from 'lib/clientUtils';
+import { updateUser } from 'lib/redux/reducers/user';
+import { useStoreDispatch, useStoreSelector } from 'lib/redux/store';
+import { useEffect, useState } from 'react';
 
 function VarsTooltip({ children }) {
   return (
@@ -17,7 +19,7 @@ function VarsTooltip({ children }) {
         <Text><b>{'{image.mimetype}'}</b> - mimetype</Text>
         <Text><b>{'{image.id}'}</b> - id of the image</Text>
         <Text><b>{'{user.name}'}</b> - your username</Text>
-        visit <Link href='https://zipline.diced.cf/docs/variables'>the docs</Link> for more variables
+        visit <Link href='https://zipl.vercel.app/docs/variables'>the docs</Link> for more variables
       </>
     }>
       {children}
@@ -25,11 +27,17 @@ function VarsTooltip({ children }) {
   );
 }
 
+function ExportDataTooltip({ children }) {
+  return <Tooltip position='top' placement='center' color='' label='After clicking, if you have a lot of files the export can take a while to complete. A list of previous exports will be below to download.'>{children}</Tooltip>;
+}
+
 export default function Manage() {
   const user = useStoreSelector(state => state.user);
   const dispatch = useStoreDispatch();
   const notif = useNotifications();
+  const modals = useModals();
 
+  const [exports, setExports] = useState([]);
   const [domains, setDomains] = useState(user.domains ?? []);
 
   const genShareX = (withEmbed: boolean = false, withZws: boolean = false) => {
@@ -41,8 +49,8 @@ export default function Manage() {
       RequestURL: `${window.location.protocol + '//' + window.location.hostname + (window.location.port ? ':' + window.location.port : '')}/api/upload`,
       Headers: {
         Authorization: user?.token,
-        ...(withEmbed && {Embed: 'true'}),
-        ...(withZws && {ZWS: 'true'}),
+        ...(withEmbed && { Embed: 'true' }),
+        ...(withZws && { ZWS: 'true' }),
       },
       URL: '$json:files[0]$',
       Body: 'MultipartFormData',
@@ -127,6 +135,78 @@ export default function Manage() {
     }
   };
 
+  const exportData = async () => {
+    const res = await useFetch('/api/user/export', 'POST');
+    if (res.url) {
+      notif.showNotification({
+        title: 'Export started...',
+        loading: true,
+        message: 'If you have a lot of files, the export may take a while. The list of exports will be updated every 30s.',
+      });
+    }
+  };
+
+  const getExports = async () => {
+    const res = await useFetch('/api/user/export');
+
+    setExports(res.exports.map(s => ({
+      date: new Date(Number(s.name.split('_')[3].slice(0, -4))),
+      size: s.size,
+      full: s.name,
+    })).sort((a, b) => a.date.getTime() - b.date.getTime()));
+  };
+
+  const handleDelete = async () => {
+    const res = await useFetch('/api/user/files', 'DELETE', {
+      all: true,
+    });
+
+    if (!res.count) {
+      notif.showNotification({
+        title: 'Couldn\'t delete files',
+        message: res.error,
+        color: 'red',
+        icon: <Cross1Icon />,
+      });
+    } else {
+      notif.showNotification({
+        title: 'Deleted files',
+        message: `${res.count} files deleted`,
+        color: 'green',
+        icon: <TrashIcon />,
+      });
+    }
+  };
+
+  const openDeleteModal = () => modals.openConfirmModal({
+    title: 'Are you sure you want to delete all of your images?',
+    closeOnConfirm: false,
+    centered: true,
+    overlayBlur: 3,
+    labels: { confirm: 'Yes', cancel: 'No' },
+    onConfirm: () => {
+      modals.openConfirmModal({
+        title: 'Are you really sure?',
+        centered: true,
+        overlayBlur: 3,
+        labels: { confirm: 'Yes', cancel: 'No' },
+        onConfirm: () => {
+          handleDelete();
+          modals.closeAll();
+        },
+        onCancel: () => {
+          modals.closeAll();
+        },
+      });
+    },
+  });
+
+  const interval = useInterval(() => getExports(), 30000);
+  useEffect(() => {
+    getExports();
+    interval.start();
+  }, []);
+
   return (
     <>
       <Title>Manage User</Title>
@@ -135,7 +215,7 @@ export default function Manage() {
       </VarsTooltip>
       <form onSubmit={form.onSubmit((v) => onSubmit(v))}>
         <TextInput id='username' label='Username' {...form.getInputProps('username')} />
-        <TextInput id='password' label='Password' type='password' {...form.getInputProps('password')} />
+        <PasswordInput id='password' label='Password' description='Leave blank to keep your old password' {...form.getInputProps('password')} />
         <TextInput id='embedTitle' label='Embed Title' {...form.getInputProps('embedTitle')} />
         <ColorInput id='embedColor' label='Embed Color' {...form.getInputProps('embedColor')} />
         <TextInput id='embedSiteName' label='Embed Site Name' {...form.getInputProps('embedSiteName')} />
@@ -152,14 +232,37 @@ export default function Manage() {
           {...form.getInputProps('domains')}
         />
 
-        <Group position='right' sx={{ paddingTop: 12 }}>
+        <Group position='right' mt='md'>
           <Button
             type='submit'
           >Save User</Button>
         </Group>
       </form>
 
-      <Title sx={{ paddingTop: 12, paddingBottom: 12 }}>ShareX Config</Title>
+      <Box mb='md'>
+        <Title>Manage Data</Title>
+        <Text color='gray'>Delete, or export your data into a zip file.</Text>
+      </Box>
+
+      <Group>
+        <Button onClick={openDeleteModal} rightIcon={<TrashIcon />}>Delete All Data</Button>
+        <ExportDataTooltip><Button onClick={exportData} rightIcon={<DownloadIcon />}>Export Data</Button></ExportDataTooltip>
+      </Group>
+      <Card mt={22}>
+        <SmallTable
+          columns={[
+            { id: 'name', name: 'Name' },
+            { id: 'date', name: 'Date' },
+            { id: 'size', name: 'Size' },
+          ]}
+          rows={exports ? exports.map((x, i) => ({
+            name: <Link href={'/api/user/export?name=' + x.full}>Export {i + 1}</Link>,
+            date: x.date.toLocaleString(),
+            size: bytesToRead(x.size),
+          })) : []} />
+      </Card>
+
+      <Title my='md'>ShareX Config</Title>
       <Group>
         <Button onClick={() => genShareX(false)} rightIcon={<DownloadIcon />}>ShareX Config</Button>
         <Button onClick={() => genShareX(true)} rightIcon={<DownloadIcon />}>ShareX Config with Embed</Button>
@@ -167,4 +270,4 @@ export default function Manage() {
       </Group>
     </>
   );
-}
+}

src/components/pages/Stats.tsx

@@ -1,52 +1,10 @@
-import React, { useEffect, useState } from 'react';
-
+import { SimpleGrid, Skeleton, Title } from '@mantine/core';
 import Card from 'components/Card';
-import StatText from 'components/StatText';
+import MutedText from 'components/MutedText';
+import { SmallTable } from 'components/SmallTable';
+import { bytesToRead } from 'lib/clientUtils';
 import useFetch from 'lib/hooks/useFetch';
-import { useStoreSelector } from 'lib/redux/store';
-import { Box, Text, Table, Skeleton, Title, SimpleGrid } from '@mantine/core';
-import { randomId } from '@mantine/hooks';
-
-export function bytesToRead(bytes: number) {
-  if (isNaN(bytes)) return '0.0 B';
-  if (bytes === Infinity) return '0.0 B';
-  const units = ['B', 'kB', 'MB', 'GB', 'TB', 'PB'];
-  let num = 0;
-
-  while (bytes > 1024) {
-    bytes /= 1024;
-    ++num;
-  }
-
-  return `${bytes.toFixed(1)} ${units[num]}`;
-}
-
-function StatTable({ rows, columns }) {
-  return (
-    <Box sx={{ pt: 1 }}>
-      <Table highlightOnHover>
-        <thead>
-          <tr>
-            {columns.map(col => (
-              <th key={randomId()}>{col.name}</th>
-            ))}
-          </tr>
-        </thead>
-        <tbody>
-          {rows.map(row => (
-            <tr key={randomId()}>
-              {columns.map(col => (
-                <td key={randomId()}>
-                  {col.format ? col.format(row[col.id]) : row[col.id]}
-                </td>
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      </Table>
-    </Box>
-  );
-}
+import { useEffect, useState } from 'react';
 
 export default function Stats() {
   const [stats, setStats] = useState(null);
@@ -62,7 +20,7 @@ export default function Stats() {
   
   return (
     <>
-      <Title>Stats</Title>
+      <Title mb='md'>Stats</Title>
       <SimpleGrid
         cols={3}
         spacing='lg'
@@ -71,22 +29,22 @@ export default function Stats() {
         ]}
       >
         <Card name='Size' sx={{ height: '100%' }}>
-          <StatText>{stats ? stats.size : <Skeleton height={8} />}</StatText>
+          <MutedText>{stats ? stats.size : <Skeleton height={8} />}</MutedText>
           <Title order={2}>Average Size</Title>
-          <StatText>{stats ? bytesToRead(stats.size_num / stats.count) : <Skeleton height={8} />}</StatText>
+          <MutedText>{stats ? bytesToRead(stats.size_num / stats.count) : <Skeleton height={8} />}</MutedText>
         </Card>
         <Card name='Images' sx={{ height: '100%' }}>
-          <StatText>{stats ? stats.count : <Skeleton height={8} />}</StatText>
+          <MutedText>{stats ? stats.count : <Skeleton height={8} />}</MutedText>
           <Title order={2}>Views</Title>
-          <StatText>{stats ? `${stats.views_count} (${isNaN(stats.views_count / stats.count) ? 0 : Math.round(stats.views_count / stats.count)})` : <Skeleton height={8} />}</StatText>
+          <MutedText>{stats ? `${stats.views_count} (${isNaN(stats.views_count / stats.count) ? 0 : Math.round(stats.views_count / stats.count)})` : <Skeleton height={8} />}</MutedText>
         </Card>
         <Card name='Users' sx={{ height: '100%' }}>
-          <StatText>{stats ? stats.count_users : <Skeleton height={8} />}</StatText>
+          <MutedText>{stats ? stats.count_users : <Skeleton height={8} />}</MutedText>
         </Card>
       </SimpleGrid>
 
       <Card name='Files per User' mt={22}>
-        <StatTable
+        <SmallTable
           columns={[
             { id: 'username', name: 'Name' },
             { id: 'count', name: 'Files' },
@@ -94,7 +52,7 @@ export default function Stats() {
           rows={stats ? stats.count_by_user : []} />
       </Card>
       <Card name='Types' mt={22}>
-        <StatTable
+        <SmallTable
           columns={[
             { id: 'mimetype', name: 'Type' },
             { id: 'count', name: 'Count' },

src/components/pages/Upload.tsx

@@ -1,42 +1,21 @@
-import React, { useEffect, useState } from 'react';
-
-import { useStoreSelector } from 'lib/redux/store';
-import Link from 'components/Link';
-import { Button, Group, Text, useMantineTheme } from '@mantine/core';
-import { ImageIcon, UploadIcon, CrossCircledIcon } from '@modulz/radix-icons';
-import { Dropzone } from '@mantine/dropzone';
+import { Button, Collapse, Group, Progress, Title, useMantineTheme } from '@mantine/core';
+import { randomId, useClipboard } from '@mantine/hooks';
 import { useNotifications } from '@mantine/notifications';
-import { useClipboard } from '@mantine/hooks';
-
-function ImageUploadIcon({ status, ...props }) {
-  if (status.accepted) {
-    return <UploadIcon {...props} />;
-  }
-
-  if (status.rejected) {
-    return <CrossCircledIcon {...props} />;
-  }
-
-  return <ImageIcon {...props} />;
-}
-
-function getIconColor(status, theme) {
-  return status.accepted
-    ? theme.colors[theme.primaryColor][6]
-    : status.rejected
-      ? theme.colors.red[6]
-      : theme.colorScheme === 'dark'
-        ? theme.colors.dark[0]
-        : theme.black;
-}
+import { CrossCircledIcon, UploadIcon } from '@modulz/radix-icons';
+import Dropzone from 'components/dropzone/Dropzone';
+import FileDropzone from 'components/dropzone/DropzoneFile';
+import Link from 'components/Link';
+import { useStoreSelector } from 'lib/redux/store';
+import { useEffect, useState } from 'react';
 
 export default function Upload() {
-  const theme = useMantineTheme();
   const notif = useNotifications();
   const clipboard = useClipboard();
   const user = useStoreSelector(state => state.user);
 
   const [files, setFiles] = useState([]);
+  const [progress, setProgress] = useState(0);
+  const [loading, setLoading] = useState(false);
 
   useEffect(() => {
     window.addEventListener('paste', (e: ClipboardEvent) => {
@@ -44,13 +23,15 @@ export default function Upload() {
       const blob = item.getAsFile();
       setFiles([...files, new File([blob], blob.name, { type: blob.type })]);
       notif.showNotification({
-        title: 'Image Imported',
+        title: 'Image imported from clipboard',
         message: '',
       });
     });
   });
-  
+
   const handleUpload = async () => {
+    setProgress(0);
+    setLoading(true);
     const body = new FormData();
     for (let i = 0; i !== files.length; ++i) body.append('file', files[i]);
 
@@ -61,56 +42,57 @@ export default function Upload() {
       autoClose: false,
     });
 
-    const res = await fetch('/api/upload', {
-      method: 'POST',
-      headers: {
-        'Authorization': user.token,
-      },
-      body,
+    const req = new XMLHttpRequest();
+    req.upload.addEventListener('progress', e => {
+      if (e.lengthComputable) {
+        setProgress(Math.round(e.loaded / e.total * 100));
+      }
     });
-    const json = await res.json();
-    if (res.ok && json.error === undefined) {
-      notif.updateNotification(id, {
-        title: 'Upload Successful',
-        message: <>Copied first image to clipboard! <br/>{json.files.map(x => (<Link key={x} href={x}>{x}<br/></Link>))}</>,
-        color: 'green',
-        icon: <UploadIcon />,
-      });
-      clipboard.copy(json.url);
-      setFiles([]);
-    } else {
-      notif.updateNotification(id, {
-        title: 'Upload Failed',
-        message: json.error,
-        color: 'red',
-        icon: <CrossCircledIcon />,
-      });
-    }
+
+    req.addEventListener('load', e => {
+      // @ts-ignore not sure why it thinks response doesnt exist, but it does.
+      const json = JSON.parse(e.target.response);
+      setLoading(false);
+
+      if (json.error === undefined) {
+        notif.updateNotification(id, {
+          title: 'Upload Successful',
+          message: <>Copied first image to clipboard! <br />{json.files.map(x => (<Link key={x} href={x}>{x}<br /></Link>))}</>,
+          color: 'green',
+          icon: <UploadIcon />,
+        });
+        clipboard.copy(json.files[0]);
+        setFiles([]);
+      } else {
+        notif.updateNotification(id, {
+          title: 'Upload Failed',
+          message: json.error,
+          color: 'red',
+          icon: <CrossCircledIcon />,
+        });
+      }
+      setProgress(0);
+    }, false);
+
+    req.open('POST', '/api/upload');
+    req.setRequestHeader('Authorization', user.token);
+    req.send(body);
   };
 
   return (
     <>
-      <Dropzone onDrop={(f) => setFiles([...files, ...f])}>
-        {status => (
-          <>
-            <Group position='center' spacing='xl' style={{ minHeight: 220, pointerEvents: 'none' }}>
-              <ImageUploadIcon
-                status={status}
-                style={{ width: 80, height: 80, color: getIconColor(status, theme) }}
-              />
-
-              <div>
-                <Text size='xl' inline>
-                  Drag images here or click to select files
-                </Text>
-              </div>
-            </Group>
-            <Group position='center' spacing='xl' style={{ pointerEvents: 'none' }}>
-              {files.map(file => (<Text key={file.name} weight='bold'>{file.name}</Text>))}
-            </Group>
-          </>
-        )}
+      <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>
       </Dropzone>
+
+      <Collapse in={progress !== 0}>
+        {progress !== 0 && <Progress mt='md' value={progress} animate />}
+      </Collapse>
+
       <Group position='right'>
         <Button leftIcon={<UploadIcon />} mt={12} onClick={handleUpload}>Upload</Button>
       </Group>

src/components/pages/Urls.tsx

@@ -1,11 +1,10 @@
-import React, { useEffect, useState } from 'react';
-
+import { ActionIcon, Button, Card, Group, Modal, SimpleGrid, Skeleton, TextInput, Title } from '@mantine/core';
+import { useClipboard, useForm } from '@mantine/hooks';
+import { useNotifications } from '@mantine/notifications';
+import { CopyIcon, Cross1Icon, Link1Icon, PlusIcon, TrashIcon } from '@modulz/radix-icons';
 import useFetch from 'hooks/useFetch';
 import { useStoreSelector } from 'lib/redux/store';
-import { useClipboard, useForm } from '@mantine/hooks';
-import { CopyIcon, Cross1Icon, Link1Icon, PlusIcon, TrashIcon } from '@modulz/radix-icons';
-import { useNotifications } from '@mantine/notifications';
-import { Modal, Title, Group, Button, Box, Card, TextInput, ActionIcon, SimpleGrid, Skeleton } from '@mantine/core';
+import { useEffect, useState } from 'react';
 
 export default function Urls() {
   const user = useStoreSelector(state => state.user);
@@ -58,12 +57,18 @@ export default function Urls() {
     },
   });
 
-  const onSubmit = async (values) => {
+  const onSubmit = async values => {
     const cleanURL = values.url.trim();
     const cleanVanity = values.vanity.trim();
 
     if (cleanURL === '') return form.setFieldError('url', 'URL can\'t be nothing');
 
+    try {
+      new URL(cleanURL);
+    } catch (e) {
+      return form.setFieldError('url', 'Invalid URL');
+    }
+
     const data = {
       url: cleanURL,
       vanity: cleanVanity === '' ? null : cleanVanity,
@@ -121,8 +126,8 @@ export default function Urls() {
         </form>
       </Modal>
 
-      <Group>
-        <Title sx={{ marginBottom: 12 }}>URLs</Title>
+      <Group mb='md'>
+        <Title>URLs</Title>
         <ActionIcon variant='filled' color='primary' onClick={() => setCreateOpen(true)}><PlusIcon/></ActionIcon>
       </Group>
 

src/components/pages/Users.tsx

@@ -1,12 +1,12 @@
-import React, { useState, useEffect } from 'react';
-import { useStoreSelector } from 'lib/redux/store';
-import useFetch from 'hooks/useFetch';
-import { useRouter } from 'next/router';
+import { ActionIcon, Avatar, Button, Card, Group, Modal, SimpleGrid, Skeleton, Switch, TextInput, Title } from '@mantine/core';
 import { useForm } from '@mantine/hooks';
-import { Avatar, Modal, Title, TextInput, Group, Button, Card, ActionIcon, SimpleGrid, Switch, Skeleton, Checkbox } from '@mantine/core';
-import { Cross1Icon, PlusIcon, TrashIcon } from '@modulz/radix-icons';
-import { useNotifications } from '@mantine/notifications';
 import { useModals } from '@mantine/modals';
+import { useNotifications } from '@mantine/notifications';
+import { Cross1Icon, PlusIcon, TrashIcon } from '@modulz/radix-icons';
+import useFetch from 'hooks/useFetch';
+import { useStoreSelector } from 'lib/redux/store';
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
 
 
 function CreateUserModal({ open, setOpen, updateUsers }) {
@@ -19,7 +19,7 @@ function CreateUserModal({ open, setOpen, updateUsers }) {
   });
   const notif = useNotifications();
 
-  const onSubmit = async (values) => {
+  const onSubmit = async values => {
     const cleanUsername = values.username.trim();
     const cleanPassword = values.password.trim();
     if (cleanUsername === '') return form.setFieldError('username', 'Username can\'t be nothing');
@@ -58,7 +58,7 @@ function CreateUserModal({ open, setOpen, updateUsers }) {
       onClose={() => setOpen(false)}
       title={<Title>Create User</Title>}
     >
-      <form onSubmit={form.onSubmit((v) => onSubmit(v))}>
+      <form onSubmit={form.onSubmit(v => onSubmit(v))}>
         <TextInput id='username' label='Username' {...form.getInputProps('username')} />
         <TextInput id='password' label='Password' type='password' {...form.getInputProps('password')} />
         <Switch mt={12} id='administrator' label='Administrator' {...form.getInputProps('administrator')} />
@@ -109,11 +109,14 @@ export default function Users() {
     title: `Delete ${user.username}?`,
     closeOnConfirm: false,
     centered: true,
+    overlayBlur: 3,
     labels: { confirm: 'Yes', cancel: 'No' },
     onConfirm: () => {
       modals.openConfirmModal({
         title: `Delete ${user.username}'s images?`,
         labels: { confirm: 'Yes', cancel: 'No' },
+        centered: true,
+        overlayBlur: 3,
         onConfirm: () => {
           handleDelete(user, true);
           modals.closeAll();

src/lib/clientUtils.ts

@@ -1,4 +1,4 @@
-import { Image, User } from '@prisma/client';
+import type { Image, User } from '@prisma/client';
 
 export function parse(str: string, image: Image, user: User) {
   if (!str) return null;
@@ -13,4 +13,18 @@ export function parse(str: string, image: Image, user: User) {
     .replace(/{image.created_at.full_string}/gi, image.created_at.toLocaleString())
     .replace(/{image.created_at.time_string}/gi, image.created_at.toLocaleTimeString())
     .replace(/{image.created_at.date_string}/gi, image.created_at.toLocaleDateString());
+}
+
+export function bytesToRead(bytes: number) {
+  if (isNaN(bytes)) return '0.0 B';
+  if (bytes === Infinity) return '0.0 B';
+  const units = ['B', 'kB', 'MB', 'GB', 'TB', 'PB'];
+  let num = 0;
+
+  while (bytes > 1024) {
+    bytes /= 1024;
+    ++num;
+  }
+
+  return `${bytes.toFixed(1)} ${units[num]}`;
 }

src/lib/config.ts

@@ -1,7 +1,6 @@
-import type { Config } from './types';
-import readConfig from './readConfig';
-import validateConfig from '../server/validateConfig';
+import readConfig from './config/readConfig';
+import validateConfig from './config/validateConfig';
 
-if (!global.config) global.config = validateConfig(readConfig()) as unknown as Config;
+if (!global.config) global.config = validateConfig(readConfig());
 
 export default global.config;

src/lib/config/Config.ts

@@ -12,7 +12,7 @@ export interface ConfigCore {
   port: number;
 
   // The PostgreSQL database url
-  database_url: string
+  database_url: string;
 
   // Whether or not to log stuff
   logger: boolean;
@@ -23,11 +23,15 @@ export interface ConfigCore {
 
 export interface ConfigDatasource {
   // The type of datasource
-  type: 'local' | 's3';
+  type: 'local' | 's3' | 'swift';
 
-  // The local datasource
+  // The local datasource, the default
   local: ConfigLocalDatasource;
+
+  // The s3 datasource
   s3?: ConfigS3Datasource;
+  // The Swift datasource
+  swift?: ConfigSwiftDatasource;
 }
 
 export interface ConfigLocalDatasource {
@@ -36,9 +40,35 @@ export interface ConfigLocalDatasource {
 }
 
 export interface ConfigS3Datasource {
+  // The access key id for the s3 bucket
   access_key_id: string;
+
+  // The secret access key for the s3 bucket
   secret_access_key: string;
+
+  // Not required, but if using a non-aws S3 service you can specify the endpoint
+  endpoint?: string;
+
+  // The S3 bucket to store files in
   bucket: string;
+
+  // If true Zipline will attempt to connect to the bucket via the url "https://s3.amazonaws.com/{bucket}/stuff"
+  // If false Zipline will attempt to connect to the bucket via the url "http://{bucket}.s3.amazonaws.com/stuff"
+  force_s3_path: boolean;
+
+  // Region
+  // aws region, default will be us-east-1 (if using a non-aws S3 service this might work for you)
+  region?: string;
+}
+
+export interface ConfigSwiftDatasource {
+  container: string;
+  auth_endpoint: string;
+  username: string;
+  password: string;
+  project_id: string;
+  domain_id?: string;
+  region_id?: string;
 }
 
 export interface ConfigUploader {
@@ -55,7 +85,7 @@ export interface ConfigUploader {
   user_limit: number;
 
   // Disabled extensions to block from uploading
-  disabled_extentions: string[];
+  disabled_extensions: string[];
 }
 
 export interface ConfigUrls {
@@ -81,4 +111,4 @@ export interface Config {
   urls: ConfigUrls;
   ratelimit: ConfigRatelimit;
   datasource: ConfigDatasource;
-}
+}

src/lib/config/readConfig.ts

@@ -1,10 +1,10 @@
 import { existsSync, readFileSync } from 'fs';
 import { join } from 'path';
 import parse from '@iarna/toml/parse-string';
-import Logger from './logger';
-import { Config } from './types';
+import Logger from '../logger';
+import { Config } from './Config';
 
-const e = (val, type, fn) => ({ val, type, fn });
+const e = (val, type, fn: (c: Config, v: any) => void) => ({ val, type, fn });
 
 const envValues = [
   e('SECURE', 'boolean', (c, v) => c.core.secure = v),
@@ -17,15 +17,18 @@ const envValues = [
 
   e('DATASOURCE_TYPE', 'string', (c, v) => c.datasource.type = v),
   e('DATASOURCE_LOCAL_DIRECTORY', 'string', (c, v) => c.datasource.local.directory = v),
-  e('DATASOURCE_S3_ACCESS_KEY_ID', 'string', (c, v) => c.datasource.s3.access_key_id = v ),
+  e('DATASOURCE_S3_ACCESS_KEY_ID', 'string', (c, v) => c.datasource.s3.access_key_id = v),
   e('DATASOURCE_S3_SECRET_ACCESS_KEY', 'string', (c, v) => c.datasource.s3.secret_access_key = v),
+  e('DATASOURCE_S3_ENDPOINT', 'string', (c, v) => c.datasource.s3.endpoint = v ?? null),
+  e('DATASOURCE_S3_FORCE_S3_PATH', 'boolean', (c, v) => c.datasource.s3.force_s3_path = v ?? false),
   e('DATASOURCE_S3_BUCKET', 'string', (c, v) => c.datasource.s3.bucket = v),
+  e('DATASOURCE_S3_REGION', 'string', (c, v) => c.datasource.s3.region = v ?? 'us-east-1'),
 
   e('UPLOADER_ROUTE', 'string', (c, v) => c.uploader.route = v),
   e('UPLOADER_LENGTH', 'number', (c, v) => c.uploader.length = v),
   e('UPLOADER_ADMIN_LIMIT', 'number', (c, v) => c.uploader.admin_limit = v),
   e('UPLOADER_USER_LIMIT', 'number', (c, v) => c.uploader.user_limit = v),
-  e('UPLOADER_DISABLED_EXTS', 'array', (c, v) => v ? c.uploader.disabled_extentions = v : c.uploader.disabled_extentions = []),
+  e('UPLOADER_DISABLED_EXTS', 'array', (c, v) => v ? c.uploader.disabled_extensions = v : c.uploader.disabled_extensions = []),
 
   e('URLS_ROUTE', 'string', (c, v) => c.urls.route = v),
   e('URLS_LENGTH', 'number', (c, v) => c.urls.length = v),
@@ -40,7 +43,7 @@ export default function readConfig(): Config {
     return tryReadEnv();
   } else {
     if (process.env.ZIPLINE_DOCKER_BUILD) return;
-    
+
     Logger.get('config').info('reading config file');
     const str = readFileSync(join(process.cwd(), 'config.toml'), 'utf8');
     const parsed = parse(str);
@@ -68,7 +71,10 @@ function tryReadEnv(): Config {
       s3: {
         access_key_id: undefined,
         secret_access_key: undefined,
+        endpoint: undefined,
         bucket: undefined,
+        force_s3_path: undefined,
+        region: undefined,
       },
     },
     uploader: {
@@ -76,7 +82,7 @@ function tryReadEnv(): Config {
       length: undefined,
       admin_limit: undefined,
       user_limit: undefined,
-      disabled_extentions: undefined,
+      disabled_extensions: undefined,
     },
     urls: {
       route: undefined,
@@ -120,4 +126,4 @@ function parseToBoolean(value) {
 
 function parseToArray(value) {
   return value.split(',');
-}
+}

src/lib/config/validateConfig.ts

@@ -0,0 +1,94 @@
+import { Config } from 'lib/config/Config';
+import { object, bool, string, number, boolean, array } from 'yup';
+
+const validator = object({
+  core: object({
+    secure: bool().default(false),
+    secret: string().min(8).required(),
+    host: string().default('0.0.0.0'),
+    port: number().default(3000),
+    database_url: string().required(),
+    logger: boolean().default(false),
+    stats_interval: number().default(1800),
+  }).required(),
+  datasource: object({
+    type: string().oneOf(['local', 's3', 'swift']).default('local'),
+    local: object({
+      directory: string().default('./uploads'),
+    }),
+    s3: object({
+      access_key_id: string(),
+      secret_access_key: string(),
+      endpoint: string(),
+      bucket: string(),
+      force_s3_path: boolean().default(false),
+      region: string().default('us-east-1'),
+    }).notRequired(),
+    swift: object({
+      username: string(),
+      password: string(),
+      auth_endpoint: string(),
+      container: string(),
+      project_id: string(),
+      domain_id: string().default('default'),
+      region_id: string().nullable(),
+    }),
+  }).required(),
+  uploader: object({
+    route: string().default('/u'),
+    embed_route: string().default('/a'),
+    length: number().default(6),
+    admin_limit: number().default(104900000),
+    user_limit: number().default(104900000),
+    disabled_extensions: array().default([]),
+  }).required(),
+  urls: object({
+    route: string().default('/go'),
+    length: number().default(6),
+  }).required(),
+  ratelimit: object({
+    user: number().default(0),
+    admin: number().default(0),
+  }),
+});
+
+export default function validate(config): Config {
+  try {
+    const validated = validator.validateSync(config, { abortEarly: false });
+    switch (validated.datasource.type) {
+      case 's3': {
+        const errors = [];
+        if (!validated.datasource.s3.access_key_id)
+          errors.push('datasource.s3.access_key_id is a required field');
+        if (!validated.datasource.s3.secret_access_key)
+          errors.push('datasource.s3.secret_access_key is a required field');
+        if (!validated.datasource.s3.bucket)
+          errors.push('datasource.s3.bucket is a required field');
+        if (!validated.datasource.s3.endpoint)
+          errors.push('datasource.s3.endpoint is a required field');
+        if (errors.length) throw { errors };
+        break;
+      }
+      case 'swift': {
+        const errors = [];
+        if (!validated.datasource.swift.container)
+          errors.push('datasource.swift.container is a required field');
+        if (!validated.datasource.swift.project_id)
+          errors.push('datasource.swift.project_id is a required field');
+        if (!validated.datasource.swift.auth_endpoint)
+          errors.push('datasource.swift.auth_endpoint is a required field');
+        if (!validated.datasource.swift.password)
+          errors.push('datasource.swift.password is a required field');
+        if (!validated.datasource.swift.username)
+          errors.push('datasource.swift.username is a required field');
+        if (errors.length) throw { errors };
+        break;
+      }
+    }
+
+    return validated as unknown as Config;
+  } catch (e) {
+    if (process.env.ZIPLINE_DOCKER_BUILD) return null;
+    throw `${e.errors.length} errors occured\n${e.errors.map((x) => '\t' + x).join('\n')}`;
+  }
+}

src/lib/datasource.ts

@@ -0,0 +1,24 @@
+import config from './config';
+import { Swift, Local, S3 } from './datasources';
+import Logger from './logger';
+
+if (!global.datasource) {
+  switch (config.datasource.type) {
+    case 's3':
+      global.datasource = new S3(config.datasource.s3);
+      Logger.get('datasource').info(`using S3(${config.datasource.s3.bucket}) datasource`);
+      break;
+    case 'local':
+      global.datasource = new Local(config.datasource.local.directory);
+      Logger.get('datasource').info(`using Local(${config.datasource.local.directory}) datasource`);
+      break;
+    case 'swift':
+      global.datasource = new Swift(config.datasource.swift);
+      Logger.get('datasource').info(`using Swift(${config.datasource.swift.container}) datasource`);
+      break;
+    default:
+      throw new Error('Invalid datasource type');
+  }
+}
+
+export default global.datasource;

src/lib/datasource/S3.ts

@@ -1,74 +0,0 @@
-import { Datasource } from './datasource';
-import AWS from 'aws-sdk';
-import { Readable } from 'stream';
-
-export class S3 extends Datasource {
-  public name: string = 'S3';
-  public s3: AWS.S3;
-
-  public constructor(
-    public accessKey: string,
-    public secretKey: string,
-    public bucket: string,
-  ) {
-    super();
-    this.s3 = new AWS.S3({
-      accessKeyId: accessKey,
-      secretAccessKey: secretKey,
-    });
-  }
-
-  public async save(file: string, data: Buffer): Promise<void> {
-    return new Promise((resolve, reject) => {
-      this.s3.upload({
-        Bucket: this.bucket,
-        Key: file,
-        Body: data,
-      }, err => {
-        if (err) {
-          reject(err);
-        } else {
-          resolve();
-        }
-      });
-    });
-  }
-
-  public async delete(file: string): Promise<void> {
-    return new Promise((resolve, reject) => {
-      this.s3.deleteObject({
-        Bucket: this.bucket,
-        Key: file,
-      }, err => {
-        if (err) {
-          reject(err);
-        } else {
-          resolve();
-        }
-      });
-    });
-  }
-
-  public get(file: string): Readable {
-    // Unfortunately, aws-sdk is bad and the stream still loads everything into memory.
-    return this.s3.getObject({
-      Bucket: this.bucket,
-      Key: file,
-    }).createReadStream();
-  }
-
-  public async size(): Promise<number> {
-    return new Promise((resolve, reject) => {
-      this.s3.listObjects({
-        Bucket: this.bucket,
-      }, (err, data) => {
-        if (err) {
-          reject(err);
-        } else {
-          const size = data.Contents.reduce((acc, cur) => acc + cur.Size, 0);
-          resolve(size);
-        }
-      });
-    });
-  }
-}

src/lib/datasource/index.ts

@@ -1,4 +0,0 @@
-export { Datasource } from './datasource';
-export { Local } from './Local';
-export { S3 } from './S3';
-

src/lib/datasources/Datasource.ts

@@ -2,9 +2,9 @@ import { Readable } from 'stream';
 
 export abstract class Datasource {
   public name: string;
-  
+
   public abstract save(file: string, data: Buffer): Promise<void>;
   public abstract delete(file: string): Promise<void>;
-  public abstract get(file: string): Readable;
+  public abstract get(file: string): Readable | Promise<Readable>;
   public abstract size(): Promise<number>;
 }

src/lib/datasources/Local.ts

@@ -1,7 +1,7 @@
-import { createReadStream, ReadStream } from 'fs';
+import { createReadStream, existsSync, ReadStream } from 'fs';
 import { readdir, rm, stat, writeFile } from 'fs/promises';
 import { join } from 'path';
-import { Datasource } from './datasource';
+import { Datasource } from '.';
 
 export class Local extends Datasource {
   public name: string = 'local';
@@ -19,8 +19,11 @@ export class Local extends Datasource {
   }
 
   public get(file: string): ReadStream {
+    const full = join(process.cwd(), this.path, file);
+    if (!existsSync(full)) return null;
+
     try {
-      return createReadStream(join(process.cwd(), this.path, file));
+      return createReadStream(full);
     } catch (e) {
       return null;
     }

src/lib/datasources/S3.ts

@@ -0,0 +1,52 @@
+import { Datasource } from '.';
+import { Readable } from 'stream';
+import { ConfigS3Datasource } from 'lib/config/Config';
+import { Client } from 'minio';
+
+export class S3 extends Datasource {
+  public name: string = 'S3';
+  public s3: Client;
+
+  public constructor(
+    public config: ConfigS3Datasource,
+  ) {
+    super();
+    this.s3 = new Client({
+      endPoint: config.endpoint,
+      accessKey: config.access_key_id,
+      secretKey: config.secret_access_key,
+      pathStyle: config.force_s3_path,
+      region: config.region,
+    });
+  }
+
+  public async save(file: string, data: Buffer): Promise<void> {
+    await this.s3.putObject(this.config.bucket, file, data);
+  }
+
+  public async delete(file: string): Promise<void> {
+    await this.s3.removeObject(this.config.bucket, file);
+  }
+
+  public get(file: string): Promise<Readable> {
+    return new Promise((res, rej) => {
+      this.s3.getObject(this.config.bucket, file, (err, stream) => {
+        if (err) res(null);
+        else res(stream);
+      });
+    });
+  }
+
+  public async size(): Promise<number> {
+    return new Promise((res, rej) => {
+      const objects = this.s3.listObjectsV2(this.config.bucket, '', true);
+      let size = 0;
+
+      objects.on('data', item => size += item.size);
+      objects.on('end', err => {
+        if (err) rej(err);
+        else res(size);
+      });
+    });
+  }
+}

src/lib/datasources/Swift.ts

@@ -0,0 +1,210 @@
+import { Datasource } from '.';
+import { Readable } from 'stream';
+import { ConfigSwiftDatasource } from 'lib/config/Config';
+
+interface SwiftContainerOptions {
+  auth_endpoint_url: string;
+  credentials: {
+    username: string;
+    password: string;
+    project_id: string;
+    domain_id: string;
+    container: string;
+    interface?: string;
+    region_id: string;
+  };
+  refreshMargin?: number;
+}
+
+interface SwiftAuth {
+  token: string;
+  expires: Date;
+  swiftURL: string;
+}
+
+interface SwiftObject {
+  bytes: number;
+  content_type: string;
+  hash: string;
+  name: string;
+  last_modified: string;
+}
+
+class SwiftContainer {
+  auth: SwiftAuth | null;
+
+  constructor(private options: SwiftContainerOptions) {
+    this.auth = null;
+  }
+
+  private findEndpointURL(catalog: any[], service: string): string | null {
+    const catalogEntry = catalog.find((x) => x.name === service);
+    if (!catalogEntry) return null;
+
+    const endpoint = catalogEntry.endpoints.find(
+      (x: any) =>
+        x.interface === (this.options.credentials.interface || 'public') &&
+        (this.options.credentials.region_id
+          ? x.region_id == this.options.credentials.region_id
+          : true)
+    );
+
+    return endpoint ? endpoint.url : null;
+  }
+
+  private async getCredentials(): Promise<SwiftAuth> {
+    const payload = {
+      auth: {
+        identity: {
+          methods: ['password'],
+          password: {
+            user: {
+              name: this.options.credentials.username,
+              password: this.options.credentials.password,
+              domain: {
+                id: this.options.credentials.domain_id || 'default',
+              },
+            },
+          },
+        },
+        scope: {
+          project: {
+            id: this.options.credentials.project_id,
+            domain: {
+              id: this.options.credentials.domain_id || 'default',
+            },
+          },
+        },
+      },
+    };
+
+    const { json, headers, error } = await fetch(`${this.options.auth_endpoint_url}/auth/tokens`, {
+      body: JSON.stringify(payload),
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+    }).then(async (e) => {
+      try {
+        const json = await e.json();
+        return { json, headers: e.headers, error: null };
+      } catch (e) {
+        return { json: null, headers: null, error: e };
+      }
+    });
+
+    if (error || !json || !headers || json.error) throw new Error('Could not retrieve credentials from OpenStack, check your config file');
+
+    const catalog = json.token.catalog;
+    // many Swift clouds use ceph radosgw to provide swift
+    const swiftURL = this.findEndpointURL(catalog, 'swift') || this.findEndpointURL(catalog, 'radosgw-swift');
+    if (!swiftURL) throw new Error('Couldn\'t find any "swift" or "radosgw-swift" service in the catalog');
+
+    return {
+      token: headers.get('x-subject-token'),
+      expires: new Date(json.token.expires_at),
+      swiftURL,
+    };
+  }
+
+  private async authenticate() {
+    if (!this.auth) this.auth = await this.getCredentials();
+    const authExpiry = new Date(Date.now() + this.options.refreshMargin || 10_000);
+
+    if (authExpiry > this.auth.expires) this.auth = await this.getCredentials();
+    const validAuth = this.auth;
+
+    return { swiftURL: validAuth.swiftURL, token: validAuth.token };
+  }
+
+  private generateHeaders(token: string, extra?: any) {
+    return { accept: 'application/json', 'x-auth-token': token, ...extra };
+  }
+
+  public async listObjects(query?: string): Promise<SwiftObject[]> {
+    const auth = await this.authenticate();
+    return await fetch(`${auth.swiftURL}/${this.options.credentials.container}${query ? `${query.startsWith('?') ? '' : '?'}${query}` : ''}`, {
+      method: 'GET',
+      headers: this.generateHeaders(auth.token),
+    }).then((e) => e.json());
+  }
+
+  public async uploadObject(name: string, data: Buffer): Promise<any> {
+    const auth = await this.authenticate();
+
+    return fetch(`${auth.swiftURL}/${this.options.credentials.container}/${name}`, {
+      method: 'PUT',
+      headers: this.generateHeaders(auth.token),
+      body: data,
+    });
+  }
+  public async deleteObject(name: string): Promise<any> {
+    const auth = await this.authenticate();
+
+    return fetch(`${auth.swiftURL}/${this.options.credentials.container}/${name}`, {
+      method: 'DELETE',
+      headers: this.generateHeaders(auth.token),
+    });
+  }
+  public async getObject(name: string): Promise<Readable> {
+    const auth = await this.authenticate();
+    const arrayBuffer = await fetch(`${auth.swiftURL}/${this.options.credentials.container}/${name}`, {
+      method: 'GET',
+      headers: this.generateHeaders(auth.token, { Accept: '*/*' }),
+    }).then((e) => e.arrayBuffer());
+
+    return Readable.from(Buffer.from(arrayBuffer));
+  }
+}
+
+export class Swift extends Datasource {
+  public name: string = 'Swift';
+  container: SwiftContainer;
+
+  public constructor(public config: ConfigSwiftDatasource) {
+    super();
+    this.container = new SwiftContainer({
+      auth_endpoint_url: config.auth_endpoint,
+      credentials: {
+        username: config.username,
+        password: config.password,
+        project_id: config.project_id,
+        domain_id: config.domain_id || 'default',
+        container: config.container,
+        region_id: config.region_id,
+      },
+    });
+  }
+
+  public async save(file: string, data: Buffer): Promise<void> {
+    try {
+      return this.container.uploadObject(file, data);
+    } catch {
+      return null;
+    }
+  }
+
+  public async delete(file: string): Promise<void> {
+    try {
+      return this.container.deleteObject(file);
+    } catch {
+      return null;
+    }
+  }
+
+  public get(file: string): Promise<Readable> | Readable {
+    try {
+      return this.container.getObject(file);
+    } catch {
+      return null;
+    }
+  }
+
+  public async size(): Promise<number> {
+    return this.container
+      .listObjects()
+      .then((objects) => objects.reduce((acc, object) => acc + object.bytes, 0))
+      .catch(() => 0);
+  }
+}

src/lib/datasources/index.ts

@@ -0,0 +1,4 @@
+export { Datasource } from './Datasource';
+export { Local } from './Local';
+export { S3 } from './S3';
+export { Swift } from './Swift';

src/lib/ds.ts

@@ -1,20 +0,0 @@
-import config from './config';
-import { S3, Local } from './datasource';
-import Logger from './logger';
-
-if (!global.datasource) {
-  switch (config.datasource.type) {
-  case 's3':
-    Logger.get('datasource').info(`Using S3(${config.datasource.s3.bucket}) datasource`);
-    global.datasource = new S3(config.datasource.s3.access_key_id, config.datasource.s3.secret_access_key, config.datasource.s3.bucket);
-    break;
-  case 'local':
-    Logger.get('datasource').info(`Using local(${config.datasource.local.directory}) datasource`);
-    global.datasource = new Local(config.datasource.local.directory);
-    break;
-  default:
-    throw new Error('Invalid datasource type');
-  }
-}
-
-export default global.datasource;

src/lib/exts.ts

@@ -1,6 +1,6 @@
 // https://github.com/toptal/haste-server/blob/master/static/application.js#L167-L174
 // Popular extension map
-module.exports = {
+const exts = {
   rb: 'ruby',
   py: 'python',
   pl: 'perl',
@@ -35,4 +35,6 @@ module.exports = {
   txt: '',
   coffee: 'coffee',
   swift: 'swift',
-};
+};
+
+export default exts;

src/lib/logger.ts

@@ -10,7 +10,8 @@ export default class Logger {
   public name: string;
 
   static get(clas: any) {
-    if (typeof clas !== 'function') if (typeof clas !== 'string') throw new Error('not string/function');
+    if (typeof clas !== 'function')
+      if (typeof clas !== 'string') throw new Error('not string/function');
 
     const name = clas.name ?? clas;
 
@@ -21,25 +22,31 @@ export default class Logger {
     this.name = name;
   }
 
-  info(...args) {
+  info(...args: any[]) {
     console.log(this.formatMessage(LoggerLevel.INFO, this.name, args.join(' ')));
   }
 
   error(...args: any[]) {
-    console.log(this.formatMessage(LoggerLevel.ERROR, this.name, args.map(error => error.stack ?? error).join(' ')));
+    console.log(
+      this.formatMessage(
+        LoggerLevel.ERROR,
+        this.name,
+        args.map((error) => error.stack ?? error).join(' ')
+      )
+    );
   }
 
-  formatMessage(level: LoggerLevel, name, message) {
+  formatMessage(level: LoggerLevel, name: string, message: string) {
     const time = format(new Date(), 'YYYY-MM-DD hh:mm:ss,SSS A');
     return `${time} ${this.formatLevel(level)} [${blueBright(name)}] ${message}`;
   }
 
   formatLevel(level: LoggerLevel) {
     switch (level) {
-    case LoggerLevel.INFO:
-      return cyan('INFO ');
-    case LoggerLevel.ERROR:
-      return red('ERROR');
+      case LoggerLevel.INFO:
+        return cyan('INFO ');
+      case LoggerLevel.ERROR:
+        return red('ERROR');
     }
   }
-};
+}

src/lib/middleware/withZipline.ts

@@ -2,7 +2,7 @@ import type { NextApiRequest, NextApiResponse } from 'next';
 import type { CookieSerializeOptions } from 'cookie';
 
 import { serialize } from 'cookie';
-import { sign64, unsign64 } from '../util';
+import { sign64, unsign64 } from 'lib/util';
 import config from 'lib/config';
 import prisma from 'lib/prisma';
 
@@ -36,8 +36,8 @@ export type NextApiRes = NextApiResponse & {
   error: (message: string) => void;
   forbid: (message: string, extra?: any) => void;
   bad: (message: string) => void;
-  json: (json: any) => void;
-  ratelimited: () => void;
+  json: (json: Record<string, any>) => void;
+  ratelimited: (remaining: number) => void;
   setCookie: (name: string, value: unknown, options: CookieSerializeOptions) => void;
 }
 
@@ -69,9 +69,9 @@ export const withZipline = (handler: (req: NextApiRequest, res: NextApiResponse)
     });
   };
 
-  res.ratelimited = () => {
+  res.ratelimited = (remaining: number) => {
     res.status(429);
-
+    res.setHeader('X-Ratelimit-Remaining', Math.floor(remaining / 1000));
     res.json({
       error: '429: ratelimited',
     });

src/lib/mimes.ts

@@ -1,4 +1,4 @@
-module.exports = {
+const mimes = {
   '.aac': 'audio/aac',
   '.abw': 'application/x-abiword',
   '.arc': 'application/x-freearc',
@@ -75,4 +75,6 @@ module.exports = {
   '.3gp': 'video/3gpp',
   '.3g2': 'video/3gpp2',
   '.7z': 'application/x-7z-compressed',
-};
+};
+
+export default mimes;

src/lib/redux/store.ts

@@ -1,54 +1,13 @@
-// https://github.com/mikecao/umami/blob/master/redux/store.js
-import { useMemo } from 'react';
-import { Action, CombinedState, configureStore, EnhancedStore } from '@reduxjs/toolkit';
-import thunk, { ThunkAction } from 'redux-thunk';
+import { configureStore } from '@reduxjs/toolkit';
 import rootReducer from './reducers';
-import { User } from './reducers/user';
 import { useDispatch, TypedUseSelectorHook, useSelector } from 'react-redux';
 
-let store: EnhancedStore<CombinedState<{
-  user: User;
-}>>;
-
-export function getStore(preloadedState) {
-  return configureStore({
-    reducer: rootReducer,
-    middleware: [thunk],
-    preloadedState,
-  });
-}
-
-export const initializeStore = preloadedState => {
-  let _store = store ?? getStore(preloadedState);
-
-  if (preloadedState && store) {
-    _store = getStore({
-      ...store.getState(),
-      ...preloadedState,
-    });
-    store = undefined;
-  }
-
-  if (typeof window === 'undefined') return _store;
-  if (!store) store = _store;
-
-  return _store;
-};
-
-export function useStore(initialState?: User) {
-  return useMemo(() => initializeStore(initialState), [initialState]);
-}
+export const store = configureStore({
+  reducer: rootReducer,
+});
 
 export type AppState = ReturnType<typeof store.getState>
-
 export type AppDispatch = typeof store.dispatch
 
-export type AppThunk<ReturnType = void> = ThunkAction<
-  ReturnType,
-  AppState,
-  unknown,
-  Action<User>
->
-
 export const useStoreDispatch = () => useDispatch<AppDispatch>();
 export const useStoreSelector: TypedUseSelectorHook<AppState> = useSelector;

src/lib/util.ts

@@ -2,9 +2,8 @@ import { createHmac, randomBytes, timingSafeEqual } from 'crypto';
 import { hash, verify } from 'argon2';
 import { readdir, stat } from 'fs/promises';
 import { join } from 'path';
-import prisma from './prisma';
+import prisma from 'lib/prisma';
 import { InvisibleImage, InvisibleUrl } from '@prisma/client';
-import config from './config';
 
 export async function hashPassword(s: string): Promise<string> {
   return await hash(s);

src/pages/404.tsx

@@ -1,19 +1,25 @@
 import React from 'react';
-import { Box, Text } from '@mantine/core';
+import { Box, Button, Stack, Text, Title } from '@mantine/core';
+import Link from 'components/Link';
+import MutedText from 'components/MutedText';
 
 export default function FourOhFour() {
   return (
     <>
-      <Box
+      <Stack
         sx={{
           display: 'flex',
           alignItems: 'center',
           minHeight: '100vh',
           justifyContent: 'center',
+          position: 'relative',
         }}
+        spacing='sm'
       >
-        <Text size='xl'>404 - Not Found</Text>
-      </Box>
+        <Title sx={{ fontSize: 220, fontWeight: 900, lineHeight: .8 }}>404</Title>
+        <MutedText sx={{ fontSize: 40, fontWeight: 500 }}>This page does not exist!</MutedText>
+        <Button component={Link} href='/dashboard'>Head to the Dashboard</Button>
+      </Stack>
     </>
   );
 }

src/pages/500.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Button, Stack, Title } from '@mantine/core';
+import Link from 'components/Link';
+import MutedText from 'components/MutedText';
+
+export default function FiveHundred() {
+  return (
+    <>
+      <Stack
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          minHeight: '100vh',
+          justifyContent: 'center',
+          position: 'relative',
+        }}
+        spacing='sm'
+      >
+        <Title sx={{ fontSize: 220, fontWeight: 900, lineHeight: .8 }}>500</Title>
+        <MutedText sx={{ fontSize: 40, fontWeight: 500 }}>Internal Server Error</MutedText>
+        <Button component={Link} href='/dashboard'>Head to the Dashboard</Button>
+      </Stack>
+    </>
+  );
+}

src/pages/[...id].tsx

@@ -5,7 +5,7 @@ import { Box, Button, Modal, PasswordInput } from '@mantine/core';
 import config from 'lib/config';
 import prisma from 'lib/prisma';
 import { parse } from 'lib/clientUtils';
-import * as exts from '../../scripts/exts';
+import exts from 'lib/exts';
 
 export default function EmbeddedImage({ image, user, pass }) {
   const dataURL = (route: string) => `${route}/${image.file}`;
@@ -30,14 +30,15 @@ export default function EmbeddedImage({ image, user, pass }) {
   };
 
   const updateImage = async (url?: string) => {
+
     const imageEl = document.getElementById('image_content') as HTMLImageElement;
 
     const img = new Image();
-    img.addEventListener('load', function() {
+    img.addEventListener('load', function () {
       if (this.naturalWidth > innerWidth) imageEl.width = Math.floor(this.naturalWidth * Math.min((innerHeight / this.naturalHeight), (innerWidth / this.naturalWidth)));
       else imageEl.width = this.naturalWidth;
     });
-    
+
     img.src = url || dataURL('/r');
     if (url) {
       imageEl.src = url;
@@ -62,8 +63,19 @@ export default function EmbeddedImage({ image, user, pass }) {
             <meta property='theme-color' content={user.embedColor} />
           </>
         )}
-        <meta property='og:image' content={dataURL('/r')} />
-        <meta property='twitter:card' content='summary_large_image' />
+        {image.mimetype.startsWith('image') && (
+          <>
+            <meta property='og:image' content={dataURL('/r')} />
+            <meta property='twitter:card' content='summary_large_image' />
+          </>
+        )}
+        {image.mimetype.startsWith('video') && (
+          <>
+            <meta property='og:video' content={dataURL('/r')} />
+            <meta property='og:video:url' content={dataURL('/r')} />
+            <meta property='og:video:type' content={image.mimetype} />
+          </>
+        )}
         <title>{image.file}</title>
       </Head>
       <Modal
@@ -71,9 +83,10 @@ export default function EmbeddedImage({ image, user, pass }) {
         onClose={() => setOpened(false)}
         title='Password Protected'
         centered={true}
-        hideCloseButton={true}
+        withCloseButton={true}
         closeOnEscape={false}
         closeOnClickOutside={false}
+        overlayBlur={3}
       >
         <PasswordInput label='Password' placeholder='Password' error={error} value={password} onChange={e => setPassword(e.target.value)} />
         <Button fullWidth onClick={() => check()} mt='md'>
@@ -88,18 +101,31 @@ export default function EmbeddedImage({ image, user, pass }) {
           justifyContent: 'center',
         }}
       >
-        <img src={dataURL('/r')} alt={dataURL('/r')} id='image_content' />
+        {image.mimetype.startsWith('image') && (
+          <img src={dataURL('/r')} alt={dataURL('/r')} id='image_content' />
+        )}
+
+        {image.mimetype.startsWith('video') && (
+          <video
+            src={dataURL('/r')}
+            controls={true}
+            autoPlay={true}
+            id='image_content'
+          />
+        )}
       </Box>
     </>
   );
 }
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
-  const id = context.params.id[1];
   const route = context.params.id[0];
-  const routes = [config.uploader.route.substring(1), config.urls.route.substring(1)];
-  if (!routes.includes(route)) return { notFound: true };
-  if (route === routes[1]) {
+  const serve_on_root = /(^[^\\.]+\.[^\\.]+)/.test(route);
+
+  const id = serve_on_root ? route : context.params.id[1];
+  const uploader_route = config.uploader.route.substring(1);
+
+  if (route === config.urls.route.substring(1)) {
     const url = await prisma.url.findFirst({
       where: {
         OR: [
@@ -121,7 +147,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
       },
     };
 
-  } else {
+  } else if (uploader_route === '' ? /(^[^\\.]+\.[^\\.]+)/.test(route) : route === uploader_route) {
     const image = await prisma.image.findFirst({
       where: {
         OR: [
@@ -166,10 +192,10 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
       },
     };
 
-    if (!image.mimetype.startsWith('image')) {
-      const { default: datasource } = await import('lib/ds');
+    if (!image.mimetype.startsWith('image') && !image.mimetype.startsWith('video')) {
+      const { default: datasource } = await import('lib/datasource');
 
-      const data = datasource.get(image.file);
+      const data = await datasource.get(image.file);
       if (!data) return { notFound: true };
 
       data.pipe(context.res);
@@ -184,5 +210,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
         pass,
       },
     };
+  } else {
+    return { notFound: true };
   }
-};
+};

src/pages/_app.tsx

@@ -1,17 +1,14 @@
 import React from 'react';
 import { Provider } from 'react-redux';
 import Head from 'next/head';
-import { useStore } from 'lib/redux/store';
+import { store } from 'lib/redux/store';
 import ZiplineTheming from 'components/Theming';
 
 export default function MyApp({ Component, pageProps }) {
-  const store = useStore();
-
   return (
     <Provider store={store}>
       <Head>
         <title>{Component.title}</title>
-        <meta name='viewport' content='minimum-scale=1, initial-scale=1, width=device-width' />
       </Head>
       <ZiplineTheming Component={Component} pageProps={pageProps} />
     </Provider>

src/pages/_error.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Button, Stack, Title } from '@mantine/core';
+import Link from 'components/Link';
+import MutedText from 'components/MutedText';
+
+export default function Error({ statusCode }) {
+  return (
+    <>
+      <Stack
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          minHeight: '100vh',
+          justifyContent: 'center',
+          position: 'relative',
+        }}
+        spacing='sm'
+      >
+        <Title sx={{ fontSize: 220, fontWeight: 900, lineHeight: .8 }}>{statusCode}</Title>
+        <MutedText sx={{ fontSize: 40, fontWeight: 500 }}>Something went wrong...</MutedText>
+        <Button component={Link} href='/dashboard'>Head to the Dashboard</Button>
+      </Stack>
+    </>
+  );
+}
+
+export function getInitialProps({ res, err }) {
+  const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
+  return { pageProps: { statusCode } };
+}

src/pages/api/auth/image.ts

@@ -1,8 +1,8 @@
 import prisma from 'lib/prisma';
 import { NextApiReq, NextApiRes, withZipline } from 'middleware/withZipline';
 import { checkPassword } from 'lib/util';
-import datasource from 'lib/ds';
-import mimes from '../../../../scripts/mimes';
+import datasource from 'lib/datasource';
+import mimes from 'lib/mimes';
 import { extname } from 'path';
 
 async function handler(req: NextApiReq, res: NextApiRes) {
@@ -20,7 +20,7 @@ async function handler(req: NextApiReq, res: NextApiRes) {
   const valid = await checkPassword(password as string, image.password);
   if (!valid) return res.forbid('Wrong password');
 
-  const data = datasource.get(image.file);
+  const data = await datasource.get(image.file);
   if (!data) return res.error('Image not found');
   const mimetype = mimes[extname(image.file)] ?? 'application/octet-stream';
   res.setHeader('Content-Type', mimetype);

src/pages/api/upload.ts

@@ -6,8 +6,8 @@ import { createInvisImage, randomChars, hashPassword } from 'lib/util';
 import Logger from 'lib/logger';
 import { ImageFormat, InvisibleImage } from '@prisma/client';
 import { format as formatDate } from 'fecha';
-import { v4 } from 'uuid';
-import datasource from 'lib/ds';
+import datasource from 'lib/datasource';
+import { randomUUID } from 'crypto';
 
 const uploader = multer();
 
@@ -22,7 +22,21 @@ async function handler(req: NextApiReq, res: NextApiRes) {
   });
 
   if (!user) return res.forbid('authorization incorect');
-  if (user.ratelimited) return res.ratelimited();
+  if (user.ratelimit) {
+    const remaining = user.ratelimit.getTime() - Date.now();
+    if (remaining <= 0) {
+      await prisma.user.update({
+        where: {
+          id: user.id,
+        },
+        data: {
+          ratelimit: null,
+        },
+      });
+    } else {
+      return res.ratelimited(remaining);
+    }
+  }
 
   await run(uploader.array('file'))(req, res);
 
@@ -38,22 +52,22 @@ async function handler(req: NextApiReq, res: NextApiRes) {
     if (file.size > zconfig.uploader[user.administrator ? 'admin_limit' : 'user_limit']) return res.error(`file[${i}] size too big`);
 
     const ext = file.originalname.split('.').pop();
-    if (zconfig.uploader.disabled_extentions.includes(ext)) return res.error('disabled extension recieved: ' + ext);
+    if (zconfig.uploader.disabled_extensions.includes(ext)) return res.error('disabled extension recieved: ' + ext);
     let fileName: string;
 
     switch (format) {
-    case ImageFormat.RANDOM:
-      fileName = randomChars(zconfig.uploader.length);
-      break;
-    case ImageFormat.DATE:
-      fileName = formatDate(new Date(), 'YYYY-MM-DD_HH:mm:ss');
-      break;
-    case ImageFormat.UUID:
-      fileName = v4();
-      break;
-    case ImageFormat.NAME:
-      fileName = file.originalname.split('.')[0];
-      break;
+      case ImageFormat.RANDOM:
+        fileName = randomChars(zconfig.uploader.length);
+        break;
+      case ImageFormat.DATE:
+        fileName = formatDate(new Date(), 'YYYY-MM-DD_HH:mm:ss');
+        break;
+      case ImageFormat.UUID:
+        fileName = randomUUID({ disableEntropyCache: true });
+        break;
+      case ImageFormat.NAME:
+        fileName = file.originalname.split('.')[0];
+        break;
     }
 
     let password = null;
@@ -79,34 +93,32 @@ async function handler(req: NextApiReq, res: NextApiRes) {
     Logger.get('image').info(`User ${user.username} (${user.id}) uploaded an image ${image.file} (${image.id})`);
     if (user.domains.length) {
       const domain = user.domains[Math.floor(Math.random() * user.domains.length)];
-      files.push(`${domain}${zconfig.uploader.route}/${invis ? invis.invis : image.file}`);
+      files.push(`${domain}${zconfig.uploader.route === '/' ? '' : zconfig.uploader.route}/${invis ? invis.invis : image.file}`);
     } else {
-      files.push(`${zconfig.core.secure ? 'https' : 'http'}://${req.headers.host}${zconfig.uploader.route}/${invis ? invis.invis : image.file}`);
+      files.push(`${zconfig.core.secure ? 'https' : 'http'}://${req.headers.host}${zconfig.uploader.route === '/' ? '' : zconfig.uploader.route}/${invis ? invis.invis : image.file}`);
     }
   }
 
-  if (user.administrator && zconfig.ratelimit.admin !== 0) {
+  if (user.administrator && zconfig.ratelimit.admin > 0) {
     await prisma.user.update({
       where: {
         id: user.id,
       },
       data: {
-        ratelimited: true,
+        ratelimit: new Date(Date.now() + (zconfig.ratelimit.admin * 1000)),
       },
     });
-    setTimeout(async () => await prisma.user.update({ where: { id: user.id }, data: { ratelimited: false } }), zconfig.ratelimit.admin * 1000).unref();
-  }
-
-  if (!user.administrator && zconfig.ratelimit.user !== 0) {
-    await prisma.user.update({
-      where: {
-        id: user.id,
-      },
-      data: {
-        ratelimited: true,
-      },
-    });
-    setTimeout(async () => await prisma.user.update({ where: { id: user.id }, data: { ratelimited: false } }), zconfig.ratelimit.user * 1000).unref();
+  } else if (!user.administrator && zconfig.ratelimit.user > 0) {
+    if (user.administrator && zconfig.ratelimit.user > 0) {
+      await prisma.user.update({
+        where: {
+          id: user.id,
+        },
+        data: {
+          ratelimit: new Date(Date.now() + (zconfig.ratelimit.user * 1000)),
+        },
+      });
+    }
   }
 
   return res.json({ files });

src/pages/api/user/export.ts

@@ -0,0 +1,142 @@
+import { NextApiReq, NextApiRes, withZipline } from 'middleware/withZipline';
+import prisma from 'lib/prisma';
+import Logger from 'lib/logger';
+import { Zip, ZipPassThrough } from 'fflate';
+import datasource from 'lib/datasource';
+import { readdir, stat } from 'fs/promises';
+import { createReadStream, createWriteStream } from 'fs';
+
+async function handler(req: NextApiReq, res: NextApiRes) {
+  const user = await req.user();
+  if (!user) return res.forbid('not logged in');
+
+  if (req.method === 'POST') {
+    const files = await prisma.image.findMany({
+      where: {
+        userId: user.id,
+      },
+    });
+
+    const zip = new Zip();
+    const export_name = `zipline_export_${user.id}_${Date.now()}.zip`;
+    const write_stream = createWriteStream(`/tmp/${export_name}`);
+
+    // i found this on some stack overflow thing, forgot the url
+    const onBackpressure = (stream, outputStream, cb) => {
+      const runCb = () => {
+        // Pause if either output or internal backpressure should be applied
+        cb(applyOutputBackpressure || backpressureBytes > backpressureThreshold);
+      };
+
+      // Internal backpressure (for when AsyncZipDeflate is slow)
+      const backpressureThreshold = 65536;
+      let backpressure = [];
+      let backpressureBytes = 0;
+      const push = stream.push;
+      stream.push = (dat, final) => {
+        backpressure.push(dat.length);
+        backpressureBytes += dat.length;
+        runCb();
+        push.call(stream, dat, final);
+      };
+      let ondata = stream.ondata;
+      const ondataPatched = (err, dat, final) => {
+        ondata.call(stream, err, dat, final);
+        backpressureBytes -= backpressure.shift();
+        runCb();
+      };
+      if (ondata) {
+        stream.ondata = ondataPatched;
+      } else {
+        // You can remove this condition if you make sure to
+        // call zip.add(file) before calling onBackpressure
+        Object.defineProperty(stream, 'ondata', {
+          get: () => ondataPatched,
+          set: cb => ondata = cb,
+        });
+      }
+
+      // Output backpressure (for when outputStream is slow)
+      let applyOutputBackpressure = false;
+      const write = outputStream.write;
+      outputStream.write = (data) => {
+        const outputNotFull = write.call(outputStream, data);
+        applyOutputBackpressure = !outputNotFull;
+        runCb();
+      };
+      outputStream.on('drain', () => {
+        applyOutputBackpressure = false;
+        runCb();
+      });
+    };
+
+
+
+    zip.ondata = async (err, data, final) => {
+      if (!err) {
+        write_stream.write(data);
+        if (final) {
+          write_stream.close();
+          Logger.get('user').info(`Export for ${user.username} (${user.id}) has completed and is available at ${export_name}`);
+        }
+      } else {
+        write_stream.close();
+
+        Logger.get('user').error(`Export for ${user.username} (${user.id}) has failed\n${err}`);
+      }
+    };
+
+    Logger.get('user').info(`Export for ${user.username} (${user.id}) has started`);
+    for (let i = 0; i !== files.length; ++i) {
+      const file = files[i];
+      const stream = await datasource.get(file.file);
+      if (stream) {
+        const def = new ZipPassThrough(file.file);
+        zip.add(def);
+        onBackpressure(def, stream, shouldApplyBackpressure => {
+          if (shouldApplyBackpressure) {
+            stream.pause();
+          } else if (stream.isPaused()) {
+            stream.resume();
+          }
+        });
+        stream.on('data', c => def.push(c));
+        stream.on('end', () => def.push(new Uint8Array(0), true));
+      }
+    }
+
+    zip.end();
+
+    res.json({
+      url: '/api/user/export?name=' + export_name,
+    });
+  } else {
+    const export_name = req.query.name as string;
+    if (export_name) {
+      const parts = export_name.split('_');
+      if (Number(parts[2]) !== user.id) return res.forbid('cannot access export');
+
+      const stream = createReadStream(`/tmp/${export_name}`);
+
+      res.setHeader('Content-Type', 'application/zip');
+      res.setHeader('Content-Disposition', `attachment; filename="${export_name}"`);
+      stream.pipe(res);
+    } else {
+      const files = await readdir('/tmp');
+      const exp = files.filter(f => f.startsWith('zipline_export_'));
+      const exports = [];
+      for (let i = 0; i !== exp.length; ++i) {
+        const name = exp[i];
+        const stats = await stat(`/tmp/${name}`);
+
+        exports.push({ name, size: stats.size });
+      }
+
+      res.json({
+        exports,
+      });
+    }
+  }
+}
+
+export default withZipline(handler);

src/pages/api/user/files.ts

@@ -2,27 +2,48 @@ import { NextApiReq, NextApiRes, withZipline } from 'middleware/withZipline';
 import prisma from 'lib/prisma';
 import { chunk } from 'lib/util';
 import Logger from 'lib/logger';
-import datasource from 'lib/ds';
+import datasource from 'lib/datasource';
 
 async function handler(req: NextApiReq, res: NextApiRes) {
   const user = await req.user();
   if (!user) return res.forbid('not logged in');
 
   if (req.method === 'DELETE') {
-    if (!req.body.id) return res.error('no file id');
+    if (req.body.all) {
+      const files = await prisma.image.findMany({
+        where: {
+          userId: user.id,
+        },
+      });
 
-    const image = await prisma.image.delete({
-      where: {
-        id: req.body.id,
-      },
-    });
+      for (let i = 0; i !== files.length; ++i) {
+        await datasource.delete(files[i].file);
+      }
 
-    await datasource.delete(image.file);
+      const { count } = await prisma.image.deleteMany({
+        where: {
+          userId: user.id,
+        },
+      });
+      Logger.get('image').info(`User ${user.username} (${user.id}) deleted ${count} images.`);
 
-    Logger.get('image').info(`User ${user.username} (${user.id}) deleted an image ${image.file} (${image.id})`);
+      return res.json({ count });
+    } else {
+      if (!req.body.id) return res.error('no file id');
 
-    delete image.password;
-    return res.json(image);
+      const image = await prisma.image.delete({
+        where: {
+          id: req.body.id,
+        },
+      });
+
+      await datasource.delete(image.file);
+
+      Logger.get('image').info(`User ${user.username} (${user.id}) deleted an image ${image.file} (${image.id})`);
+
+      delete image.password;
+      return res.json(image);
+    }
   } else if (req.method === 'PATCH') {
     if (!req.body.id) return res.error('no file id');
 

src/pages/api/users.ts

@@ -1,6 +1,7 @@
 import { NextApiReq, NextApiRes, withZipline } from 'middleware/withZipline';
 import prisma from 'lib/prisma';
 import Logger from 'lib/logger';
+import datasource from 'lib/datasource';
 
 async function handler(req: NextApiReq, res: NextApiRes) {
   const user = await req.user();
@@ -18,6 +19,16 @@ async function handler(req: NextApiReq, res: NextApiRes) {
     if (!deleteUser) return res.forbid('user doesn\'t exist');
 
     if (req.body.delete_images) {
+      const files = await prisma.image.findMany({
+        where: {
+          userId: deleteUser.id,
+        },
+      });
+
+      for (let i = 0; i !== files.length; ++i) {
+        await datasource.delete(files[i].file);
+      }
+
       const { count } = await prisma.image.deleteMany({
         where: {
           userId: deleteUser.id,

src/pages/auth/login.tsx

@@ -1,14 +1,11 @@
-import React, { useEffect } from 'react';
-import { useRouter } from 'next/router';
-import useFetch from 'hooks/useFetch';
+import { Button, Center, TextInput, Title, PasswordInput } from '@mantine/core';
 import { useForm } from '@mantine/hooks';
-import { TextInput, Button, Center, Title, Box, Badge, Tooltip } from '@mantine/core';
-import { useNotifications } from '@mantine/notifications';
-import { Cross1Icon, DownloadIcon } from '@modulz/radix-icons';
+import useFetch from 'hooks/useFetch';
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
 
 export default function Login() {
   const router = useRouter();
-  const notif = useNotifications();
 
   const form = useForm({
     initialValues: {
@@ -28,12 +25,12 @@ export default function Login() {
     });
 
     if (res.error) {
-      notif.showNotification({
-        title: 'Login Failed',
-        message: res.error,
-        color: 'red',
-        icon: <Cross1Icon />,
-      });
+      if (res.error.startsWith('403')) {
+        form.setFieldError('password', 'Invalid password');
+      } else {
+        form.setFieldError('username', 'Invalid username');
+        form.setFieldError('password', 'Invalid password');
+      }
     } else {
       await router.push(router.query.url as string || '/dashboard');
     }
@@ -53,7 +50,7 @@ export default function Login() {
           <Title align='center'>Zipline</Title>
           <form onSubmit={form.onSubmit((v) => onSubmit(v))}>
             <TextInput size='lg' id='username' label='Username' {...form.getInputProps('username')} />
-            <TextInput size='lg' id='password' label='Password' type='password' {...form.getInputProps('password')} />
+            <PasswordInput size='lg' id='password' label='Password' {...form.getInputProps('password')} />
 
             <Button size='lg' type='submit' fullWidth mt={12}>Login</Button>
           </form>

src/pages/auth/logout.tsx

@@ -1,8 +1,11 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { useRouter } from 'next/router';
 import { LoadingOverlay } from '@mantine/core';
+import { useStoreDispatch } from 'lib/redux/store';
+import { updateUser } from 'lib/redux/reducers/user';
 
 export default function Logout() {
+  const dispatch = useStoreDispatch();
   const router = useRouter();
 
   useEffect(() => {
@@ -10,7 +13,10 @@ export default function Logout() {
       const userRes = await fetch('/api/user');
       if (userRes.ok) {
         const res = await fetch('/api/auth/logout');
-        if (res.ok) router.push('/auth/login');
+        if (res.ok) {
+          dispatch(updateUser(null));
+          router.push('/auth/login');
+        }
       } else {
         router.push('/auth/login');
       }

src/pages/code/[id].tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { useRouter } from 'next/router';
-import exts from '../../../scripts/exts';
+import exts from 'lib/exts';
 import { Prism } from '@mantine/prism';
 
 export default function Code() {

src/pages/dashboard/files.tsx

@@ -2,11 +2,12 @@ import React from 'react';
 import useLogin from 'hooks/useLogin';
 import Layout from 'components/Layout';
 import Files from 'components/pages/Files';
+import { LoadingOverlay } from '@mantine/core';
 
 export default function FilesPage() {
   const { user, loading } = useLogin();
 
-  if (loading) return null;
+  if (loading) return <LoadingOverlay visible={loading} />;
   
   return (
     <Layout
@@ -17,4 +18,4 @@ export default function FilesPage() {
   );
 }
 
-FilesPage.title = 'Zipline - Gallery';
+FilesPage.title = 'Zipline - Files';

src/pages/dashboard/index.tsx

@@ -2,10 +2,12 @@ import React from 'react';
 import useLogin from 'hooks/useLogin';
 import Layout from 'components/Layout';
 import Dashboard from 'components/pages/Dashboard';
+import { LoadingOverlay } from '@mantine/core';
 
 export default function DashboardPage() {
   const { user, loading } = useLogin();
-  if (loading) return null;
+
+  if (loading) return <LoadingOverlay visible={loading} />;
   
   return (
     <Layout

src/pages/dashboard/manage.tsx

@@ -2,11 +2,12 @@ import React from 'react';
 import useLogin from 'hooks/useLogin';
 import Layout from 'components/Layout';
 import Manage from 'components/pages/Manage';
+import { LoadingOverlay } from '@mantine/core';
 
 export default function ManagePage() {
   const { user, loading } = useLogin();
 
-  if (loading) return null;
+  if (loading) return <LoadingOverlay visible={loading} />;
   
   return (
     <Layout

src/pages/dashboard/stats.tsx

@@ -2,10 +2,12 @@ import React from 'react';
 import useLogin from 'hooks/useLogin';
 import Layout from 'components/Layout';
 import Stats from 'components/pages/Stats';
+import { LoadingOverlay } from '@mantine/core';
 
 export default function StatsPage() {
   const { user, loading } = useLogin();
-  if (loading) return null;
+  
+  if (loading) return <LoadingOverlay visible={loading} />;
   
   return (
     <Layout

src/pages/dashboard/upload.tsx

@@ -2,11 +2,12 @@ import React from 'react';
 import useLogin from 'hooks/useLogin';
 import Layout from 'components/Layout';
 import Upload from 'components/pages/Upload';
+import { LoadingOverlay } from '@mantine/core';
 
-export default function UploadPage({ route }) {
+export default function UploadPage() {
   const { user, loading } = useLogin();
 
-  if (loading) return null;
+  if (loading) return <LoadingOverlay visible={loading} />;
   
   return (
     <Layout

src/pages/dashboard/urls.tsx

@@ -2,11 +2,12 @@ import React from 'react';
 import useLogin from 'hooks/useLogin';
 import Layout from 'components/Layout';
 import Urls from 'components/pages/Urls';
+import { LoadingOverlay } from '@mantine/core';
 
 export default function UrlsPage() {
   const { user, loading } = useLogin();
 
-  if (loading) return null;
+  if (loading) return <LoadingOverlay visible={loading} />;
   
   return (
     <Layout

src/pages/dashboard/users.tsx

@@ -2,11 +2,12 @@ import React from 'react';
 import useLogin from 'hooks/useLogin';
 import Layout from 'components/Layout';
 import Users from 'components/pages/Users';
+import { LoadingOverlay } from '@mantine/core';
 
 export default function UsersPage() {
   const { user, loading } = useLogin();
 
-  if (loading) return null;
+  if (loading) return <LoadingOverlay visible={loading} />;
   
   return (
     <Layout

src/server/index.ts

@@ -1,7 +1,200 @@
-import { version } from '../../package.json';
+import Router from 'find-my-way';
+import next from 'next';
+import { NextServer, RequestHandler } from 'next/dist/server/next';
+import { Image, PrismaClient } from '@prisma/client';
+import { createServer, IncomingMessage, OutgoingMessage, ServerResponse } from 'http';
+import { extname } from 'path';
+import { mkdir } from 'fs/promises';
+import { getStats, log, migrations } from './util';
 import Logger from '../lib/logger';
+import mimes from '../lib/mimes';
+import exts from '../lib/exts';
+import { version } from '../../package.json';
+import type { Config } from 'lib/config/Config';
+import type { Datasource } from 'lib/datasources';
 
-Logger.get('server').info(`starting zipline@${version} server`);
+let config: Config, datasource: Datasource;
 
-import Server from './server';
-new Server();
+const logger = Logger.get('server');
+logger.info(`starting zipline@${version} server`);
+
+start();
+
+async function start() {
+  const c = await import('../lib/config.js');
+  config = c.default.default;
+
+  const d = await import('../lib/datasource.js');
+  // @ts-ignore
+  datasource = d.default.default;
+
+  // annoy user if they didnt change secret from default "changethis"
+  if (config.core.secret === 'changethis') {
+    logger.error('Secret is not set!');
+    logger.error('Running Zipline as is, without a randomized secret is not recommended and leaves your instance at risk!');
+    logger.error('Please change your secret in the config file or environment variables.');
+    logger.error('The config file is located at `config.toml`, or if using docker-compose you can change the variables in the `docker-compose.yml` file.');
+    logger.error('It is recomended to use a secret that is alphanumeric and randomized. A way you can generate this is through a password manager you may have.');
+    process.exit(1);
+  };
+
+  const dev = process.env.NODE_ENV === 'development';
+
+  process.env.DATABASE_URL = config.core.database_url;
+  await migrations();
+
+  const prisma = new PrismaClient();
+
+  if (config.datasource.type === 'local') {
+    await mkdir(config.datasource.local.directory, { recursive: true });
+  }
+
+  const nextServer = next({
+    dir: '.',
+    dev,
+    quiet: !dev,
+    hostname: config.core.host,
+    port: config.core.port,
+  });
+
+  const handle = nextServer.getRequestHandler();
+  const router = Router({
+    defaultRoute: (req, res) => {
+      handle(req, res);
+    },
+  });
+
+  router.on('GET', config.uploader.route === '/' ? '/:id(^[^\\.]+\\.[^\\.]+)' : `${config.uploader.route}/:id`, async (req, res, params) => {
+    const image = await prisma.image.findFirst({
+      where: {
+        OR: [
+          { file: params.id },
+          { invisible: { invis: decodeURI(params.id) } },
+        ],
+      },
+    });
+
+    if (!image) await rawFile(req, res, nextServer, params.id);
+
+    if (image.password) await handle(req, res);
+    else if (image.embed) await handle(req, res);
+    else await fileDb(req, res, nextServer, prisma, handle, image);
+  });
+
+  router.on('GET', '/r/:id', async (req, res, params) => {
+    const image = await prisma.image.findFirst({
+      where: {
+        OR: [
+          { file: params.id },
+          { invisible: { invis: decodeURI(params.id) } },
+        ],
+      },
+    });
+
+    if (!image) await rawFile(req, res, nextServer, params.id);
+
+    if (image.password) await handle(req, res);
+    else await rawFileDb(req, res, nextServer, prisma, image);
+  });
+
+  await nextServer.prepare();
+
+  const http = createServer((req, res) => {
+    router.lookup(req, res);
+    if (config.core.logger) log(req.url);
+  });
+
+  http.on('error', (e) => {
+    logger.error(e);
+    process.exit(1);
+  });
+
+  http.on('listening', () => {
+    logger.info(`listening on ${config.core.host}:${config.core.port}`);
+  });
+
+  http.listen(config.core.port, config.core.host ?? '0.0.0.0');
+
+  stats(prisma);
+}
+
+async function rawFile(
+  req: IncomingMessage,
+  res: OutgoingMessage,
+  nextServer: NextServer,
+  id: string,
+) {
+  const data = await datasource.get(id);
+  if (!data) return nextServer.render404(req, res as ServerResponse);
+  const mimetype = mimes[extname(id)] ?? 'application/octet-stream';
+  res.setHeader('Content-Type', mimetype);
+
+  data.pipe(res);
+  data.on('error', () => nextServer.render404(req, res as ServerResponse));
+  data.on('end', () => res.end());
+}
+
+async function rawFileDb(
+  req: IncomingMessage,
+  res: OutgoingMessage,
+  nextServer: NextServer,
+  prisma: PrismaClient,
+  image: Image,
+) {
+  const data = await datasource.get(image.file);
+  if (!data) return nextServer.render404(req, res as ServerResponse);
+
+  res.setHeader('Content-Type', image.mimetype);
+  data.pipe(res);
+  data.on('error', () => nextServer.render404(req, res as ServerResponse));
+  data.on('end', () => res.end());
+
+  await prisma.image.update({
+    where: { id: image.id },
+    data: { views: { increment: 1 } },
+  });
+}
+
+async function fileDb(
+  req: IncomingMessage,
+  res: OutgoingMessage,
+  nextServer: NextServer,
+  prisma: PrismaClient,
+  handle: RequestHandler,
+  image: Image,
+) {
+  const ext = image.file.split('.').pop();
+  if (Object.keys(exts).includes(ext)) return handle(req, res as ServerResponse);
+
+  const data = await datasource.get(image.file);
+  if (!data) return this.nextServer.render404(req, res as ServerResponse);
+
+  res.setHeader('Content-Type', image.mimetype);
+  data.pipe(res);
+  data.on('error', () => nextServer.render404(req, res as ServerResponse));
+  data.on('end', () => res.end());
+
+  await prisma.image.update({
+    where: { id: image.id },
+    data: { views: { increment: 1 } },
+  });
+}
+
+async function stats(prisma: PrismaClient) {
+  const stats = await getStats(prisma, datasource);
+  await prisma.stats.create({
+    data: {
+      data: stats,
+    },
+  });
+
+  setInterval(async () => {
+    const stats = await getStats(prisma, datasource);
+    await prisma.stats.create({
+      data: {
+        data: stats,
+      },
+    });
+    if (config.core.logger) logger.info('stats updated');
+  }, config.core.stats_interval * 1000);
+}

src/server/server.ts

@@ -1,182 +0,0 @@
-import Router from 'find-my-way';
-import { NextServer, RequestHandler } from 'next/dist/server/next';
-import { Image, PrismaClient } from '@prisma/client';
-import { createServer, IncomingMessage, OutgoingMessage, Server as HttpServer, ServerResponse } from 'http';
-import next from 'next';
-import config from '../lib/config';
-import datasource from '../lib/ds';
-import { getStats, log, migrations } from './util';
-import { mkdir } from 'fs/promises';
-import Logger from '../lib/logger';
-import mimes from '../../scripts/mimes';
-import { extname } from 'path';
-import exts from '../../scripts/exts';
-
-const serverLog = Logger.get('server');
-
-export default class Server {
-  public router: Router.Instance<Router.HTTPVersion.V1>;
-  public nextServer: NextServer;
-  public handle: RequestHandler;
-  public prisma: PrismaClient;
-
-  private http: HttpServer;
-
-  public constructor() {
-    this.start();
-  }
-
-  private async start() {
-    // annoy user if they didnt change secret from default "changethis"
-    if (config.core.secret === 'changethis') {
-      serverLog.error('Secret is not set!');
-      serverLog.error('Running Zipline as is, without a randomized secret is not recommended and leaves your instance at risk!');
-      serverLog.error('Please change your secret in the config file or environment variables.');
-      serverLog.error('The config file is located at `config.toml`, or if using docker-compose you can change the variables in the `docker-compose.yml` file.');
-      serverLog.error('It is recomended to use a secret that is alphanumeric and randomized. A way you can generate this is through a password manager you may have.');
-      process.exit(1);
-    };
-
-    const dev = process.env.NODE_ENV === 'development';
-
-    process.env.DATABASE_URL = config.core.database_url;
-    await migrations();
-
-    this.prisma = new PrismaClient();
-
-    if (config.datasource.type === 'local') {
-      await mkdir(config.datasource.local.directory, { recursive: true });
-    }
-
-    this.nextServer = next({
-      dir: '.',
-      dev,
-      quiet: !dev,
-      hostname: config.core.host,
-      port: config.core.port,
-    });
-
-    this.handle = this.nextServer.getRequestHandler();
-    this.router = Router({
-      defaultRoute: (req, res) => {
-        this.handle(req, res);
-      },
-    });
-
-    this.router.on('GET', `${config.uploader.route}/:id`, async (req, res, params) => {
-      const image = await this.prisma.image.findFirst({
-        where: {
-          OR: [
-            { file: params.id },
-            { invisible: { invis: decodeURI(params.id) } },
-          ],
-        },
-      });
-
-      if (!image) await this.rawFile(req, res, params.id);
-
-      if (image.password) await this.handle(req, res);
-      else if (image.embed) await this.handle(req, res);
-      else await this.fileDb(req, res, image);
-    });
-
-    this.router.on('GET', '/r/:id', async (req, res, params) => {
-      const image = await this.prisma.image.findFirst({
-        where: {
-          OR: [
-            { file: params.id },
-            { invisible: { invis: decodeURI(params.id) } },
-          ],
-        },
-      });
-
-      if (!image) await this.rawFile(req, res, params.id);
-
-      if (image.password) await this.handle(req, res);
-      else await this.rawFileDb(req, res, image);
-    });
-
-    await this.nextServer.prepare();
-
-    this.http = createServer((req, res) => {
-      this.router.lookup(req, res);
-      if (config.core.logger) log(req.url);
-    });
-
-    this.http.on('error', (e) => {
-      serverLog.error(e);
-      process.exit(1);
-    });
-
-    this.http.on('listening', () => {
-      serverLog.info(`listening on ${config.core.host}:${config.core.port}`);
-    });
-
-    this.http.listen(config.core.port, config.core.host ?? '0.0.0.0');
-
-    this.stats();
-  }
-
-  private async rawFile(req: IncomingMessage, res: OutgoingMessage, id: string) {
-    const data = datasource.get(id);
-    if (!data) return this.nextServer.render404(req, res as ServerResponse);
-    const mimetype = mimes[extname(id)] ?? 'application/octet-stream';
-    res.setHeader('Content-Type', mimetype);
-
-    data.pipe(res);
-    data.on('error', () => this.nextServer.render404(req, res as ServerResponse));
-    data.on('end', () => res.end());
-  }
-
-  private async rawFileDb(req: IncomingMessage, res: OutgoingMessage, image: Image) {
-    const data = datasource.get(image.file);
-    if (!data) return this.nextServer.render404(req, res as ServerResponse);
-
-    res.setHeader('Content-Type', image.mimetype);
-    data.pipe(res);
-    data.on('error', () => this.nextServer.render404(req, res as ServerResponse));
-    data.on('end', () => res.end());
-
-    await this.prisma.image.update({
-      where: { id: image.id },
-      data: { views: { increment: 1 } },
-    });
-  }
-
-  private async fileDb(req: IncomingMessage, res: OutgoingMessage, image: Image) {
-    const ext = image.file.split('.').pop();
-    if (Object.keys(exts).includes(ext)) return this.handle(req, res as ServerResponse);
-
-    const data = datasource.get(image.file);
-    if (!data) return this.nextServer.render404(req, res as ServerResponse);
-
-    res.setHeader('Content-Type', image.mimetype);
-    data.pipe(res);
-    data.on('error', () => this.nextServer.render404(req, res as ServerResponse));
-    data.on('end', () => res.end());
-
-    await this.prisma.image.update({
-      where: { id: image.id },
-      data: { views: { increment: 1 } },
-    });
-  }
-
-  private async stats() {
-    const stats = await getStats(this.prisma, datasource);
-    await this.prisma.stats.create({
-      data: {
-        data: stats,
-      },
-    });
-
-    setInterval(async () => {
-      const stats = await getStats(this.prisma, datasource);
-      await this.prisma.stats.create({
-        data: {
-          data: stats,
-        },
-      });
-      if (config.core.logger) serverLog.info('stats updated');
-    }, config.core.stats_interval * 1000);
-  }
-}

src/server/util.ts

@@ -1,7 +1,7 @@
 import { Migrate } from '@prisma/migrate/dist/Migrate';
 import { ensureDatabaseExists } from '@prisma/migrate/dist/utils/ensureDatabaseExists';
 import Logger from '../lib/logger';
-import { Datasource } from 'lib/datasource';
+import { Datasource } from 'lib/datasources';
 import { PrismaClient } from '@prisma/client';
 
 export async function migrations() {
@@ -20,6 +20,8 @@ export async function migrations() {
       migrate.stop();
       Logger.get('database').info('finished migrating database');
     }
+  } else {
+    migrate.stop();
   }
 }
 

src/server/validateConfig.ts

@@ -1,60 +0,0 @@
-import { Config } from 'lib/types';
-import { object, bool, string, number, boolean, array } from 'yup';
-
-const validator = object({
-  core: object({
-    secure: bool().default(false),
-    secret: string().min(8).required(),
-    host: string().default('0.0.0.0'),
-    port: number().default(3000),
-    database_url: string().required(),
-    logger: boolean().default(false),
-    stats_interval: number().default(1800),
-  }).required(),
-  datasource: object({
-    type: string().default('local'),
-    local: object({
-      directory: string().default('./uploads'),
-    }),
-    s3: object({
-      access_key_id: string(),
-      secret_access_key: string(),
-      bucket: string(),
-    }).notRequired(),
-  }).required(),
-  uploader: object({
-    route: string().default('/u'),
-    embed_route: string().default('/a'),
-    length: number().default(6),
-    admin_limit: number().default(104900000),
-    user_limit: number().default(104900000),
-    disabled_extensions: array().default([]),
-  }).required(),
-  urls: object({
-    route: string().default('/go'),
-    length: number().default(6),
-  }).required(),
-  ratelimit: object({
-    user: number().default(0),
-    admin: number().default(0),
-  }),
-});
-
-
-export default function validate(config): Config {
-  try {
-    const validated = validator.validateSync(config, { abortEarly: false });
-    if (validated.datasource.type === 's3') {
-      const errors = [];
-      if (!validated.datasource.s3.access_key_id) errors.push('datasource.s3.access_key_id is a required field');
-      if (!validated.datasource.s3.secret_access_key) errors.push('datasource.s3.secret_access_key is a required field');
-      if (!validated.datasource.s3.bucket) errors.push('datasource.s3.bucket is a required field');
-      if (errors.length) throw { errors }; 
-    }
-
-    return validated as unknown as Config;
-  } catch (e) {
-    if (process.env.ZIPLINE_DOCKER_BUILD) return null;
-    throw `${e.errors.length} errors occured\n${e.errors.map(x => '\t' + x).join('\n')}`;
-  } 
-};

tsconfig.json

@@ -20,11 +20,20 @@
     "noEmit": true,
     "baseUrl": "src",
     "paths": {
-      "components/*": ["components/*"],
-      "hooks/*": ["lib/hooks/*"],
-      "middleware/*": ["lib/middleware/*"],
-      "lib/*": ["lib/*"]
-    }
+      "components/*": [
+        "components/*"
+      ],
+      "hooks/*": [
+        "lib/hooks/*"
+      ],
+      "middleware/*": [
+        "lib/middleware/*"
+      ],
+      "lib/*": [
+        "lib/*"
+      ]
+    },
+    "incremental": true
   },
   "include": [
     "next-env.d.ts",
@@ -34,6 +43,10 @@
     "prisma/seed.ts"
   ],
   "exclude": [
-    "node_modules"
+    "node_modules",
+    "dist",
+    ".yarn",
+    ".next",
+    "scripts"
   ]
-}
+}

zip-env.d.ts

@@ -1,5 +1,5 @@
 import type { PrismaClient } from '@prisma/client';
-import type { Datasource } from 'lib/datasource';
+import type { Datasource } from 'lib/datasources';
 import type { Config } from '.lib/types';
 
 declare global {