feat: baseline support for file sizes

prisma/migrations/20230226051016_file_size/migration.sql

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

prisma/schema.prisma

@@ -53,6 +53,7 @@ model File {
   originalName String?
   mimetype     String         @default("image/png")
   createdAt    DateTime       @default(now())
+  size         Int            @default(0)
   expiresAt    DateTime?
   maxViews     Int?
   views        Int            @default(0)

src/components/File.tsx

@@ -16,6 +16,7 @@ import { showNotification } from '@mantine/notifications';
 import useFetch from 'hooks/useFetch';
 import { useFileDelete, useFileFavorite } from 'lib/queries/files';
 import { useFolders } from 'lib/queries/folders';
+import { bytesToHuman } from 'lib/utils/bytes';
 import { relativeTime } from 'lib/utils/client';
 import { useState } from 'react';
 import {
@@ -27,6 +28,7 @@ import {
   DownloadIcon,
   ExternalLinkIcon,
   EyeIcon,
+  HardDriveIcon,
   FileIcon,
   FolderMinusIcon,
   FolderPlusIcon,
@@ -245,6 +247,7 @@ export default function File({
           >
             <FileMeta Icon={FileIcon} title='Name' subtitle={image.name} />
             <FileMeta Icon={ImageIcon} title='Type' subtitle={image.mimetype} />
+            <FileMeta Icon={HardDriveIcon} title='Size' subtitle={bytesToHuman(image.size || 0)} />
             <FileMeta Icon={EyeIcon} title='Views' subtitle={image?.views?.toLocaleString()} />
             {image.maxViews && (
               <FileMeta

src/components/icons/HardDriveIcon.tsx

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

src/components/icons/index.tsx

@@ -41,6 +41,7 @@ import FolderPlusIcon from './FolderPlusIcon';
 import GlobeIcon from './GlobeIcon';
 import LockIcon from './LockIcon';
 import UnlockIcon from './UnlockIcon';
+import HardDriveIcon from './HardDriveIcon';
 
 export {
   ActivityIcon,
@@ -86,4 +87,5 @@ export {
   GlobeIcon,
   LockIcon,
   UnlockIcon,
+  HardDriveIcon,
 };

src/pages/api/upload.ts

@@ -293,6 +293,7 @@ async function handler(req: NextApiReq, res: NextApiRes) {
         expiresAt: expiry,
         maxViews: fileMaxViews,
         originalName: req.headers['original-name'] ? file.originalname ?? null : null,
+        size: file.size,
       },
     });
 

src/pages/api/user/files.ts

@@ -69,6 +69,7 @@ async function handler(req: NextApiReq, res: NextApiRes, user: UserExtended) {
       expiresAt: Date;
       maxViews: number;
       views: number;
+      size: number;
     }[] = await prisma.file.findMany({
       where: {
         userId: user.id,
@@ -86,6 +87,7 @@ async function handler(req: NextApiReq, res: NextApiRes, user: UserExtended) {
         favorite: true,
         views: true,
         maxViews: true,
+        size: true,
       },
     });
 

src/pages/api/user/paged.ts

@@ -58,6 +58,7 @@ async function handler(req: NextApiReq, res: NextApiRes, user: UserExtended) {
     maxViews: number;
     views: number;
     folderId: number;
+    size: number;
   }[] = await prisma.file.findMany({
     where,
     orderBy: {
@@ -73,6 +74,7 @@ async function handler(req: NextApiReq, res: NextApiRes, user: UserExtended) {
       views: true,
       maxViews: true,
       folderId: true,
+      size: true,
     },
     skip: page ? (Number(page) - 1) * pageCount : undefined,
     take: page ? pageCount : undefined,

src/pages/api/user/recent.ts

@@ -25,6 +25,7 @@ async function handler(req: NextApiReq, res: NextApiRes, user: UserExtended) {
       views: true,
       maxViews: true,
       folderId: true,
+      size: true,
     },
   });