feat: keep original name #247

prisma/migrations/20230115214317_file_original_name/migration.sql

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

prisma/schema.prisma

@@ -36,6 +36,7 @@ enum FileNameFormat {
 model File {
   id        Int             @id @default(autoincrement())
   name      String
+  originalName String?
   mimetype  String          @default("image/png")
   createdAt DateTime        @default(now())
   expiresAt DateTime?

src/components/pages/Upload/File.tsx

@@ -163,6 +163,7 @@ export default function File({ chunks: chunks_config }) {
         options.embedded && req.setRequestHeader('Embed', 'true');
         options.zeroWidth && req.setRequestHeader('Zws', 'true');
         options.format !== 'default' && req.setRequestHeader('Format', options.format);
+        options.originalName && req.setRequestHeader('Original-Name', 'true');
 
         req.send(body);
 
@@ -274,6 +275,7 @@ export default function File({ chunks: chunks_config }) {
       options.embedded && req.setRequestHeader('Embed', 'true');
       options.zeroWidth && req.setRequestHeader('Zws', 'true');
       options.format !== 'default' && req.setRequestHeader('Format', options.format);
+      options.originalName && req.setRequestHeader('Original-Name', 'true');
 
       req.send(body);
     }

src/components/pages/Upload/Text.tsx

@@ -70,6 +70,7 @@ export default function Text() {
     options.embedded && req.setRequestHeader('Embed', 'true');
     options.zeroWidth && req.setRequestHeader('Zws', 'true');
     options.format !== 'default' && req.setRequestHeader('Format', options.format);
+    options.originalName && req.setRequestHeader('Original-Name', 'true');
 
     req.send(body);
   };

src/components/pages/Upload/useUploadOptions.tsx

@@ -22,6 +22,7 @@ export default function useUploadOptions(): [
     zeroWidth: boolean;
     embedded: boolean;
     format: string;
+    originalName: boolean;
   },
   Dispatch<SetStateAction<boolean>>,
   React.FC
@@ -34,6 +35,7 @@ export default function useUploadOptions(): [
     zeroWidth: false,
     embedded: false,
     format: 'default',
+    originalName: false,
   });
 
   const [opened, setOpened] = useState(false);
@@ -47,6 +49,7 @@ export default function useUploadOptions(): [
       zeroWidth: false,
       embedded: false,
       format: 'default',
+      originalName: false,
     });
   };
 
@@ -146,6 +149,13 @@ export default function useUploadOptions(): [
             checked={state.embedded}
             onChange={(e) => setState({ embedded: e.currentTarget.checked })}
           />
+
+          <Switch
+            label='Keep Original Name'
+            description='Whether or not to show the original name when downloading this specific file. This will not change the name format in the URL.'
+            checked={state.originalName}
+            onChange={(e) => setState({ originalName: e.currentTarget.checked })}
+          />
         </Group>
         <Group grow>
           <Button onClick={() => reset()} color='red'>

src/pages/api/upload.ts

@@ -162,6 +162,7 @@ async function handler(req: NextApiReq, res: NextApiRes) {
           password,
           expiresAt: expiry,
           maxViews: fileMaxViews,
+          originalName: req.headers['original-name'] ? filename ?? null : null,
         },
       });
 
@@ -290,7 +291,7 @@ async function handler(req: NextApiReq, res: NextApiRes) {
 
     const compressionUsed = imageCompressionPercent && file.mimetype.startsWith('image/');
     let invis: InvisibleFile;
-    const image = await prisma.file.create({
+    const fileUpload = await prisma.file.create({
       data: {
         name: `${fileName}${compressionUsed ? '.jpg' : `${ext ? '.' : ''}${ext}`}`,
         mimetype: req.headers.uploadtext ? 'text/plain' : compressionUsed ? 'image/jpeg' : file.mimetype,
@@ -300,34 +301,35 @@ async function handler(req: NextApiReq, res: NextApiRes) {
         password,
         expiresAt: expiry,
         maxViews: fileMaxViews,
+        originalName: req.headers['original-name'] ? file.originalname ?? null : null,
       },
     });
 
-    if (req.headers.zws) invis = await createInvisImage(zconfig.uploader.length, image.id);
+    if (req.headers.zws) invis = await createInvisImage(zconfig.uploader.length, fileUpload.id);
 
     if (compressionUsed) {
       const buffer = await sharp(file.buffer).jpeg({ quality: imageCompressionPercent }).toBuffer();
-      await datasource.save(image.name, buffer);
+      await datasource.save(fileUpload.name, buffer);
       logger.info(
         `User ${user.username} (${user.id}) compressed image from ${file.buffer.length} -> ${buffer.length} bytes`
       );
     } else {
-      await datasource.save(image.name, file.buffer);
+      await datasource.save(fileUpload.name, file.buffer);
     }
 
-    logger.info(`User ${user.username} (${user.id}) uploaded ${image.name} (${image.id})`);
+    logger.info(`User ${user.username} (${user.id}) uploaded ${fileUpload.name} (${fileUpload.id})`);
     if (user.domains.length) {
       const domain = user.domains[Math.floor(Math.random() * user.domains.length)];
       response.files.push(
         `${domain}${zconfig.uploader.route === '/' ? '' : zconfig.uploader.route}/${
-          invis ? invis.invis : image.name
+          invis ? invis.invis : fileUpload.name
         }`
       );
     } else {
       response.files.push(
         `${zconfig.core.return_https ? 'https' : 'http'}://${req.headers.host}${
           zconfig.uploader.route === '/' ? '' : zconfig.uploader.route
-        }/${invis ? invis.invis : image.name}`
+        }/${invis ? invis.invis : fileUpload.name}`
       );
     }
 
@@ -336,18 +338,18 @@ async function handler(req: NextApiReq, res: NextApiRes) {
     if (zconfig.discord?.upload) {
       await sendUpload(
         user,
-        image,
+        fileUpload,
         `${zconfig.core.return_https ? 'https' : 'http'}://${req.headers.host}/r/${
-          invis ? invis.invis : image.name
+          invis ? invis.invis : fileUpload.name
         }`,
         `${zconfig.core.return_https ? 'https' : 'http'}://${req.headers.host}${
           zconfig.uploader.route === '/' ? '' : zconfig.uploader.route
-        }/${invis ? invis.invis : image.name}`
+        }/${invis ? invis.invis : fileUpload.name}`
       );
     }
 
-    if (zconfig.exif.enabled && zconfig.exif.remove_gps && image.mimetype.startsWith('image/')) {
+    if (zconfig.exif.enabled && zconfig.exif.remove_gps && fileUpload.mimetype.startsWith('image/')) {
-      await removeGPSData(image);
+      await removeGPSData(fileUpload);
       response.removed_gps = true;
     }
   }

src/server/decorators/dbFile.ts

@@ -18,6 +18,8 @@ function dbFileDecorator(fastify: FastifyInstance, _, done) {
 
     this.header('Content-Length', size);
     this.header('Content-Type', file.mimetype);
+    this.header('Content-Disposition', `inline; filename="${file.originalName}"`);
+
     return this.send(data);
   }
 }