feat: implement file download and preview features with improved URL handling (#315)

This commit is contained in:
Daniel Luiz Alves
2025-10-21 10:00:13 -03:00
committed by GitHub
parent 91a5a24c8b
commit 59fccd9a93
31 changed files with 250 additions and 105 deletions

View File

@@ -1,3 +1,4 @@
import * as fs from "fs";
import bcrypt from "bcryptjs";
import { FastifyReply, FastifyRequest } from "fastify";
@@ -8,6 +9,7 @@ import {
generateUniqueFileNameForRename,
parseFileName,
} from "../../utils/file-name-generator";
import { getContentType } from "../../utils/mime-types";
import { ConfigService } from "../config/service";
import {
CheckFileInput,
@@ -200,11 +202,10 @@ export class FileController {
async getDownloadUrl(request: FastifyRequest, reply: FastifyReply) {
try {
const { objectName: encodedObjectName } = request.params as {
const { objectName, password } = request.query as {
objectName: string;
password?: string;
};
const objectName = decodeURIComponent(encodedObjectName);
const { password } = request.query as { password?: string };
if (!objectName) {
return reply.status(400).send({ error: "The 'objectName' parameter is required." });
@@ -218,7 +219,8 @@ export class FileController {
let hasAccess = false;
console.log("Requested file with password " + password);
// Don't log raw passwords. Log only whether a password was provided (for debugging access flow).
console.log(`Requested file access for object="${objectName}" passwordProvided=${password ? true : false}`);
const shares = await prisma.share.findMany({
where: {
@@ -270,6 +272,118 @@ export class FileController {
}
}
async downloadFile(request: FastifyRequest, reply: FastifyReply) {
try {
const { objectName, password } = request.query as {
objectName: string;
password?: string;
};
if (!objectName) {
return reply.status(400).send({ error: "The 'objectName' parameter is required." });
}
const fileRecord = await prisma.file.findFirst({ where: { objectName } });
if (!fileRecord) {
if (objectName.startsWith("reverse-shares/")) {
const reverseShareFile = await prisma.reverseShareFile.findFirst({
where: { objectName },
include: {
reverseShare: true,
},
});
if (!reverseShareFile) {
return reply.status(404).send({ error: "File not found." });
}
try {
await request.jwtVerify();
const userId = (request as any).user?.userId;
if (!userId || reverseShareFile.reverseShare.creatorId !== userId) {
return reply.status(401).send({ error: "Unauthorized access to file." });
}
} catch (err) {
return reply.status(401).send({ error: "Unauthorized access to file." });
}
const storageProvider = (this.fileService as any).storageProvider;
const filePath = storageProvider.getFilePath(objectName);
const contentType = getContentType(reverseShareFile.name);
const fileName = reverseShareFile.name;
reply.header("Content-Type", contentType);
reply.header("Content-Disposition", `inline; filename="${encodeURIComponent(fileName)}"`);
const stream = fs.createReadStream(filePath);
return reply.send(stream);
}
return reply.status(404).send({ error: "File not found." });
}
let hasAccess = false;
const shares = await prisma.share.findMany({
where: {
files: {
some: {
id: fileRecord.id,
},
},
},
include: {
security: true,
},
});
for (const share of shares) {
if (!share.security.password) {
hasAccess = true;
break;
} else if (password) {
const isPasswordValid = await bcrypt.compare(password, share.security.password);
if (isPasswordValid) {
hasAccess = true;
break;
}
}
}
if (!hasAccess) {
try {
await request.jwtVerify();
const userId = (request as any).user?.userId;
if (userId && fileRecord.userId === userId) {
hasAccess = true;
}
} catch (err) {}
}
if (!hasAccess) {
return reply.status(401).send({ error: "Unauthorized access to file." });
}
const storageProvider = (this.fileService as any).storageProvider;
const filePath = storageProvider.getFilePath(objectName);
const contentType = getContentType(fileRecord.name);
const fileName = fileRecord.name;
reply.header("Content-Type", contentType);
reply.header("Content-Disposition", `inline; filename="${encodeURIComponent(fileName)}"`);
const stream = fs.createReadStream(filePath);
return reply.send(stream);
} catch (error) {
console.error("Error in downloadFile:", error);
return reply.status(500).send({ error: "Internal server error." });
}
}
async listFiles(request: FastifyRequest, reply: FastifyReply) {
try {
await request.jwtVerify();

View File

@@ -106,17 +106,15 @@ export async function fileRoutes(app: FastifyInstance) {
);
app.get(
"/files/:objectName/download",
"/files/download-url",
{
schema: {
tags: ["File"],
operationId: "getDownloadUrl",
summary: "Get Download URL",
description: "Generates a pre-signed URL for downloading a file",
params: z.object({
objectName: z.string().min(1, "The objectName is required"),
}),
querystring: z.object({
objectName: z.string().min(1, "The objectName is required"),
password: z.string().optional().describe("Share password if required"),
}),
response: {
@@ -133,6 +131,23 @@ export async function fileRoutes(app: FastifyInstance) {
fileController.getDownloadUrl.bind(fileController)
);
app.get(
"/files/download",
{
schema: {
tags: ["File"],
operationId: "downloadFile",
summary: "Download File",
description: "Downloads a file directly (returns file content)",
querystring: z.object({
objectName: z.string().min(1, "The objectName is required"),
password: z.string().optional().describe("Share password if required"),
}),
},
},
fileController.downloadFile.bind(fileController)
);
app.get(
"/files",
{

View File

@@ -84,7 +84,6 @@ export class FilesystemController {
const result = await this.handleChunkedUpload(request, chunkMetadata, tokenData.objectName);
if (result.isComplete) {
provider.consumeUploadToken(token);
reply.status(200).send({
message: "File uploaded successfully",
objectName: result.finalPath,
@@ -104,7 +103,6 @@ export class FilesystemController {
}
} else {
await this.uploadFileStream(request, provider, tokenData.objectName);
provider.consumeUploadToken(token);
reply.status(200).send({ message: "File uploaded successfully" });
}
} catch (error) {
@@ -271,8 +269,6 @@ export class FilesystemController {
reply.header("Content-Length", fileSize);
await this.downloadFileStream(reply, provider, tokenData.objectName, downloadId);
}
provider.consumeDownloadToken(token);
} finally {
this.memoryManager.endDownload(downloadId);
}

View File

@@ -192,13 +192,9 @@ export class FilesystemStorageProvider implements StorageProvider {
return `/api/filesystem/upload/${token}`;
}
async getPresignedGetUrl(objectName: string, expires: number, fileName?: string): Promise<string> {
const token = crypto.randomBytes(32).toString("hex");
const expiresAt = Date.now() + expires * 1000;
this.downloadTokens.set(token, { objectName, expiresAt, fileName });
return `/api/filesystem/download/${token}`;
async getPresignedGetUrl(objectName: string): Promise<string> {
const encodedObjectName = encodeURIComponent(objectName);
return `/api/files/download?objectName=${encodedObjectName}`;
}
async deleteObject(objectName: string): Promise<void> {
@@ -636,13 +632,8 @@ export class FilesystemStorageProvider implements StorageProvider {
return { objectName: data.objectName, fileName: data.fileName };
}
consumeUploadToken(token: string): void {
this.uploadTokens.delete(token);
}
consumeDownloadToken(token: string): void {
this.downloadTokens.delete(token);
}
// Tokens are automatically cleaned up by cleanExpiredTokens() every 5 minutes
// No need to manually consume tokens - allows reuse for previews, range requests, etc.
private async cleanupTempFile(tempPath: string): Promise<void> {
try {

View File

@@ -302,6 +302,7 @@
},
"filePreview": {
"title": "معاينة الملف",
"description": "معاينة وتنزيل الملف",
"loading": "جاري التحميل...",
"notAvailable": "المعاينة غير متاحة لهذا النوع من الملفات.",
"downloadToView": "استخدم زر التحميل لتنزيل الملف.",
@@ -1933,4 +1934,4 @@
"nameRequired": "الاسم مطلوب",
"required": "هذا الحقل مطلوب"
}
}
}

View File

@@ -302,6 +302,7 @@
},
"filePreview": {
"title": "Datei-Vorschau",
"description": "Vorschau und Download der Datei",
"loading": "Laden...",
"notAvailable": "Vorschau für diesen Dateityp nicht verfügbar.",
"downloadToView": "Verwenden Sie die Download-Schaltfläche, um die Datei herunterzuladen.",
@@ -1931,4 +1932,4 @@
"nameRequired": "Name ist erforderlich",
"required": "Dieses Feld ist erforderlich"
}
}
}

View File

@@ -302,6 +302,7 @@
},
"filePreview": {
"title": "Preview File",
"description": "Preview and download file",
"loading": "Loading...",
"notAvailable": "Preview not available for this file type",
"downloadToView": "Use the download button to view this file",
@@ -1896,4 +1897,4 @@
"nameRequired": "Name is required",
"required": "This field is required"
}
}
}

View File

@@ -302,6 +302,7 @@
},
"filePreview": {
"title": "Vista Previa del Archivo",
"description": "Vista previa y descarga de archivo",
"loading": "Cargando...",
"notAvailable": "Vista previa no disponible para este tipo de archivo.",
"downloadToView": "Use el botón de descarga para descargar el archivo.",
@@ -1931,4 +1932,4 @@
"nameRequired": "El nombre es obligatorio",
"required": "Este campo es obligatorio"
}
}
}

View File

@@ -302,6 +302,7 @@
},
"filePreview": {
"title": "Aperçu du Fichier",
"description": "Aperçu et téléchargement du fichier",
"loading": "Chargement...",
"notAvailable": "Aperçu non disponible pour ce type de fichier.",
"downloadToView": "Utilisez le bouton de téléchargement pour télécharger le fichier.",
@@ -1931,4 +1932,4 @@
"nameRequired": "Nome é obrigatório",
"required": "Este campo é obrigatório"
}
}
}

View File

@@ -302,6 +302,7 @@
},
"filePreview": {
"title": "फ़ाइल पूर्वावलोकन",
"description": "फ़ाइल पूर्वावलोकन और डाउनलोड",
"loading": "लोड हो रहा है...",
"notAvailable": "इस फ़ाइल प्रकार के लिए पूर्वावलोकन उपलब्ध नहीं है।",
"downloadToView": "फ़ाइल डाउनलोड करने के लिए डाउनलोड बटन का उपयोग करें।",
@@ -1931,4 +1932,4 @@
"nameRequired": "नाम आवश्यक है",
"required": "यह फ़ील्ड आवश्यक है"
}
}
}

View File

@@ -302,6 +302,7 @@
},
"filePreview": {
"title": "Anteprima File",
"description": "Anteprima e download del file",
"loading": "Caricamento...",
"notAvailable": "Anteprima non disponibile per questo tipo di file.",
"downloadToView": "Utilizzare il pulsante di download per scaricare il file.",
@@ -1931,4 +1932,4 @@
"nameRequired": "Il nome è obbligatorio",
"required": "Questo campo è obbligatorio"
}
}
}

View File

@@ -302,6 +302,7 @@
},
"filePreview": {
"title": "ファイルプレビュー",
"description": "ファイルをプレビューしてダウンロード",
"loading": "読み込み中...",
"notAvailable": "このファイルタイプのプレビューは利用できません。",
"downloadToView": "ダウンロードボタンを使用してファイルをダウンロードしてください。",
@@ -1931,4 +1932,4 @@
"nameRequired": "名前は必須です",
"required": "このフィールドは必須です"
}
}
}

