feat(web): add file upload UI to create-share modal

Co-authored-by: danielalves96 <62755605+danielalves96@users.noreply.github.com>

apps/server/src/modules/auth-providers/service.ts

@@ -617,6 +617,11 @@ export class AuthProvidersService {
       return await this.linkProviderToExistingUser(existingUser, provider.id, String(externalId), userInfo);
     }
 
+    // Check if auto-registration is disabled
+    if (provider.autoRegister === false) {
+      throw new Error(`User registration via ${provider.displayName || provider.name} is disabled`);
+    }
+
     return await this.createNewUserWithProvider(userInfo, provider.id, String(externalId));
   }
 

apps/server/src/modules/file/controller.ts

@@ -585,6 +585,51 @@ export class FileController {
     }
   }
 
+  async embedFile(request: FastifyRequest, reply: FastifyReply) {
+    try {
+      const { id } = request.params as { id: string };
+
+      if (!id) {
+        return reply.status(400).send({ error: "File ID is required." });
+      }
+
+      const fileRecord = await prisma.file.findUnique({ where: { id } });
+
+      if (!fileRecord) {
+        return reply.status(404).send({ error: "File not found." });
+      }
+
+      const extension = fileRecord.extension.toLowerCase();
+      const imageExts = ["jpg", "jpeg", "png", "gif", "webp", "svg", "bmp", "ico", "avif"];
+      const videoExts = ["mp4", "webm", "ogg", "mov", "avi", "mkv", "flv", "wmv"];
+      const audioExts = ["mp3", "wav", "ogg", "m4a", "flac", "aac", "wma"];
+
+      const isMedia = imageExts.includes(extension) || videoExts.includes(extension) || audioExts.includes(extension);
+
+      if (!isMedia) {
+        return reply.status(403).send({
+          error: "Embed is only allowed for images, videos, and audio files.",
+        });
+      }
+
+      const storageProvider = (this.fileService as any).storageProvider;
+      const filePath = storageProvider.getFilePath(fileRecord.objectName);
+
+      const contentType = getContentType(fileRecord.name);
+      const fileName = fileRecord.name;
+
+      reply.header("Content-Type", contentType);
+      reply.header("Content-Disposition", `inline; filename="${encodeURIComponent(fileName)}"`);
+      reply.header("Cache-Control", "public, max-age=31536000"); // Cache por 1 ano
+
+      const stream = fs.createReadStream(filePath);
+      return reply.send(stream);
+    } catch (error) {
+      console.error("Error in embedFile:", error);
+      return reply.status(500).send({ error: "Internal server error." });
+    }
+  }
+
   private async getAllUserFilesRecursively(userId: string): Promise<any[]> {
     const rootFiles = await prisma.file.findMany({
       where: { userId, folderId: null },

apps/server/src/modules/file/routes.ts

@@ -131,6 +131,29 @@ export async function fileRoutes(app: FastifyInstance) {
     fileController.getDownloadUrl.bind(fileController)
   );
 
+  app.get(
+    "/embed/:id",
+    {
+      schema: {
+        tags: ["File"],
+        operationId: "embedFile",
+        summary: "Embed File (Public Access)",
+        description:
+          "Returns a media file (image/video/audio) for public embedding without authentication. Only works for media files.",
+        params: z.object({
+          id: z.string().min(1, "File ID is required").describe("The file ID"),
+        }),
+        response: {
+          400: z.object({ error: z.string().describe("Error message") }),
+          403: z.object({ error: z.string().describe("Error message - not a media file") }),
+          404: z.object({ error: z.string().describe("Error message") }),
+          500: z.object({ error: z.string().describe("Error message") }),
+        },
+      },
+    },
+    fileController.embedFile.bind(fileController)
+  );
+
   app.get(
     "/files/download",
     {

apps/server/src/modules/share/controller.ts

@@ -1,7 +1,9 @@
+import { MultipartFile } from "@fastify/multipart";
 import { FastifyReply, FastifyRequest } from "fastify";
 
 import {
   CreateShareSchema,
+  CreateShareWithFilesSchema,
   UpdateShareItemsSchema,
   UpdateSharePasswordSchema,
   UpdateShareRecipientsSchema,
@@ -32,6 +34,67 @@ export class ShareController {
     }
   }
 
+  async createShareWithFiles(request: FastifyRequest, reply: FastifyReply) {
+    try {
+      await request.jwtVerify();
+      const userId = (request as any).user?.userId;
+      if (!userId) {
+        return reply.status(401).send({ error: "Unauthorized: a valid token is required to access this resource." });
+      }
+
+      const parts = request.parts();
+      const uploadedFiles: MultipartFile[] = [];
+      let formData: any = {};
+
+      for await (const part of parts) {
+        if (part.type === "file") {
+          uploadedFiles.push(part as MultipartFile);
+        } else {
+          // Handle form fields
+          const fieldName = part.fieldname;
+          const value = (part as any).value;
+
+          // Parse JSON fields
+          if (fieldName === "existingFiles" || fieldName === "existingFolders" || fieldName === "recipients") {
+            try {
+              formData[fieldName] = JSON.parse(value);
+            } catch (e) {
+              formData[fieldName] = value;
+            }
+          } else if (fieldName === "maxViews") {
+            formData[fieldName] = value ? parseInt(value) : null;
+          } else {
+            formData[fieldName] = value;
+          }
+        }
+      }
+
+      // Validate at least one file or folder is provided
+      const hasExistingFiles = formData.existingFiles && formData.existingFiles.length > 0;
+      const hasExistingFolders = formData.existingFolders && formData.existingFolders.length > 0;
+      const hasNewFiles = uploadedFiles.length > 0;
+
+      if (!hasExistingFiles && !hasExistingFolders && !hasNewFiles) {
+        return reply.status(400).send({
+          error: "At least one file or folder must be selected or uploaded to create a share",
+        });
+      }
+
+      // Validate the form data against the schema (excluding file validation)
+      const input = CreateShareWithFilesSchema.parse(formData);
+
+      // Create the share with uploaded files
+      const share = await this.shareService.createShareWithFiles(input, uploadedFiles, userId);
+      return reply.status(201).send({ share });
+    } catch (error: any) {
+      console.error("Create Share With Files Error:", error);
+      if (error.errors) {
+        return reply.status(400).send({ error: error.errors });
+      }
+      return reply.status(400).send({ error: error.message || "Unknown error occurred" });
+    }
+  }
+
   async listUserShares(request: FastifyRequest, reply: FastifyReply) {
     try {
       await request.jwtVerify();

apps/server/src/modules/share/dto.ts

@@ -136,6 +136,24 @@ export const CreateShareAliasSchema = z.object({
     .describe("The custom alias for the share"),
 });
 
+export const CreateShareWithFilesSchema = z.object({
+  name: z.string().optional().describe("The share name"),
+  description: z.string().optional().describe("The share description"),
+  expiration: z
+    .string()
+    .datetime({
+      message: "Data de expiração deve estar no formato ISO 8601 (ex: 2025-02-06T13:20:49Z)",
+    })
+    .optional(),
+  existingFiles: z.array(z.string()).optional().describe("Existing file IDs to include"),
+  existingFolders: z.array(z.string()).optional().describe("Existing folder IDs to include"),
+  password: z.string().optional().describe("The share password"),
+  maxViews: z.number().optional().nullable().describe("The maximum number of views"),
+  recipients: z.array(z.string().email()).optional().describe("The recipient emails"),
+  folderId: z.string().optional().nullable().describe("Folder ID to upload new files to"),
+});
+
 export type CreateShareInput = z.infer<typeof CreateShareSchema>;
+export type CreateShareWithFilesInput = z.infer<typeof CreateShareWithFilesSchema>;
 export type UpdateShareInput = z.infer<typeof UpdateShareSchema>;
 export type ShareResponse = z.infer<typeof ShareResponseSchema>;

apps/server/src/modules/share/routes.ts

@@ -46,6 +46,29 @@ export async function shareRoutes(app: FastifyInstance) {
     shareController.createShare.bind(shareController)
   );
 
+  app.post(
+    "/shares/create-with-files",
+    {
+      preValidation,
+      schema: {
+        tags: ["Share"],
+        operationId: "createShareWithFiles",
+        summary: "Create a new share with file uploads",
+        description:
+          "Create a new share and upload new files directly in a single action. Supports multipart/form-data.",
+        consumes: ["multipart/form-data"],
+        response: {
+          201: z.object({
+            share: ShareResponseSchema,
+          }),
+          400: z.object({ error: z.string().describe("Error message") }),
+          401: z.object({ error: z.string().describe("Error message") }),
+        },
+      },
+    },
+    shareController.createShareWithFiles.bind(shareController)
+  );
+
   app.get(
     "/shares/me",
     {

apps/server/src/modules/share/service.ts

@@ -1,10 +1,18 @@
+import * as fs from "fs/promises";
+import * as path from "path";
+import { MultipartFile } from "@fastify/multipart";
 import bcrypt from "bcryptjs";
 
+import { FilesystemStorageProvider } from "../../providers/filesystem-storage.provider";
+import { S3StorageProvider } from "../../providers/s3-storage.provider";
 import { prisma } from "../../shared/prisma";
+import { generateUniqueFileName, parseFileName } from "../../utils/file-name-generator";
+import { ConfigService } from "../config/service";
 import { EmailService } from "../email/service";
+import { FileService } from "../file/service";
 import { FolderService } from "../folder/service";
 import { UserService } from "../user/service";
-import { CreateShareInput, ShareResponseSchema, UpdateShareInput } from "./dto";
+import { CreateShareInput, CreateShareWithFilesInput, ShareResponseSchema, UpdateShareInput } from "./dto";
 import { IShareRepository, PrismaShareRepository } from "./repository";
 
 export class ShareService {
@@ -113,6 +121,141 @@ export class ShareService {
     return ShareResponseSchema.parse(await this.formatShareResponse(shareWithRelations));
   }
 
+  async createShareWithFiles(data: CreateShareWithFilesInput, uploadedFiles: MultipartFile[], userId: string) {
+    const configService = new ConfigService();
+    const fileService = new FileService();
+
+    const { password, maxViews, existingFiles, existingFolders, folderId, ...shareData } = data;
+
+    // Validate existing files
+    if (existingFiles && existingFiles.length > 0) {
+      const files = await prisma.file.findMany({
+        where: {
+          id: { in: existingFiles },
+          userId: userId,
+        },
+      });
+      const notFoundFiles = existingFiles.filter((id) => !files.some((file) => file.id === id));
+      if (notFoundFiles.length > 0) {
+        throw new Error(`Files not found or access denied: ${notFoundFiles.join(", ")}`);
+      }
+    }
+
+    // Validate existing folders
+    if (existingFolders && existingFolders.length > 0) {
+      const folders = await prisma.folder.findMany({
+        where: {
+          id: { in: existingFolders },
+          userId: userId,
+        },
+      });
+      const notFoundFolders = existingFolders.filter((id) => !folders.some((folder) => folder.id === id));
+      if (notFoundFolders.length > 0) {
+        throw new Error(`Folders not found or access denied: ${notFoundFolders.join(", ")}`);
+      }
+    }
+
+    // Validate folder if specified
+    if (folderId) {
+      const folder = await prisma.folder.findFirst({
+        where: { id: folderId, userId },
+      });
+      if (!folder) {
+        throw new Error("Folder not found or access denied.");
+      }
+    }
+
+    const maxFileSize = BigInt(await configService.getValue("maxFileSize"));
+    const maxTotalStorage = BigInt(await configService.getValue("maxTotalStoragePerUser"));
+
+    // Check user storage
+    const userFiles = await prisma.file.findMany({
+      where: { userId },
+      select: { size: true },
+    });
+    const currentStorage = userFiles.reduce((acc, file) => acc + file.size, BigInt(0));
+
+    // Upload new files and create file records
+    const newFileIds: string[] = [];
+
+    for (const uploadedFile of uploadedFiles) {
+      const buffer = await uploadedFile.toBuffer();
+      const fileSize = BigInt(buffer.length);
+
+      // Validate file size
+      if (fileSize > maxFileSize) {
+        const maxSizeMB = Number(maxFileSize) / (1024 * 1024);
+        throw new Error(`File ${uploadedFile.filename} exceeds the maximum allowed size of ${maxSizeMB}MB`);
+      }
+
+      // Check storage space
+      if (currentStorage + fileSize > maxTotalStorage) {
+        const availableSpace = Number(maxTotalStorage - currentStorage) / (1024 * 1024);
+        throw new Error(`Insufficient storage space. You have ${availableSpace.toFixed(2)}MB available`);
+      }
+
+      // Parse filename
+      const { baseName, extension } = parseFileName(uploadedFile.filename);
+      const uniqueName = await generateUniqueFileName(baseName, extension, userId, folderId || null);
+
+      // Generate object name
+      const objectName = `${userId}/${Date.now()}-${baseName}.${extension}`;
+
+      // Upload file to storage
+      if (fileService.isFilesystemMode()) {
+        // For filesystem mode, we need to use the filesystem provider
+        const provider = FilesystemStorageProvider.getInstance();
+        await provider.uploadFile(objectName, buffer);
+      } else {
+        // For S3 mode
+        const provider = new S3StorageProvider();
+        await provider.uploadFile(objectName, buffer);
+      }
+
+      // Create file record in database
+      const fileRecord = await prisma.file.create({
+        data: {
+          name: uniqueName,
+          extension: extension,
+          size: fileSize,
+          objectName: objectName,
+          userId,
+          folderId: folderId || null,
+        },
+      });
+
+      newFileIds.push(fileRecord.id);
+    }
+
+    // Combine existing and new file IDs
+    const allFileIds = [...(existingFiles || []), ...newFileIds];
+
+    // Validate at least one file or folder
+    if (allFileIds.length === 0 && (!existingFolders || existingFolders.length === 0)) {
+      throw new Error("At least one file or folder must be selected or uploaded to create a share");
+    }
+
+    // Create share security
+    const security = await prisma.shareSecurity.create({
+      data: {
+        password: password ? await bcrypt.hash(password, 10) : null,
+        maxViews: maxViews,
+      },
+    });
+
+    // Create share
+    const share = await this.shareRepository.createShare({
+      ...shareData,
+      files: allFileIds,
+      folders: existingFolders,
+      securityId: security.id,
+      creatorId: userId,
+    });
+
+    const shareWithRelations = await this.shareRepository.findShareById(share.id);
+    return ShareResponseSchema.parse(await this.formatShareResponse(shareWithRelations));
+  }
+
   async getShare(shareId: string, password?: string, userId?: string) {
     const share = await this.shareRepository.findShareById(shareId);
 

apps/server/src/providers/s3-storage.provider.ts

@@ -143,4 +143,18 @@ export class S3StorageProvider implements StorageProvider {
       throw error;
     }
   }
+
+  async uploadFile(objectName: string, buffer: Buffer): Promise<void> {
+    if (!s3Client) {
+      throw new Error("S3 client is not available");
+    }
+
+    const command = new PutObjectCommand({
+      Bucket: bucketName,
+      Key: objectName,
+      Body: buffer,
+    });
+
+    await s3Client.send(command);
+  }
 }

apps/web/messages/ar-SA.json

@@ -150,7 +150,9 @@
     "move": "نقل",
     "rename": "إعادة تسمية",
     "search": "بحث",
-    "share": "مشاركة"
+    "share": "مشاركة",
+    "copied": "تم النسخ",
+    "copy": "نسخ"
   },
   "createShare": {
     "title": "إنشاء مشاركة",
@@ -1933,5 +1935,17 @@
     "passwordRequired": "كلمة المرور مطلوبة",
     "nameRequired": "الاسم مطلوب",
     "required": "هذا الحقل مطلوب"
+  },
+  "embedCode": {
+    "title": "تضمين الصورة",
+    "description": "استخدم هذه الأكواد لتضمين هذه الصورة في المنتديات أو المواقع الإلكترونية أو المنصات الأخرى",
+    "tabs": {
+      "directLink": "رابط مباشر",
+      "html": "HTML",
+      "bbcode": "BBCode"
+    },
+    "directLinkDescription": "عنوان URL مباشر لملف الصورة",
+    "htmlDescription": "استخدم هذا الكود لتضمين الصورة في صفحات HTML",
+    "bbcodeDescription": "استخدم هذا الكود لتضمين الصورة في المنتديات التي تدعم BBCode"
   }
 }

apps/web/messages/de-DE.json

@@ -150,7 +150,9 @@
     "move": "Verschieben",
     "rename": "Umbenennen",
     "search": "Suchen",
-    "share": "Teilen"
+    "share": "Teilen",
+    "copied": "Kopiert",
+    "copy": "Kopieren"
   },
   "createShare": {
     "title": "Freigabe Erstellen",
@@ -1931,5 +1933,17 @@
     "passwordRequired": "Passwort ist erforderlich",
     "nameRequired": "Name ist erforderlich",
     "required": "Dieses Feld ist erforderlich"
+  },
+  "embedCode": {
+    "title": "Bild einbetten",
+    "description": "Verwenden Sie diese Codes, um dieses Bild in Foren, Websites oder anderen Plattformen einzubetten",
+    "tabs": {
+      "directLink": "Direkter Link",
+      "html": "HTML",
+      "bbcode": "BBCode"
+    },
+    "directLinkDescription": "Direkte URL zur Bilddatei",
+    "htmlDescription": "Verwenden Sie diesen Code, um das Bild in HTML-Seiten einzubetten",
+    "bbcodeDescription": "Verwenden Sie diesen Code, um das Bild in Foren einzubetten, die BBCode unterstützen"
   }
 }

apps/web/messages/en-US.json

@@ -150,7 +150,9 @@
     "rename": "Rename",
     "move": "Move",
     "share": "Share",
-    "search": "Search"
+    "search": "Search",
+    "copy": "Copy",
+    "copied": "Copied"
   },
   "createShare": {
     "title": "Create Share",
@@ -1882,6 +1884,18 @@
       "userr": "User"
     }
   },
+  "embedCode": {
+    "title": "Embed Image",
+    "description": "Use these codes to embed this image in forums, websites, or other platforms",
+    "tabs": {
+      "directLink": "Direct Link",
+      "html": "HTML",
+      "bbcode": "BBCode"
+    },
+    "directLinkDescription": "Direct URL to the image file",
+    "htmlDescription": "Use this code to embed the image in HTML pages",
+    "bbcodeDescription": "Use this code to embed the image in forums that support BBCode"
+  },
   "validation": {
     "firstNameRequired": "First name is required",
     "lastNameRequired": "Last name is required",

apps/web/messages/es-ES.json

@@ -150,7 +150,9 @@
     "move": "Mover",
     "rename": "Renombrar",
     "search": "Buscar",
-    "share": "Compartir"
+    "share": "Compartir",
+    "copied": "Copiado",
+    "copy": "Copiar"
   },
   "createShare": {
     "title": "Crear Compartir",
@@ -1931,5 +1933,17 @@
     "passwordRequired": "Se requiere la contraseña",
     "nameRequired": "El nombre es obligatorio",
     "required": "Este campo es obligatorio"
+  },
+  "embedCode": {
+    "title": "Insertar imagen",
+    "description": "Utiliza estos códigos para insertar esta imagen en foros, sitios web u otras plataformas",
+    "tabs": {
+      "directLink": "Enlace directo",
+      "html": "HTML",
+      "bbcode": "BBCode"
+    },
+    "directLinkDescription": "URL directa al archivo de imagen",
+    "htmlDescription": "Utiliza este código para insertar la imagen en páginas HTML",
+    "bbcodeDescription": "Utiliza este código para insertar la imagen en foros que admiten BBCode"
   }
 }

apps/web/messages/fr-FR.json

@@ -150,7 +150,9 @@
     "move": "Déplacer",
     "rename": "Renommer",
     "search": "Rechercher",
-    "share": "Partager"
+    "share": "Partager",
+    "copied": "Copié",
+    "copy": "Copier"
   },
   "createShare": {
     "title": "Créer un Partage",
@@ -1931,5 +1933,17 @@
     "passwordRequired": "Le mot de passe est requis",
     "nameRequired": "Nome é obrigatório",
     "required": "Este campo é obrigatório"
+  },
+  "embedCode": {
+    "title": "Intégrer l'image",
+    "description": "Utilisez ces codes pour intégrer cette image dans des forums, sites web ou autres plateformes",
+    "tabs": {
+      "directLink": "Lien direct",
+      "html": "HTML",
+      "bbcode": "BBCode"
+    },
+    "directLinkDescription": "URL directe vers le fichier image",
+    "htmlDescription": "Utilisez ce code pour intégrer l'image dans des pages HTML",
+    "bbcodeDescription": "Utilisez ce code pour intégrer l'image dans des forums prenant en charge BBCode"
   }
 }

