feat(upload): add thumbnail generation for uploaded images

Author: larryrider

src/commands/upload-file.ts

@@ -15,6 +15,10 @@ import { ErrorUtils } from '../utils/errors.utils';
 import { MissingCredentialsError, NotValidDirectoryError, NotValidFolderUuidError } from '../types/command.types';
 import { ValidationService } from '../services/validation.service';
 import { EncryptionVersion } from '@internxt/sdk/dist/drive/storage/types';
+import { ThumbnailService } from '../services/thumbnail.service';
+import { BufferStream } from '../utils/stream.utils';
+import { isFileThumbnailable } from '../utils/thumbnail.utils';
+import { Readable } from 'node:stream';
 
 export default class UploadFile extends Command {
   static readonly args = {};
@@ -52,6 +56,9 @@ export default class UploadFile extends Command {
       throw new Error('The file is empty. Uploading empty files is not allowed.');
     }
 
+    const fileInfo = path.parse(filePath);
+    const fileType = fileInfo.ext.replaceAll('.', '');
+
     let destinationFolderUuid = await this.getDestinationFolderUuid(flags['destination'], nonInteractive);
     if (destinationFolderUuid.trim().length === 0) {
       // destinationFolderUuid is empty from flags&prompt, which means we should use RootFolderUuid
@@ -75,14 +82,22 @@ export default class UploadFile extends Command {
     CLIUtils.done();
 
     // 2. Upload file to the Network
-    const fileStream = createReadStream(filePath);
+    const readStream = createReadStream(filePath);
     const timer = CLIUtils.timer();
     const progressBar = CLIUtils.progress({
       format: 'Uploading file [{bar}] {percentage}%',
       linewrap: true,
     });
     progressBar.start(100, 0);
 
+    let bufferStream: BufferStream | undefined;
+    let fileStream: Readable = readStream;
+    const isThumbnailable = isFileThumbnailable(fileType);
+    if (isThumbnailable) {
+      bufferStream = new BufferStream();
+      fileStream = readStream.pipe(bufferStream);
+    }
+
     const progressCallback = (progress: number) => {
       progressBar.update(progress * 0.99);
     };
@@ -104,10 +119,9 @@ export default class UploadFile extends Command {
     const uploadResult = await uploadPromise;
 
     // 3. Create the file in Drive
-    const fileInfo = path.parse(filePath);
     const createdDriveFile = await DriveFileService.instance.createFile({
       plain_name: fileInfo.name,
-      type: fileInfo.ext.replaceAll('.', ''),
+      type: fileType,
       size: stats.size,
       folder_id: destinationFolderUuid,
       id: uploadResult.fileId,
@@ -116,6 +130,24 @@ export default class UploadFile extends Command {
       name: '',
     });
 
+    try {
+      if (isThumbnailable && bufferStream) {
+        const thumbnailBuffer = bufferStream.getBuffer();
+
+        if (thumbnailBuffer) {
+          await ThumbnailService.instance.uploadThumbnail(
+            thumbnailBuffer,
+            user.bucket,
+            user.mnemonic,
+            createdDriveFile.id,
+            networkFacade,
+          );
+        }
+      }
+    } catch (error) {
+      ErrorUtils.report(this.error.bind(this), error, { command: this.id });
+    }
+
     progressBar.update(100);
     progressBar.stop();
 

src/services/drive/drive-file.service.ts

@@ -51,4 +51,9 @@ export class DriveFileService {
     const fileMetadata = await storageClient.getFileByPath(encodeURIComponent(path));
     return DriveUtils.driveFileMetaToItem(fileMetadata);
   };
+
+  public createThumbnail = (payload: StorageTypes.ThumbnailEntry): Promise<StorageTypes.Thumbnail> => {
+    const storageClient = SdkManager.instance.getStorage(false);
+    return storageClient.createThumbnailEntry(payload);
+  };
 }

src/services/thumbnail.service.ts

@@ -0,0 +1,46 @@
+import { Readable } from 'node:stream';
+import { DriveFileService } from './drive/drive-file.service';
+import { StorageTypes } from '@internxt/sdk/dist/drive';
+import { NetworkFacade } from './network/network-facade.service';
+import { UploadService } from './network/upload.service';
+
+export class ThumbnailService {
+  public static readonly instance: ThumbnailService = new ThumbnailService();
+
+  public static readonly MaxWidth = 300;
+  public static readonly MaxHeight = 300;
+  public static readonly Quality = 80;
+  public static readonly Type = 'png';
+
+  public uploadThumbnail = async (
+    fileContent: Buffer,
+    userBucket: string,
+    userMnemonic: string,
+    file_id: number,
+    networkFacade: NetworkFacade,
+  ): Promise<StorageTypes.Thumbnail> => {
+    const size = fileContent.length;
+    const [thumbnailPromise] = await UploadService.instance.uploadFileStream(
+      Readable.from(fileContent),
+      userBucket,
+      userMnemonic,
+      size,
+      networkFacade,
+      () => {},
+    );
+
+    const thumbnailUploadResult = await thumbnailPromise;
+
+    const createdThumbnailFile = await DriveFileService.instance.createThumbnail({
+      file_id: file_id,
+      max_width: ThumbnailService.MaxWidth,
+      max_height: ThumbnailService.MaxHeight,
+      type: ThumbnailService.Type,
+      size: size,
+      bucket_id: userBucket,
+      bucket_file: thumbnailUploadResult.fileId,
+      encrypt_version: StorageTypes.EncryptionVersion.Aes03,
+    });
+    return createdThumbnailFile;
+  };
+}

src/utils/stream.utils.ts

@@ -1,5 +1,5 @@
 import { ReadStream, WriteStream } from 'node:fs';
-import { Readable, Transform, TransformCallback } from 'node:stream';
+import { Readable, Transform, TransformCallback, TransformOptions } from 'node:stream';
 
 export class StreamUtils {
   static readStreamToReadableStream(readStream: ReadStream): ReadableStream<Uint8Array> {
@@ -130,3 +130,30 @@ export class ProgressTransform extends Transform {
     callback(null);
   }
 }
+
+export class BufferStream extends Transform {
+  public buffer: Buffer | null;
+
+  constructor(opts?: TransformOptions) {
+    super(opts);
+    this.buffer = null;
+  }
+
+  _transform(chunk: Buffer, _: BufferEncoding, callback: TransformCallback) {
+    const currentBuffer = this.buffer ?? Buffer.alloc(0);
+    this.buffer = Buffer.concat([currentBuffer, chunk]);
+    callback(null, chunk);
+  }
+
+  _flush(callback: TransformCallback) {
+    callback();
+  }
+
+  reset() {
+    this.buffer = null;
+  }
+
+  getBuffer(): Buffer | null {
+    return this.buffer;
+  }
+}

src/utils/thumbnail.utils.ts

@@ -0,0 +1,50 @@
+import sharp from 'sharp';
+
+export const ThumbnailConfig = {
+  MaxWidth: 300,
+  MaxHeight: 300,
+  Quality: 100,
+  Type: 'png',
+} as const;
+
+export const getThumbnailFromImageBuffer = (buffer: Buffer): Promise<Buffer> => {
+  return sharp(buffer)
+    .resize({
+      height: ThumbnailConfig.MaxHeight,
+      width: ThumbnailConfig.MaxWidth,
+      fit: 'inside',
+    })
+    .png({
+      quality: ThumbnailConfig.Quality,
+    })
+    .toBuffer();
+};
+
+type FileExtensionMap = Record<string, string[]>;
+const imageExtensions: FileExtensionMap = {
+  tiff: ['tif', 'tiff'],
+  bmp: ['bmp'],
+  heic: ['heic'],
+  jpg: ['jpg', 'jpeg'],
+  gif: ['gif'],
+  png: ['png'],
+  eps: ['eps'],
+  raw: ['raw', 'cr2', 'nef', 'orf', 'sr2'],
+  webp: ['webp'],
+};
+const thumbnailableImageExtension: string[] = [
+  ...imageExtensions['jpg'],
+  ...imageExtensions['png'],
+  ...imageExtensions['webp'],
+  ...imageExtensions['gif'],
+  ...imageExtensions['tiff'],
+];
+const pdfExtensions: FileExtensionMap = {
+  pdf: ['pdf'],
+};
+const thumbnailablePdfExtension: string[] = pdfExtensions['pdf'];
+const thumbnailableExtension: string[] = [...thumbnailableImageExtension];
+
+export const isFileThumbnailable = (fileType: string) => {
+  return fileType.trim().length > 0 && thumbnailableExtension.includes(fileType);
+};

src/webdav/handlers/PUT.handler.ts

@@ -13,6 +13,10 @@ import { TrashService } from '../../services/drive/trash.service';
 import { EncryptionVersion } from '@internxt/sdk/dist/drive/storage/types';
 import { CLIUtils } from '../../utils/cli.utils';
 import { UploadService } from '../../services/network/upload.service';
+import { BufferStream } from '../../utils/stream.utils';
+import { Readable } from 'node:stream';
+import { isFileThumbnailable } from '../../utils/thumbnail.utils';
+import { ThumbnailService } from '../../services/thumbnail.service';
 
 export class PUTRequestHandler implements WebDavMethodHandler {
   constructor(
@@ -70,14 +74,24 @@ export class PUTRequestHandler implements WebDavMethodHandler {
 
     const { user } = await authService.getAuthDetails();
 
+    const fileType = resource.path.ext.replace('.', '');
+
     const timer = CLIUtils.timer();
 
+    let bufferStream: BufferStream | undefined;
+    let fileStream: Readable = req;
+    const isThumbnailable = isFileThumbnailable(fileType);
+    if (isThumbnailable) {
+      bufferStream = new BufferStream();
+      fileStream = req.pipe(bufferStream);
+    }
+
     const progressCallback = (progress: number) => {
       webdavLogger.info(`[PUT] Upload progress for file ${resource.name}: ${progress}%`);
     };
 
     const [uploadPromise, abortable] = await UploadService.instance.uploadFileStream(
-      req,
+      fileStream,
       user.bucket,
       user.mnemonic,
       contentLength,
@@ -100,7 +114,7 @@ export class PUTRequestHandler implements WebDavMethodHandler {
 
     const file = await DriveFileService.instance.createFile({
       plain_name: resource.path.name,
-      type: resource.path.ext.replace('.', ''),
+      type: fileType,
       size: contentLength,
       folder_id: parentFolderItem.uuid,
       id: uploadResult.fileId,
@@ -109,6 +123,24 @@ export class PUTRequestHandler implements WebDavMethodHandler {
       name: '',
     });
 
+    try {
+      if (isThumbnailable && bufferStream) {
+        const thumbnailBuffer = bufferStream.getBuffer();
+
+        if (thumbnailBuffer) {
+          await ThumbnailService.instance.uploadThumbnail(
+            thumbnailBuffer,
+            user.bucket,
+            user.mnemonic,
+            file.id,
+            networkFacade,
+          );
+        }
+      }
+    } catch (error) {
+      webdavLogger.info(`[PUT] ❌ File thumbnail upload failed ${(error as Error).message}`);
+    }
+
     const uploadTime = timer.stop();
     webdavLogger.info(`[PUT] ✅ File uploaded in ${uploadTime}ms to Internxt Drive`);