View File

@@ -302,6 +302,7 @@
},
"filePreview": {
"title": "파일 미리보기",
"description": "파일 미리보기 및 다운로드",
"loading": "로딩 중...",
"notAvailable": "이 파일 유형에 대한 미리보기를 사용할 수 없습니다.",
"downloadToView": "다운로드 버튼을 사용하여 파일을 다운로드하세요.",
@@ -1931,4 +1932,4 @@
"nameRequired": "이름은 필수입니다",
"required": "이 필드는 필수입니다"
}
}
}

View File

@@ -302,6 +302,7 @@
},
"filePreview": {
"title": "Bestandsvoorbeeld",
"description": "Bestand bekijken en downloaden",
"loading": "Laden...",
"notAvailable": "Voorbeeld niet beschikbaar voor dit bestandstype.",
"downloadToView": "Gebruik de downloadknop om het bestand te downloaden.",
@@ -1931,4 +1932,4 @@
"nameRequired": "Naam is verplicht",
"required": "Dit veld is verplicht"
}
}
}

View File

@@ -302,6 +302,7 @@
},
"filePreview": {
"title": "Podgląd pliku",
"description": "Podgląd i pobieranie pliku",
"loading": "Ładowanie...",
"notAvailable": "Podgląd niedostępny dla tego typu pliku",
"downloadToView": "Użyj przycisku pobierania, aby wyświetlić ten plik",
@@ -1931,4 +1932,4 @@
"nameRequired": "Nazwa jest wymagana",
"required": "To pole jest wymagane"
}
}
}