apps/web/messages/hi-IN.json

@@ -150,7 +150,9 @@
     "move": "स्थानांतरित करें",
     "rename": "नाम बदलें",
     "search": "खोजें",
-    "share": "साझा करें"
+    "share": "साझा करें",
+    "copied": "कॉपी किया गया",
+    "copy": "कॉपी करें"
   },
   "createShare": {
     "title": "साझाकरण बनाएं",
@@ -1931,5 +1933,17 @@
     "passwordRequired": "पासवर्ड आवश्यक है",
     "nameRequired": "नाम आवश्यक है",
     "required": "यह फ़ील्ड आवश्यक है"
+  },
+  "embedCode": {
+    "title": "छवि एम्बेड करें",
+    "description": "इस छवि को मंचों, वेबसाइटों या अन्य प्लेटफार्मों में एम्बेड करने के लिए इन कोड का उपयोग करें",
+    "tabs": {
+      "directLink": "सीधा लिंक",
+      "html": "HTML",
+      "bbcode": "BBCode"
+    },
+    "directLinkDescription": "छवि फ़ाइल का सीधा URL",
+    "htmlDescription": "HTML पेजों में छवि एम्बेड करने के लिए इस कोड का उपयोग करें",
+    "bbcodeDescription": "BBCode का समर्थन करने वाले मंचों में छवि एम्बेड करने के लिए इस कोड का उपयोग करें"
   }
 }

apps/web/messages/it-IT.json

@@ -150,7 +150,9 @@
     "move": "Sposta",
     "rename": "Rinomina",
     "search": "Cerca",
-    "share": "Condividi"
+    "share": "Condividi",
+    "copied": "Copiato",
+    "copy": "Copia"
   },
   "createShare": {
     "title": "Crea Condivisione",
@@ -1931,5 +1933,17 @@
     "passwordMinLength": "La password deve contenere almeno 6 caratteri",
     "nameRequired": "Il nome è obbligatorio",
     "required": "Questo campo è obbligatorio"
+  },
+  "embedCode": {
+    "title": "Incorpora immagine",
+    "description": "Usa questi codici per incorporare questa immagine in forum, siti web o altre piattaforme",
+    "tabs": {
+      "directLink": "Link diretto",
+      "html": "HTML",
+      "bbcode": "BBCode"
+    },
+    "directLinkDescription": "URL diretto al file immagine",
+    "htmlDescription": "Usa questo codice per incorporare l'immagine nelle pagine HTML",
+    "bbcodeDescription": "Usa questo codice per incorporare l'immagine nei forum che supportano BBCode"
   }
 }

apps/web/messages/ja-JP.json

@@ -150,7 +150,9 @@
     "move": "移動",
     "rename": "名前を変更",
     "search": "検索",