View File

@@ -302,6 +302,7 @@
},
"filePreview": {
"title": "Visualizar Arquivo",
"description": "Visualizar e baixar arquivo",
"loading": "Carregando...",
"notAvailable": "Preview não disponível para este tipo de arquivo.",
"downloadToView": "Use o botão de download para baixar o arquivo.",
@@ -1932,4 +1933,4 @@
"usernameLength": "O nome de usuário deve ter pelo menos 3 caracteres",
"usernameSpaces": "O nome de usuário não pode conter espaços"
}
}
}

View File

@@ -302,6 +302,7 @@
},
"filePreview": {
"title": "Предварительный просмотр файла",
"description": "Просмотр и загрузка файла",
"loading": "Загрузка...",
"notAvailable": "Предварительный просмотр недоступен для этого типа файла.",
"downloadToView": "Используйте кнопку загрузки для скачивания файла.",
@@ -1931,4 +1932,4 @@
"nameRequired": "Требуется имя",
"required": "Это поле обязательно"
}
}
}

View File

@@ -302,6 +302,7 @@
},
"filePreview": {
"title": "Dosya Önizleme",
"description": "Dosyayı önizleyin ve indirin",
"loading": "Yükleniyor...",
"notAvailable": "Bu dosya türü için önizleme mevcut değil.",
"downloadToView": "Dosyayı indirmek için indirme düğmesini kullanın.",
@@ -1931,4 +1932,4 @@
"nameRequired": "İsim gereklidir",
"required": "Bu alan zorunludur"
}
}
}