-    "share": "共有"
+    "share": "共有",
+    "copied": "コピーしました",
+    "copy": "コピー"
   },
   "createShare": {
     "title": "共有を作成",
@@ -1931,5 +1933,17 @@
     "passwordRequired": "パスワードは必須です",
     "nameRequired": "名前は必須です",
     "required": "このフィールドは必須です"
+  },
+  "embedCode": {
+    "title": "画像を埋め込む",
+    "description": "これらのコードを使用して、この画像をフォーラム、ウェブサイト、またはその他のプラットフォームに埋め込みます",
+    "tabs": {
+      "directLink": "直接リンク",
+      "html": "HTML",
+      "bbcode": "BBCode"
+    },
+    "directLinkDescription": "画像ファイルへの直接URL",
+    "htmlDescription": "このコードを使用してHTMLページに画像を埋め込みます",
+    "bbcodeDescription": "BBCodeをサポートするフォーラムに画像を埋め込むには、このコードを使用します"
   }
 }

apps/web/messages/ko-KR.json

@@ -150,7 +150,9 @@
     "move": "이동",
     "rename": "이름 변경",
     "search": "검색",
-    "share": "공유"
+    "share": "공유",
+    "copied": "복사됨",
+    "copy": "복사"
   },
   "createShare": {
     "title": "공유 생성",
@@ -1931,5 +1933,17 @@
     "passwordRequired": "비밀번호는 필수입니다",
     "nameRequired": "이름은 필수입니다",
     "required": "이 필드는 필수입니다"
+  },
+  "embedCode": {
+    "title": "이미지 삽입",
+    "description": "이 코드를 사용하여 포럼, 웹사이트 또는 기타 플랫폼에 이 이미지를 삽입하세요",
+    "tabs": {
+      "directLink": "직접 링크",
+      "html": "HTML",
+      "bbcode": "BBCode"
+    },
+    "directLinkDescription": "이미지 파일에 대한 직접 URL",
+    "htmlDescription": "이 코드를 사용하여 HTML 페이지에 이미지를 삽입하세요",
+    "bbcodeDescription": "BBCode를 지원하는 포럼에 이미지를 삽입하려면 이 코드를 사용하세요"
   }
 }

apps/web/messages/nl-NL.json

@@ -150,7 +150,9 @@
     "move": "Verplaatsen",
     "rename": "Hernoemen",
     "search": "Zoeken",
-    "share": "Delen"
+    "share": "Delen",
+    "copied": "Gekopieerd",
+    "copy": "Kopiëren"
   },
   "createShare": {
     "title": "Delen Maken",
@@ -1931,5 +1933,17 @@
     "passwordMinLength": "Wachtwoord moet minimaal 6 tekens bevatten",
     "nameRequired": "Naam is verplicht",
     "required": "Dit veld is verplicht"
+  },
+  "embedCode": {
+    "title": "Afbeelding insluiten",
+    "description": "Gebruik deze codes om deze afbeelding in te sluiten in forums, websites of andere platforms",
+    "tabs": {
+      "directLink": "Directe link",
+      "html": "HTML",
+      "bbcode": "BBCode"
+    },
+    "directLinkDescription": "Directe URL naar het afbeeldingsbestand",
+    "htmlDescription": "Gebruik deze code om de afbeelding in te sluiten in HTML-pagina's",
+    "bbcodeDescription": "Gebruik deze code om de afbeelding in te sluiten in forums die BBCode ondersteunen"
   }
 }

apps/web/messages/pl-PL.json

@@ -150,7 +150,9 @@
     "move": "Przenieś",
     "rename": "Zmień nazwę",
     "search": "Szukaj",
-    "share": "Udostępnij"
+    "share": "Udostępnij",
+    "copied": "Skopiowano",
+    "copy": "Kopiuj"
   },
   "createShare": {
     "title": "Utwórz Udostępnienie",
@@ -1931,5 +1933,17 @@
     "passwordMinLength": "Hasło musi mieć co najmniej 6 znaków",
     "nameRequired": "Nazwa jest wymagana",
     "required": "To pole jest wymagane"
+  },
+  "embedCode": {
+    "title": "Osadź obraz",
+    "description": "Użyj tych kodów, aby osadzić ten obraz na forach, stronach internetowych lub innych platformach",
+    "tabs": {
+      "directLink": "Link bezpośredni",
+      "html": "HTML",
+      "bbcode": "BBCode"
+    },
+    "directLinkDescription": "Bezpośredni adres URL pliku obrazu",
+    "htmlDescription": "Użyj tego kodu, aby osadzić obraz na stronach HTML",
+    "bbcodeDescription": "Użyj tego kodu, aby osadzić obraz na forach obsługujących BBCode"
   }
 }

apps/web/messages/pt-BR.json

@@ -150,7 +150,9 @@
     "move": "Mover",
     "rename": "Renomear",
     "search": "Pesquisar",
-    "share": "Compartilhar"
+    "share": "Compartilhar",
+    "copied": "Copiado",
+    "copy": "Copiar"
   },
   "createShare": {
     "title": "Criar compartilhamento",
@@ -1932,5 +1934,17 @@
     "lastNameRequired": "O sobrenome é necessário",
     "usernameLength": "O nome de usuário deve ter pelo menos 3 caracteres",
     "usernameSpaces": "O nome de usuário não pode conter espaços"
+  },
+  "embedCode": {
+    "title": "Incorporar imagem",
+    "description": "Use estes códigos para incorporar esta imagem em fóruns, sites ou outras plataformas",
+    "tabs": {
+      "directLink": "Link direto",
+      "html": "HTML",
+      "bbcode": "BBCode"
+    },
+    "directLinkDescription": "URL direto para o arquivo de imagem",
+    "htmlDescription": "Use este código para incorporar a imagem em páginas HTML",
+    "bbcodeDescription": "Use este código para incorporar a imagem em fóruns que suportam BBCode"
   }
 }

apps/web/messages/ru-RU.json

@@ -150,7 +150,9 @@
     "move": "Переместить",
     "rename": "Переименовать",
     "search": "Поиск",
-    "share": "Поделиться"
+    "share": "Поделиться",
+    "copied": "Скопировано",
+    "copy": "Копировать"
   },
   "createShare": {
     "title": "Создать общий доступ",
@@ -1931,5 +1933,17 @@
     "passwordRequired": "Требуется пароль",
     "nameRequired": "Требуется имя",
     "required": "Это поле обязательно"
+  },
+  "embedCode": {
+    "title": "Встроить изображение",
+    "description": "Используйте эти коды для встраивания этого изображения на форумах, веб-сайтах или других платформах",
+    "tabs": {
+      "directLink": "Прямая ссылка",
+      "html": "HTML",
+      "bbcode": "BBCode"
+    },
+    "directLinkDescription": "Прямой URL-адрес файла изображения",
+    "htmlDescription": "Используйте этот код для встраивания изображения в HTML-страницы",
+    "bbcodeDescription": "Используйте этот код для встраивания изображения на форумах, поддерживающих BBCode"
   }
 }

apps/web/messages/tr-TR.json

@@ -150,7 +150,9 @@
     "move": "Taşı",
     "rename": "Yeniden Adlandır",
     "search": "Ara",
-    "share": "Paylaş"
+    "share": "Paylaş",
+    "copied": "Kopyalandı",
+    "copy": "Kopyala"
   },
   "createShare": {
     "title": "Paylaşım Oluştur",
@@ -1931,5 +1933,17 @@
     "passwordRequired": "Şifre gerekli",
     "nameRequired": "İsim gereklidir",
     "required": "Bu alan zorunludur"
+  },
+  "embedCode": {
+    "title": "Resmi Yerleştir",
+    "description": "Bu görüntüyü forumlara, web sitelerine veya diğer platformlara yerleştirmek için bu kodları kullanın",
+    "tabs": {
+      "directLink": "Doğrudan Bağlantı",
+      "html": "HTML",
+      "bbcode": "BBCode"
+    },
+    "directLinkDescription": "Resim dosyasının doğrudan URL'si",
+    "htmlDescription": "Resmi HTML sayfalarına yerleştirmek için bu kodu kullanın",
+    "bbcodeDescription": "BBCode destekleyen forumlara resmi yerleştirmek için bu kodu kullanın"
   }
 }

apps/web/messages/zh-CN.json

@@ -150,7 +150,9 @@
     "move": "移动",
     "rename": "重命名",
     "search": "搜索",
-    "share": "分享"
+    "share": "分享",
+    "copied": "已复制",
+    "copy": "复制"
   },
   "createShare": {
     "title": "创建分享",
@@ -1931,5 +1933,17 @@
     "passwordRequired": "密码为必填项",
     "nameRequired": "名称为必填项",
     "required": "此字段为必填项"
+  },
+  "embedCode": {
+    "title": "嵌入图片",
+    "description": "使用这些代码将此图片嵌入到论坛、网站或其他平台中",
+    "tabs": {
+      "directLink": "直接链接",
+      "html": "HTML",
+      "bbcode": "BBCode"
+    },
+    "directLinkDescription": "图片文件的直接URL",
+    "htmlDescription": "使用此代码将图片嵌入HTML页面",
+    "bbcodeDescription": "使用此代码将图片嵌入支持BBCode的论坛"
   }
 }

apps/web/src/app/api/(proxy)/shares/create-with-files/route.ts