View File

@@ -302,6 +302,7 @@
},
"filePreview": {
"title": "文件预览",
"description": "预览和下载文件",
"loading": "加载中...",
"notAvailable": "此文件类型不支持预览。",
"downloadToView": "使用下载按钮下载文件。",
@@ -1931,4 +1932,4 @@
"nameRequired": "名称为必填项",
"required": "此字段为必填项"
}
}
}

View File

@@ -900,16 +900,7 @@ export function ReceivedFilesModal({
</Dialog>
{previewFile && (
<ReverseShareFilePreviewModal
isOpen={!!previewFile}
onClose={() => setPreviewFile(null)}
file={{
id: previewFile.id,
name: previewFile.name,
objectName: previewFile.objectName,
extension: previewFile.extension,
}}
/>
<ReverseShareFilePreviewModal isOpen={!!previewFile} onClose={() => setPreviewFile(null)} file={previewFile} />
)}
</>
);

View File

@@ -7,23 +7,11 @@ import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { deleteReverseShareFile } from "@/http/endpoints/reverse-shares";
import type { ReverseShareFile } from "@/http/endpoints/reverse-shares/types";
import { downloadReverseShareWithQueue } from "@/utils/download-queue-utils";
import { getFileIcon } from "@/utils/file-icons";
import { ReverseShareFilePreviewModal } from "./reverse-share-file-preview-modal";
interface ReverseShareFile {
id: string;
name: string;
description: string | null;
extension: string;
size: string;
objectName: string;
uploaderEmail: string | null;
uploaderName: string | null;
createdAt: string;
updatedAt: string;
}
interface ReceivedFilesSectionProps {
files: ReverseShareFile[];
onFileDeleted?: () => void;
@@ -159,16 +147,7 @@ export function ReceivedFilesSection({ files, onFileDeleted }: ReceivedFilesSect
</div>
{previewFile && (
<ReverseShareFilePreviewModal
isOpen={!!previewFile}
onClose={() => setPreviewFile(null)}
file={{
id: previewFile.id,
name: previewFile.name,
objectName: previewFile.objectName,
extension: previewFile.extension,
}}
/>
<ReverseShareFilePreviewModal isOpen={!!previewFile} onClose={() => setPreviewFile(null)} file={previewFile} />
)}
</>
);

View File

@@ -1,26 +1,20 @@
"use client";
import { FilePreviewModal } from "@/components/modals/file-preview-modal";
import type { ReverseShareFile } from "@/http/endpoints/reverse-shares/types";
interface ReverseShareFilePreviewModalProps {
isOpen: boolean;
onClose: () => void;
file: {
id: string;
name: string;
objectName: string;
extension?: string;
} | null;
file: ReverseShareFile | null;
}
export function ReverseShareFilePreviewModal({ isOpen, onClose, file }: ReverseShareFilePreviewModalProps) {
if (!file) return null;
const adaptedFile = {
name: file.name,
objectName: file.objectName,
type: file.extension,
id: file.id,
...file,
description: file.description ?? undefined,
};
return <FilePreviewModal isOpen={isOpen} onClose={onClose} file={adaptedFile} isReverseShare={true} />;

View File

@@ -30,7 +30,7 @@ export function ReverseSharesSearch({
<div className="flex flex-col sm:flex-row justify-between sm:items-center gap-4">
<h2 className="text-xl font-semibold">{t("reverseShares.search.title")}</h2>
<div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2">
<Button variant="outline" size="icon" onClick={onRefresh} disabled={isRefreshing} className="sm:w-auto">
<Button variant="outline" size="icon" onClick={onRefresh} disabled={isRefreshing}>
<IconRefresh className={`h-4 w-4 ${isRefreshing ? "animate-spin" : ""}`} />
</Button>
<Button onClick={onCreateReverseShare} className="w-full sm:w-auto">

View File

@@ -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 GET(req: NextRequest) {
const cookieHeader = req.headers.get("cookie");
const searchParams = req.nextUrl.searchParams;
const objectName = searchParams.get("objectName");
if (!objectName) {
return new NextResponse(JSON.stringify({ error: "objectName parameter is required" }), {
status: 400,
headers: {
"Content-Type": "application/json",
},
});
}
// Forward all query params to backend
const queryString = searchParams.toString();
const url = `${API_BASE_URL}/files/download-url?${queryString}`;
const apiRes = await fetch(url, {
method: "GET",
headers: {
cookie: cookieHeader || "",
},
});
const data = await apiRes.json();
return new NextResponse(JSON.stringify(data), {
status: apiRes.status,
headers: {
"Content-Type": "application/json",
},
});
}

View File

@@ -4,13 +4,22 @@ import { detectMimeTypeWithFallback } from "@/utils/mime-types";
const API_BASE_URL = process.env.API_BASE_URL || "http://localhost:3333";
export async function GET(req: NextRequest, { params }: { params: Promise<{ objectPath: string[] }> }) {
const { objectPath } = await params;
export async function GET(req: NextRequest) {
const cookieHeader = req.headers.get("cookie");
const objectName = objectPath.join("/");
const searchParams = req.nextUrl.searchParams;
const objectName = searchParams.get("objectName");
if (!objectName) {
return new NextResponse(JSON.stringify({ error: "objectName parameter is required" }), {
status: 400,
headers: {
"Content-Type": "application/json",
},
});
}
const queryString = searchParams.toString();
const url = `${API_BASE_URL}/files/${encodeURIComponent(objectName)}/download${queryString ? `?${queryString}` : ""}`;
const url = `${API_BASE_URL}/files/download?${queryString}`;
const apiRes = await fetch(url, {
method: "GET",

View File

@@ -4,7 +4,14 @@ import { IconDownload } from "@tabler/icons-react";
import { useTranslations } from "next-intl";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { useFilePreview } from "@/hooks/use-file-preview";
import { getFileIcon } from "@/utils/file-icons";
import { FilePreviewRenderer } from "./previews";
@@ -44,6 +51,7 @@ export function FilePreviewModal({
})()}
<span className="truncate">{file.name}</span>
</DialogTitle>
<DialogDescription className="sr-only">{t("filePreview.description")}</DialogDescription>
</DialogHeader>
<div className="flex-1 overflow-auto">
<FilePreviewRenderer

View File

@@ -163,8 +163,7 @@ export function FilesGrid({
try {
loadingUrls.current.add(file.objectName);
const encodedObjectName = encodeURIComponent(file.objectName);
const response = await getDownloadUrl(encodedObjectName);
const response = await getDownloadUrl(file.objectName);
if (!componentMounted.current) break;

View File

@@ -187,8 +187,7 @@ export function useEnhancedFileManager(onRefresh: () => Promise<void>, clearSele
let url = downloadUrl;
if (!url) {
const encodedObjectName = encodeURIComponent(objectName);
const response = await getDownloadUrl(encodedObjectName);
const response = await getDownloadUrl(objectName);
url = response.data.url;
}

View File

@@ -181,12 +181,11 @@ export function useFilePreview({ file, isOpen, isReverseShare = false, sharePass
const response = await downloadReverseShareFile(file.id!);
url = response.data.url;
} else {
const encodedObjectName = encodeURIComponent(file.objectName);
const params: Record<string, string> = {};
if (sharePassword) params.password = sharePassword;
const response = await getDownloadUrl(
encodedObjectName,
file.objectName,
Object.keys(params).length > 0
? {
params: { ...params },

View File

@@ -80,7 +80,8 @@ export const getDownloadUrl = <TData = GetDownloadUrlResult>(
objectName: string,
options?: AxiosRequestConfig
): Promise<TData> => {
return apiInstance.get(`/api/files/download/${objectName}`, options);
const encodedObjectName = encodeURIComponent(objectName);
return apiInstance.get(`/api/files/download-url?objectName=${encodedObjectName}`, options);
};
/**

View File

@@ -21,8 +21,7 @@ async function waitForDownloadReady(objectName: string, fileName: string): Promi
while (attempts < maxAttempts) {
try {
const encodedObjectName = encodeURIComponent(objectName);
const response = await getDownloadUrl(encodedObjectName);
const response = await getDownloadUrl(objectName);
if (response.status !== 202) {
return response.data.url;
@@ -98,13 +97,12 @@ export async function downloadFileWithQueue(
options.onStart?.(downloadId);
}
const encodedObjectName = encodeURIComponent(objectName);
// getDownloadUrl already handles encoding
const params: Record<string, string> = {};
if (sharePassword) params.password = sharePassword;
const response = await getDownloadUrl(
encodedObjectName,
objectName,
Object.keys(params).length > 0
? {
params: { ...params },
@@ -208,13 +206,12 @@ export async function downloadFileAsBlobWithQueue(
downloadUrl = response.data.url;
}
} else {
const encodedObjectName = encodeURIComponent(objectName);
// getDownloadUrl already handles encoding
const params: Record<string, string> = {};
if (sharePassword) params.password = sharePassword;
const response = await getDownloadUrl(
encodedObjectName,
objectName,
Object.keys(params).length > 0
? {
params: { ...params },