@@ -0,0 +1,38 @@
+import { NextRequest, NextResponse } from "next/server";
+
+const API_BASE_URL = process.env.API_BASE_URL || "http://localhost:3333";
+
+export async function POST(req: NextRequest) {
+  const cookieHeader = req.headers.get("cookie");
+
+  // Get the multipart form data directly
+  const formData = await req.formData();
+
+  const url = `${API_BASE_URL}/shares/create-with-files`;
+
+  const apiRes = await fetch(url, {
+    method: "POST",
+    headers: {
+      cookie: cookieHeader || "",
+      // Don't set Content-Type, let fetch set it with boundary
+    },
+    body: formData,
+    redirect: "manual",
+  });
+
+  const resBody = await apiRes.text();
+
+  const res = new NextResponse(resBody, {
+    status: apiRes.status,
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+
+  const setCookie = apiRes.headers.getSetCookie?.() || [];
+  if (setCookie.length > 0) {
+    res.headers.set("Set-Cookie", setCookie.join(","));
+  }
+
+  return res;
+}

apps/web/src/app/e/[id]/route.ts

@@ -0,0 +1,71 @@
+import { NextRequest, NextResponse } from "next/server";
+
+const API_BASE_URL = process.env.API_BASE_URL || "http://localhost:3333";
+
+/**
+ * Short public embed endpoint: /e/{id}
+ * No authentication required
+ * Only works for media files (images, videos, audio)
+ */
+export async function GET(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+
+  if (!id) {
+    return new NextResponse(JSON.stringify({ error: "File ID is required" }), {
+      status: 400,
+      headers: { "Content-Type": "application/json" },
+    });
+  }
+
+  const url = `${API_BASE_URL}/embed/${id}`;
+
+  try {
+    const apiRes = await fetch(url, {
+      method: "GET",
+      redirect: "manual",
+    });
+
+    if (!apiRes.ok) {
+      const errorText = await apiRes.text();
+      return new NextResponse(errorText, {
+        status: apiRes.status,
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+    }
+
+    const blob = await apiRes.blob();
+
+    const contentType = apiRes.headers.get("content-type") || "application/octet-stream";
+    const contentDisposition = apiRes.headers.get("content-disposition");
+    const cacheControl = apiRes.headers.get("cache-control");
+
+    const res = new NextResponse(blob, {
+      status: apiRes.status,
+      headers: {
+        "Content-Type": contentType,
+      },
+    });
+
+    if (contentDisposition) {
+      res.headers.set("Content-Disposition", contentDisposition);
+    }
+
+    if (cacheControl) {
+      res.headers.set("Cache-Control", cacheControl);
+    } else {
+      res.headers.set("Cache-Control", "public, max-age=31536000");
+    }
+
+    return res;
+  } catch (error) {
+    console.error("Error proxying embed request:", error);
+    return new NextResponse(JSON.stringify({ error: "Failed to fetch file" }), {
+      status: 500,
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+  }
+}

apps/web/src/components/files/embed-code-display.tsx

@@ -0,0 +1,151 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { IconCheck, IconCopy } from "@tabler/icons-react";
+import { useTranslations } from "next-intl";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+interface EmbedCodeDisplayProps {
+  imageUrl: string;
+  fileName: string;
+  fileId: string;
+}
+
+export function EmbedCodeDisplay({ imageUrl, fileName, fileId }: EmbedCodeDisplayProps) {
+  const t = useTranslations();
+  const [copiedType, setCopiedType] = useState<string | null>(null);
+  const [fullUrl, setFullUrl] = useState<string>("");
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const origin = window.location.origin;
+      const embedUrl = `${origin}/e/${fileId}`;
+      setFullUrl(embedUrl);
+    }
+  }, [fileId]);
+
+  const directLink = fullUrl || imageUrl;
+  const htmlCode = `<img src="${directLink}" alt="${fileName}" />`;
+  const bbCode = `[img]${directLink}[/img]`;
+
+  const copyToClipboard = async (text: string, type: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopiedType(type);
+      setTimeout(() => setCopiedType(null), 2000);
+    } catch (error) {
+      console.error("Failed to copy:", error);
+    }
+  };
+
+  return (
+    <Card>
+      <CardContent>
+        <div className="space-y-4">
+          <div>
+            <Label className="text-sm font-semibold">{t("embedCode.title")}</Label>
+            <p className="text-xs text-muted-foreground mt-1">{t("embedCode.description")}</p>
+          </div>
+
+          <Tabs defaultValue="direct" className="w-full">
+            <TabsList className="grid w-full grid-cols-3">
+              <TabsTrigger value="direct" className="cursor-pointer">
+                {t("embedCode.tabs.directLink")}
+              </TabsTrigger>
+              <TabsTrigger value="html" className="cursor-pointer">
+                {t("embedCode.tabs.html")}
+              </TabsTrigger>
+              <TabsTrigger value="bbcode" className="cursor-pointer">
+                {t("embedCode.tabs.bbcode")}
+              </TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="direct" className="space-y-2">
+              <div className="flex gap-2">
+                <input
+                  type="text"
+                  readOnly
+                  value={directLink}
+                  className="flex-1 px-3 py-2 text-sm border rounded-md bg-muted/50 font-mono"
+                />
+                <Button
+                  size="default"
+                  variant="outline"
+                  onClick={() => copyToClipboard(directLink, "direct")}
+                  className="shrink-0 h-full"
+                >
+                  {copiedType === "direct" ? (
+                    <>
+                      <IconCheck className="h-4 w-4 mr-1" />
+                      {t("common.copied")}
+                    </>
+                  ) : (
+                    <>
+                      <IconCopy className="h-4 w-4 mr-1" />
+                      {t("common.copy")}
+                    </>
+                  )}
+                </Button>
+              </div>
+              <p className="text-xs text-muted-foreground">{t("embedCode.directLinkDescription")}</p>
+            </TabsContent>
+
+            <TabsContent value="html" className="space-y-2">
+              <div className="flex gap-2">
+                <input
+                  type="text"
+                  readOnly
+                  value={htmlCode}
+                  className="flex-1 px-3 py-2 text-sm border rounded-md bg-muted/50 font-mono"
+                />
+                <Button variant="outline" onClick={() => copyToClipboard(htmlCode, "html")} className="shrink-0 h-full">
+                  {copiedType === "html" ? (
+                    <>
+                      <IconCheck className="h-4 w-4 mr-1" />
+                      {t("common.copied")}
+                    </>
+                  ) : (
+                    <>
+                      <IconCopy className="h-4 w-4 mr-1" />
+                      {t("common.copy")}
+                    </>
+                  )}
+                </Button>
+              </div>
+              <p className="text-xs text-muted-foreground">{t("embedCode.htmlDescription")}</p>
+            </TabsContent>
+
+            <TabsContent value="bbcode" className="space-y-2">
+              <div className="flex gap-2">
+                <input
+                  type="text"
+                  readOnly
+                  value={bbCode}
+                  className="flex-1 px-3 py-2 text-sm border rounded-md bg-muted/50 font-mono"
+                />
+                <Button variant="outline" onClick={() => copyToClipboard(bbCode, "bbcode")} className="shrink-0 h-full">
+                  {copiedType === "bbcode" ? (
+                    <>
+                      <IconCheck className="h-4 w-4 mr-1" />
+                      {t("common.copied")}
+                    </>
+                  ) : (
+                    <>
+                      <IconCopy className="h-4 w-4 mr-1" />
+                      {t("common.copy")}
+                    </>
+                  )}
+                </Button>
+              </div>
+              <p className="text-xs text-muted-foreground">{t("embedCode.bbcodeDescription")}</p>
+            </TabsContent>
+          </Tabs>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

apps/web/src/components/files/media-embed-link.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { IconCheck, IconCopy } from "@tabler/icons-react";
+import { useTranslations } from "next-intl";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+
+interface MediaEmbedLinkProps {
+  fileId: string;
+}
+
+export function MediaEmbedLink({ fileId }: MediaEmbedLinkProps) {
+  const t = useTranslations();
+  const [copied, setCopied] = useState(false);
+  const [embedUrl, setEmbedUrl] = useState<string>("");
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const origin = window.location.origin;
+      const url = `${origin}/e/${fileId}`;
+      setEmbedUrl(url);
+    }
+  }, [fileId]);
+
+  const copyToClipboard = async () => {
+    try {
+      await navigator.clipboard.writeText(embedUrl);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (error) {
+      console.error("Failed to copy:", error);
+    }
+  };
+
+  return (
+    <Card>
+      <CardContent>
+        <div className="space-y-3">
+          <div>
+            <Label className="text-sm font-semibold">{t("embedCode.title")}</Label>
+            <p className="text-xs text-muted-foreground mt-1">{t("embedCode.directLinkDescription")}</p>
+          </div>
+
+          <div className="flex gap-2">
+            <input
+              type="text"
+              readOnly
+              value={embedUrl}
+              className="flex-1 px-3 py-2 text-sm border rounded-md bg-muted/50 font-mono"
+            />
+            <Button size="default" variant="outline" onClick={copyToClipboard} className="shrink-0 h-full">
+              {copied ? (
+                <>
+                  <IconCheck className="h-4 w-4 mr-1" />
+                  {t("common.copied")}
+                </>
+              ) : (
+                <>
+                  <IconCopy className="h-4 w-4 mr-1" />
+                  {t("common.copy")}
+                </>
+              )}
+            </Button>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

apps/web/src/components/modals/create-share-modal.tsx

@@ -1,8 +1,9 @@
 "use client";
 
 import { useCallback, useEffect, useState } from "react";
-import { IconCalendar, IconEye, IconLock, IconShare } from "@tabler/icons-react";
+import { IconCalendar, IconEye, IconLock, IconShare, IconUpload, IconX } from "@tabler/icons-react";
 import { useTranslations } from "next-intl";
+import { useDropzone } from "react-dropzone";
 import { toast } from "sonner";
 
 import { FileTree, TreeFile, TreeFolder } from "@/components/tables/files-tree";
@@ -13,7 +14,8 @@ import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
-import { createShare } from "@/http/endpoints";
+import { createShare, createShareWithFiles } from "@/http/endpoints";
+import { formatFileSize } from "@/utils/format-file-size";
 
 interface CreateShareModalProps {
   isOpen: boolean;
@@ -39,6 +41,7 @@ export function CreateShareModal({ isOpen, onClose, onSuccess, getAllFilesAndFol
   const [files, setFiles] = useState<TreeFile[]>([]);
   const [folders, setFolders] = useState<TreeFolder[]>([]);
   const [searchQuery, setSearchQuery] = useState("");
+  const [newFiles, setNewFiles] = useState<File[]>([]);
 
   const [isLoading, setIsLoading] = useState(false);
   const [isLoadingData, setIsLoadingData] = useState(false);
@@ -85,18 +88,35 @@ export function CreateShareModal({ isOpen, onClose, onSuccess, getAllFilesAndFol
         maxViews: "",
       });
       setSelectedItems([]);
+      setNewFiles([]);
       setCurrentTab("details");
     }
   }, [isOpen, loadData]);
 
+  const onDrop = useCallback((acceptedFiles: File[]) => {
+    setNewFiles((prev) => [...prev, ...acceptedFiles]);
+  }, []);
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    multiple: true,
+  });
+
+  const removeNewFile = (index: number) => {
+    setNewFiles((prev) => prev.filter((_, i) => i !== index));
+  };
+
   const handleSubmit = async () => {
     if (!formData.name.trim()) {
       toast.error("Share name is required");
       return;
     }
 
-    if (selectedItems.length === 0) {
+    const hasExistingItems = selectedItems.length > 0;
-      toast.error("Please select at least one file or folder");
+    const hasNewFiles = newFiles.length > 0;
+
+    if (!hasExistingItems && !hasNewFiles) {
+      toast.error("Please select at least one file/folder or upload new files");
       return;
     }
 
@@ -106,23 +126,40 @@ export function CreateShareModal({ isOpen, onClose, onSuccess, getAllFilesAndFol
       const selectedFiles = selectedItems.filter((id) => files.some((file) => file.id === id));
       const selectedFolders = selectedItems.filter((id) => folders.some((folder) => folder.id === id));
 
-      await createShare({
+      const expiration = formData.expiresAt
-        name: formData.name,
+        ? (() => {
-        description: formData.description || undefined,
+            const dateValue = formData.expiresAt;
-        password: formData.isPasswordProtected ? formData.password : undefined,
+            if (dateValue.length === 10) {
-        expiration: formData.expiresAt
+              return new Date(dateValue + "T23:59:59").toISOString();
-          ? (() => {
+            }
-              const dateValue = formData.expiresAt;
+            return new Date(dateValue).toISOString();
-              if (dateValue.length === 10) {
+          })()
-                return new Date(dateValue + "T23:59:59").toISOString();
+        : undefined;
-              }
+
-              return new Date(dateValue).toISOString();
+      // Use the new endpoint if there are new files to upload
-            })()
+      if (hasNewFiles) {
-          : undefined,
+        await createShareWithFiles({
-        maxViews: formData.maxViews ? parseInt(formData.maxViews) : undefined,
+          name: formData.name,
-        files: selectedFiles,
+          description: formData.description || undefined,
-        folders: selectedFolders,
+          password: formData.isPasswordProtected ? formData.password : undefined,
-      });
+          expiration: expiration,
+          maxViews: formData.maxViews ? parseInt(formData.maxViews) : undefined,
+          existingFiles: selectedFiles.length > 0 ? selectedFiles : undefined,
+          existingFolders: selectedFolders.length > 0 ? selectedFolders : undefined,
+          newFiles: newFiles,
+        });
+      } else {
+        // Use the traditional endpoint if only selecting existing files
+        await createShare({
+          name: formData.name,
+          description: formData.description || undefined,
+          password: formData.isPasswordProtected ? formData.password : undefined,
+          expiration: expiration,
+          maxViews: formData.maxViews ? parseInt(formData.maxViews) : undefined,
+          files: selectedFiles,
+          folders: selectedFolders,
+        });
+      }
 
       toast.success(t("createShare.success"));
       onSuccess();
@@ -146,8 +183,10 @@ export function CreateShareModal({ isOpen, onClose, onSuccess, getAllFilesAndFol
   };
 
   const selectedCount = selectedItems.length;
+  const newFilesCount = newFiles.length;
+  const totalCount = selectedCount + newFilesCount;
   const canProceedToFiles = formData.name.trim().length > 0;
-  const canSubmit = formData.name.trim().length > 0 && selectedCount > 0;
+  const canSubmit = formData.name.trim().length > 0 && totalCount > 0;
 
   return (
     <Dialog open={isOpen} onOpenChange={handleClose}>
@@ -161,7 +200,7 @@ export function CreateShareModal({ isOpen, onClose, onSuccess, getAllFilesAndFol
 
         <div className="flex flex-col gap-6 flex-1 min-h-0 w-full overflow-hidden">
           <Tabs value={currentTab} onValueChange={setCurrentTab} className="flex-1">
-            <TabsList className="grid w-full grid-cols-2">
+            <TabsList className="grid w-full grid-cols-3">
               <TabsTrigger value="details">{t("createShare.tabs.shareDetails")}</TabsTrigger>
               <TabsTrigger value="files" disabled={!canProceedToFiles}>
                 {t("createShare.tabs.selectFiles")}
@@ -171,6 +210,14 @@ export function CreateShareModal({ isOpen, onClose, onSuccess, getAllFilesAndFol
                   </span>
                 )}
               </TabsTrigger>
+              <TabsTrigger value="upload" disabled={!canProceedToFiles}>
+                {t("createShare.tabs.uploadFiles") || "Upload Files"}
+                {newFilesCount > 0 && (
+                  <span className="ml-1 text-xs bg-primary text-primary-foreground rounded-full px-2 py-0.5">
+                    {newFilesCount}
+                  </span>
+                )}
+              </TabsTrigger>
             </TabsList>
 
             <TabsContent value="details" className="space-y-4 mt-4">
@@ -320,6 +367,87 @@ export function CreateShareModal({ isOpen, onClose, onSuccess, getAllFilesAndFol
                 <Button variant="outline" onClick={() => setCurrentTab("details")}>
                   {t("common.back")}
                 </Button>
+                <div className="space-x-2">
+                  <Button variant="outline" onClick={() => setCurrentTab("upload")}>
+                    {t("createShare.nextUploadFiles") || "Upload New Files"}
+                  </Button>
+                  <Button onClick={handleSubmit} disabled={!canSubmit || isLoading}>
+                    {isLoading ? t("common.creating") : t("createShare.create")}
+                  </Button>
+                </div>
+              </div>
+            </TabsContent>
+
+            <TabsContent value="upload" className="space-y-4 mt-4 flex-1 min-h-0">
+              <div className="space-y-4">
+                <div
+                  {...getRootProps()}
+                  className={`border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors ${
+                    isDragActive ? "border-primary bg-primary/5" : "border-muted-foreground/25 hover:border-primary/50"
+                  }`}
+                >
+                  <input {...getInputProps()} />
+                  <IconUpload className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
+                  {isDragActive ? (
+                    <p className="text-sm text-muted-foreground">Drop files here...</p>
+                  ) : (
+                    <div>
+                      <p className="text-sm font-medium mb-1">
+                        {t("createShare.upload.dragDrop") || "Drag & drop files here"}
+                      </p>
+                      <p className="text-xs text-muted-foreground">
+                        {t("createShare.upload.orClick") || "or click to browse"}
+                      </p>
+                    </div>
+                  )}
+                </div>
+
+                {newFiles.length > 0 && (
+                  <div className="space-y-2">
+                    <Label>{t("createShare.upload.selectedFiles") || "Selected Files"}</Label>
+                    <div className="max-h-[200px] overflow-y-auto space-y-2">
+                      {newFiles.map((file, index) => (
+                        <div
+                          key={index}
+                          className="flex items-center justify-between p-2 bg-muted/50 rounded-md text-sm"
+                        >
+                          <div className="flex items-center gap-2 flex-1 min-w-0">
+                            <IconUpload className="h-4 w-4 flex-shrink-0" />
+                            <span className="truncate">{file.name}</span>
+                            <span className="text-xs text-muted-foreground flex-shrink-0">
+                              {formatFileSize(file.size)}
+                            </span>
+                          </div>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => removeNewFile(index)}
+                            className="ml-2 h-6 w-6 p-0"
+                          >
+                            <IconX className="h-4 w-4" />
+                          </Button>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                <div className="text-sm text-muted-foreground">
+                  {totalCount > 0 ? (
+                    <span>
+                      {totalCount} {totalCount === 1 ? "item" : "items"} selected ({selectedCount} existing,{" "}
+                      {newFilesCount} new)
+                    </span>
+                  ) : (
+                    <span>No items selected</span>
+                  )}
+                </div>
+              </div>
+
+              <div className="flex justify-between pt-4">
+                <Button variant="outline" onClick={() => setCurrentTab("files")}>
+                  {t("common.back")}
+                </Button>
                 <div className="space-x-2">
                   <Button variant="outline" onClick={handleClose}>
                     {t("common.cancel")}

apps/web/src/components/modals/file-preview-modal.tsx

@@ -3,6 +3,8 @@
 import { IconDownload } from "@tabler/icons-react";
 import { useTranslations } from "next-intl";
 
+import { EmbedCodeDisplay } from "@/components/files/embed-code-display";
+import { MediaEmbedLink } from "@/components/files/media-embed-link";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -14,6 +16,7 @@ import {
 } from "@/components/ui/dialog";
 import { useFilePreview } from "@/hooks/use-file-preview";
 import { getFileIcon } from "@/utils/file-icons";
+import { getFileType } from "@/utils/file-types";
 import { FilePreviewRenderer } from "./previews";
 
 interface FilePreviewModalProps {
@@ -39,6 +42,10 @@ export function FilePreviewModal({
 }: FilePreviewModalProps) {
   const t = useTranslations();
   const previewState = useFilePreview({ file, isOpen, isReverseShare, sharePassword });
+  const fileType = getFileType(file.name);
+  const isImage = fileType === "image";
+  const isVideo = fileType === "video";
+  const isAudio = fileType === "audio";
 
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
@@ -67,6 +74,16 @@ export function FilePreviewModal({
             description={file.description}
             onDownload={previewState.handleDownload}
           />
+          {isImage && previewState.previewUrl && !previewState.isLoading && file.id && (
+            <div className="mt-4 mb-2">
+              <EmbedCodeDisplay imageUrl={previewState.previewUrl} fileName={file.name} fileId={file.id} />
+            </div>
+          )}
+          {(isVideo || isAudio) && !previewState.isLoading && file.id && (
+            <div className="mt-4 mb-2">
+              <MediaEmbedLink fileId={file.id} />
+            </div>
+          )}
         </div>
         <DialogFooter>
           <Button variant="outline" onClick={onClose}>

apps/web/src/http/endpoints/shares/index.ts

@@ -10,6 +10,8 @@ import type {
   CreateShareAliasResult,
   CreateShareBody,
   CreateShareResult,
+  CreateShareWithFilesBody,
+  CreateShareWithFilesResult,
   DeleteShareResult,
   GetShareByAliasParams,
   GetShareByAliasResult,
@@ -39,6 +41,63 @@ export const createShare = <TData = CreateShareResult>(
   return apiInstance.post(`/api/shares/create`, createShareBody, options);
 };
 
+/**
+ * Create a new share with file uploads
+ * @summary Create a new share and upload files in a single action
+ */
+export const createShareWithFiles = <TData = CreateShareWithFilesResult>(
+  createShareWithFilesBody: CreateShareWithFilesBody,
+  options?: AxiosRequestConfig
+): Promise<TData> => {
+  const formData = new FormData();
+
+  // Add text fields
+  if (createShareWithFilesBody.name) {
+    formData.append("name", createShareWithFilesBody.name);
+  }
+  if (createShareWithFilesBody.description) {
+    formData.append("description", createShareWithFilesBody.description);
+  }
+  if (createShareWithFilesBody.expiration) {
+    formData.append("expiration", createShareWithFilesBody.expiration);
+  }
+  if (createShareWithFilesBody.password) {
+    formData.append("password", createShareWithFilesBody.password);
+  }
+  if (createShareWithFilesBody.maxViews !== undefined && createShareWithFilesBody.maxViews !== null) {
+    formData.append("maxViews", createShareWithFilesBody.maxViews.toString());
+  }
+  if (createShareWithFilesBody.folderId !== undefined) {
+    formData.append("folderId", createShareWithFilesBody.folderId || "");
+  }
+
+  // Add array fields as JSON strings
+  if (createShareWithFilesBody.existingFiles && createShareWithFilesBody.existingFiles.length > 0) {
+    formData.append("existingFiles", JSON.stringify(createShareWithFilesBody.existingFiles));
+  }
+  if (createShareWithFilesBody.existingFolders && createShareWithFilesBody.existingFolders.length > 0) {
+    formData.append("existingFolders", JSON.stringify(createShareWithFilesBody.existingFolders));
+  }
+  if (createShareWithFilesBody.recipients && createShareWithFilesBody.recipients.length > 0) {
+    formData.append("recipients", JSON.stringify(createShareWithFilesBody.recipients));
+  }
+
+  // Add files
+  if (createShareWithFilesBody.newFiles && createShareWithFilesBody.newFiles.length > 0) {
+    createShareWithFilesBody.newFiles.forEach((file) => {
+      formData.append("files", file);
+    });
+  }
+
+  return apiInstance.post(`/api/shares/create-with-files`, formData, {
+    ...options,
+    headers: {
+      ...options?.headers,
+      "Content-Type": "multipart/form-data",
+    },
+  });
+};
+
 /**
  * Update a share
  * @summary Update a share

apps/web/src/http/endpoints/shares/types.ts

@@ -139,6 +139,19 @@ export interface CreateShareBody {
   recipients?: string[];
 }
 
+export interface CreateShareWithFilesBody {
+  name?: string;
+  description?: string;
+  expiration?: string;
+  existingFiles?: string[];
+  existingFolders?: string[];
+  password?: string;
+  maxViews?: number | null;
+  recipients?: string[];
+  folderId?: string | null;
+  newFiles?: File[];
+}
+
 export interface UpdateShareBody {
   id: string;
   name?: string;
@@ -186,6 +199,7 @@ export interface GetShareByAliasParams {
 }
 
 export type CreateShareResult = AxiosResponse<CreateShare201>;
+export type CreateShareWithFilesResult = AxiosResponse<CreateShare201>;
 export type UpdateShareResult = AxiosResponse<UpdateShare200>;
 export type ListUserSharesResult = AxiosResponse<ListUserShares200>;
 export type GetShareResult = AxiosResponse<GetShare200>;