-
Вложения
- {issueAttachments.length}
+ Вложения
+
+ {activeUploads.length > 0 ? `Загрузка ${uploadProgress}%` : issueAttachments.length}
+
{uploadStatus?.map((status) => (
diff --git a/plane-src/apps/web/core/components/issues/attachment/attachment-list-item.tsx b/plane-src/apps/web/core/components/issues/attachment/attachment-list-item.tsx
index 2b467fe..3968287 100644
--- a/plane-src/apps/web/core/components/issues/attachment/attachment-list-item.tsx
+++ b/plane-src/apps/web/core/components/issues/attachment/attachment-list-item.tsx
@@ -17,11 +17,12 @@ import { EIssueServiceType } from "@plane/types";
import type { TContextMenuItem } from "@plane/ui";
import { ActionDropdown, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
import { convertBytesToSize, getFileExtension, getFileName, getFileURL, renderFormattedDate } from "@plane/utils";
-import { Download, FileText, ImageIcon, Play, X } from "lucide-react";
+import { Download, ImageIcon, Play, X } from "lucide-react";
// components
//
import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
import { getFileIcon } from "@/components/icons";
+import { IssueAttachmentPdfPreview, IssueAttachmentPdfThumbnail } from "./attachment-pdf-preview";
// helpers
// hooks
import { useIssueDetail } from "@/hooks/store/use-issue-detail";
@@ -38,6 +39,13 @@ const IMAGE_EXTENSIONS = new Set(["apng", "avif", "bmp", "gif", "jpg", "jpeg", "
const VIDEO_EXTENSIONS = new Set(["avi", "m4v", "mov", "mp4", "mpeg", "mpg", "ogv", "webm"]);
const PDF_EXTENSIONS = new Set(["pdf"]);
+const appendSearchParam = (url: string | undefined, key: string, value: string): string => {
+ if (!url) return "";
+ const [urlWithoutHash, hash] = url.split("#");
+ const separator = urlWithoutHash.includes("?") ? "&" : "?";
+ return `${urlWithoutHash}${separator}${key}=${encodeURIComponent(value)}${hash ? `#${hash}` : ""}`;
+};
+
const getPreviewType = (extension: string) => {
const normalizedExtension = extension.toLowerCase();
if (IMAGE_EXTENSIONS.has(normalizedExtension)) return "image";
@@ -64,7 +72,9 @@ export const IssueAttachmentsListItem = observer(function IssueAttachmentsListIt
const previewType = getPreviewType(fileExtension);
const fileIcon = getFileIcon(fileExtension, 32);
const fileURL = getFileURL(attachment?.asset_url ?? "");
+ const previewURL = appendSearchParam(fileURL, "preview", "true");
const [isPreviewOpen, setIsPreviewOpen] = useState(false);
+ const [isThumbnailError, setIsThumbnailError] = useState(false);
const menuItems: TContextMenuItem[] = [
{
key: "delete",
@@ -93,19 +103,23 @@ export const IssueAttachmentsListItem = observer(function IssueAttachmentsListIt
}}
>
- {previewType === "image" && fileURL ? (
- 
- ) : previewType === "video" && fileURL ? (
+ {previewType === "image" && previewURL && !isThumbnailError ? (
+ 
setIsThumbnailError(true)}
+ />
+ ) : previewType === "video" && previewURL ? (
<>
-
+
-
+ ) : previewType === "pdf" && previewURL ? (
+
{previewType === "file" ? fileIcon :
+
-
+
-
{fullFileName}
{convertBytesToSize(attachment.attributes.size)}
- {previewType === "image" && fileURL ? (
-
- ) : previewType === "video" && fileURL ? (
-
- ) : previewType === "pdf" && fileURL ? (
-
+
+ {previewType === "image" && previewURL ? (
+
+
+
+ ) : previewType === "video" && previewURL ? (
+
+
+
+ ) : previewType === "pdf" && previewURL ? (
+
+
+ {fileIcon}
Предпросмотр для этого формата недоступен. Файл можно скачать или открыть в новой вкладке.
diff --git a/plane-src/apps/web/core/components/issues/attachment/attachment-pdf-preview.tsx b/plane-src/apps/web/core/components/issues/attachment/attachment-pdf-preview.tsx
new file mode 100644
index 0000000..956d16a
--- /dev/null
+++ b/plane-src/apps/web/core/components/issues/attachment/attachment-pdf-preview.tsx
@@ -0,0 +1,367 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import { FileText, FileWarning, Loader2 } from "lucide-react";
+import type { PDFDocumentProxy } from "pdfjs-dist/types/src/display/api";
+
+type PdfLoadingTask = {
+ destroy?: () => void;
+ promise: Promise;
+};
+
+type PdfRenderTask = {
+ cancel?: () => void;
+ promise: Promise;
+};
+
+type PdfViewerProps = {
+ fileURL: string;
+};
+
+type PdfPageCanvasProps = {
+ pageNumber: number;
+ pdfDocument: PDFDocumentProxy;
+ renderWidth: number;
+};
+
+type PdfThumbnailProps = {
+ fileURL: string;
+};
+
+const MAX_PREVIEW_PAGE_WIDTH = 1040;
+const MIN_PREVIEW_PAGE_WIDTH = 360;
+
+const configurePdfJs = async () => {
+ const pdfjs = await import("pdfjs-dist/legacy/build/pdf.mjs");
+ pdfjs.GlobalWorkerOptions.workerSrc = new URL("pdfjs-dist/legacy/build/pdf.worker.mjs", import.meta.url).toString();
+ return pdfjs;
+};
+
+const loadPdfDocument = async (fileURL: string, signal?: AbortSignal) => {
+ const pdfjs = await configurePdfJs();
+ let networkTask: PdfLoadingTask | undefined;
+
+ try {
+ networkTask = pdfjs.getDocument({ url: fileURL, withCredentials: true });
+ return {
+ document: await networkTask.promise,
+ loadingTask: networkTask,
+ };
+ } catch (networkError) {
+ await networkTask?.destroy?.();
+ if (signal?.aborted) throw networkError;
+
+ const response = await fetch(fileURL, { credentials: "include", signal });
+ if (!response.ok) throw new Error(`PDF attachment request failed with ${response.status}`);
+
+ const pdfData = new Uint8Array(await response.arrayBuffer());
+ const bytesTask = pdfjs.getDocument({ data: pdfData });
+ return {
+ document: await bytesTask.promise,
+ loadingTask: bytesTask,
+ };
+ }
+};
+
+const getOutputScale = () => Math.max(window.devicePixelRatio || 1, 1);
+
+const PdfPageCanvas = (props: PdfPageCanvasProps) => {
+ const { pageNumber, pdfDocument, renderWidth } = props;
+ const canvasRef = useRef(null);
+ const [isRendering, setIsRendering] = useState(true);
+
+ useEffect(() => {
+ if (!canvasRef.current || renderWidth <= 0) return;
+
+ let isCancelled = false;
+ let renderTask: PdfRenderTask | undefined;
+
+ const renderPage = async () => {
+ setIsRendering(true);
+
+ try {
+ const page = await pdfDocument.getPage(pageNumber);
+ if (isCancelled) return;
+
+ const canvas = canvasRef.current;
+ const context = canvas?.getContext("2d");
+ if (!canvas || !context) return;
+
+ const viewport = page.getViewport({ scale: 1 });
+ const scale = renderWidth / viewport.width;
+ const scaledViewport = page.getViewport({ scale });
+ const outputScale = getOutputScale();
+
+ canvas.width = Math.floor(scaledViewport.width * outputScale);
+ canvas.height = Math.floor(scaledViewport.height * outputScale);
+ canvas.style.width = `${Math.floor(scaledViewport.width)}px`;
+ canvas.style.height = `${Math.floor(scaledViewport.height)}px`;
+ context.setTransform(outputScale, 0, 0, outputScale, 0, 0);
+ context.clearRect(0, 0, scaledViewport.width, scaledViewport.height);
+
+ renderTask = page.render({ canvasContext: context, viewport: scaledViewport });
+ await renderTask.promise;
+ } finally {
+ if (!isCancelled) setIsRendering(false);
+ }
+ };
+
+ renderPage().catch((error) => {
+ if ((error as { name?: string })?.name !== "RenderingCancelledException") {
+ console.error("Error in rendering PDF attachment page:", error);
+ }
+ if (!isCancelled) setIsRendering(false);
+ });
+
+ return () => {
+ isCancelled = true;
+ renderTask?.cancel?.();
+ };
+ }, [pageNumber, pdfDocument, renderWidth]);
+
+ return (
+ (null);
+ const canvasRef = useRef(null);
+ const pdfDocumentRef = useRef(null);
+ const [hasError, setHasError] = useState(false);
+ const [isLoading, setIsLoading] = useState(true);
+ const [renderTick, setRenderTick] = useState(0);
+
+ useEffect(() => {
+ const frame = frameRef.current;
+ if (!frame) return;
+
+ const resizeObserver = new ResizeObserver(() => setRenderTick((current) => current + 1));
+ resizeObserver.observe(frame);
+
+ return () => resizeObserver.disconnect();
+ }, []);
+
+ useEffect(() => {
+ if (!fileURL || !frameRef.current || !canvasRef.current) return;
+
+ const controller = new AbortController();
+ let isCancelled = false;
+ let loadingTask: PdfLoadingTask | undefined;
+ let renderTask: PdfRenderTask | undefined;
+
+ const renderThumbnail = async () => {
+ setIsLoading(true);
+ setHasError(false);
+
+ try {
+ const loaded = await loadPdfDocument(fileURL, controller.signal);
+ loadingTask = loaded.loadingTask;
+ const document = loaded.document;
+
+ if (isCancelled) {
+ document.destroy();
+ return;
+ }
+
+ pdfDocumentRef.current = document;
+
+ const page = await document.getPage(1);
+ if (isCancelled) return;
+
+ const frame = frameRef.current;
+ const canvas = canvasRef.current;
+ const context = canvas?.getContext("2d");
+ if (!frame || !canvas || !context) return;
+
+ const frameWidth = Math.max(frame.clientWidth, 1);
+ const frameHeight = Math.max(frame.clientHeight, 1);
+ const viewport = page.getViewport({ scale: 1 });
+ const scale = Math.max(frameWidth / viewport.width, frameHeight / viewport.height);
+ const scaledViewport = page.getViewport({ scale });
+ const outputScale = getOutputScale();
+
+ canvas.width = Math.floor(scaledViewport.width * outputScale);
+ canvas.height = Math.floor(scaledViewport.height * outputScale);
+ canvas.style.width = `${Math.floor(scaledViewport.width)}px`;
+ canvas.style.height = `${Math.floor(scaledViewport.height)}px`;
+ context.setTransform(outputScale, 0, 0, outputScale, 0, 0);
+ context.clearRect(0, 0, scaledViewport.width, scaledViewport.height);
+
+ renderTask = page.render({ canvasContext: context, viewport: scaledViewport });
+ await renderTask.promise;
+ } catch (error) {
+ if (!isCancelled && (error as { name?: string })?.name !== "RenderingCancelledException") {
+ console.error("Error in rendering PDF attachment thumbnail:", error);
+ setHasError(true);
+ }
+ } finally {
+ if (!isCancelled) setIsLoading(false);
+ }
+ };
+
+ renderThumbnail();
+
+ return () => {
+ isCancelled = true;
+ controller.abort();
+ renderTask?.cancel?.();
+ loadingTask?.destroy?.();
+ pdfDocumentRef.current?.destroy();
+ pdfDocumentRef.current = null;
+ };
+ }, [fileURL, renderTick]);
+
+ return (
+ (null);
+ const pdfDocumentRef = useRef(null);
+ const [pdfDocument, setPdfDocument] = useState(null);
+ const [pageCount, setPageCount] = useState(0);
+ const [renderWidth, setRenderWidth] = useState(MIN_PREVIEW_PAGE_WIDTH);
+ const [isLoading, setIsLoading] = useState(true);
+ const [hasError, setHasError] = useState(false);
+
+ const pageNumbers = useMemo(
+ () => Array.from({ length: pageCount }, (_, index) => index + 1),
+ [pageCount]
+ );
+
+ useEffect(() => {
+ if (!fileURL) return;
+
+ const controller = new AbortController();
+ let isCancelled = false;
+ let loadingTask: PdfLoadingTask | undefined;
+
+ const loadDocument = async () => {
+ setIsLoading(true);
+ setHasError(false);
+ setPdfDocument(null);
+ setPageCount(0);
+
+ try {
+ const loaded = await loadPdfDocument(fileURL, controller.signal);
+ loadingTask = loaded.loadingTask;
+ const document = loaded.document;
+
+ if (isCancelled) {
+ document.destroy();
+ return;
+ }
+
+ pdfDocumentRef.current = document;
+ setPdfDocument(document);
+ setPageCount(document.numPages);
+ } catch (error) {
+ if (!isCancelled) {
+ console.error("Error in loading PDF attachment preview:", error);
+ setHasError(true);
+ }
+ } finally {
+ if (!isCancelled) setIsLoading(false);
+ }
+ };
+
+ loadDocument();
+
+ return () => {
+ isCancelled = true;
+ controller.abort();
+ loadingTask?.destroy?.();
+ pdfDocumentRef.current?.destroy();
+ pdfDocumentRef.current = null;
+ };
+ }, [fileURL]);
+
+ useEffect(() => {
+ const container = containerRef.current;
+ if (!container) return;
+
+ const updateRenderWidth = () => {
+ const width = Math.min(Math.max(container.clientWidth - 64, MIN_PREVIEW_PAGE_WIDTH), MAX_PREVIEW_PAGE_WIDTH);
+ setRenderWidth(width);
+ };
+
+ updateRenderWidth();
+ const resizeObserver = new ResizeObserver(updateRenderWidth);
+ resizeObserver.observe(container);
+
+ return () => resizeObserver.disconnect();
+ }, []);
+
+ if (hasError) {
+ return (
+ = {
organization_size: "2-10",
logo_url: null,
timezone: "UTC",
+ storage_file_size_limit_enabled: true,
+ storage_file_size_limit: MAX_FILE_SIZE,
+};
+
+const BYTES_IN_MB = 1024 * 1024;
+
+const bytesToMegabytes = (value?: number) => {
+ if (!value || value < 1) return MAX_FILE_SIZE / BYTES_IN_MB;
+ return Number((value / BYTES_IN_MB).toFixed(2));
+};
+
+const megabytesToBytes = (value: string) => {
+ const numericValue = Number(value);
+ if (!Number.isFinite(numericValue) || numericValue <= 0) return 0;
+ return Math.round(numericValue * BYTES_IN_MB);
};
export const WorkspaceDetails = observer(function WorkspaceDetails() {
@@ -55,6 +70,7 @@ export const WorkspaceDetails = observer(function WorkspaceDetails() {
});
// derived values
const workspaceLogo = watch("logo_url");
+ const storageFileSizeLimitEnabled = watch("storage_file_size_limit_enabled") ?? true;
const onSubmit = async (formData: IWorkspace) => {
if (!currentWorkspace) return;
@@ -65,6 +81,8 @@ export const WorkspaceDetails = observer(function WorkspaceDetails() {
name: formData.name,
organization_size: formData.organization_size,
timezone: formData.timezone,
+ storage_file_size_limit_enabled: formData.storage_file_size_limit_enabled,
+ storage_file_size_limit: formData.storage_file_size_limit || MAX_FILE_SIZE,
};
try {
@@ -279,6 +297,96 @@ export const WorkspaceDetails = observer(function WorkspaceDetails() {
+ {isRendering && (
+
+ );
+};
+
+export const IssueAttachmentPdfThumbnail = (props: PdfThumbnailProps) => {
+ const { fileURL } = props;
+ const frameRef = useRef
+
+ )}
+
+
+ {!hasError && (
+
+ )}
+ {(isLoading || hasError) && (
+
+ );
+};
+
+export const IssueAttachmentPdfPreview = (props: PdfViewerProps) => {
+ const { fileURL } = props;
+ const containerRef = useRef
+ {isLoading ?
+ )}
+
+
+ );
+ }
+
+ return (
+
+
+
+ PDF не удалось открыть в предпросмотре. Проверьте загрузку файла или скачайте документ.
+
+
+
+ );
+};
diff --git a/plane-src/apps/web/core/components/issues/attachment/attachment-upload.tsx b/plane-src/apps/web/core/components/issues/attachment/attachment-upload.tsx
index 82a76cc..2b89fcb 100644
--- a/plane-src/apps/web/core/components/issues/attachment/attachment-upload.tsx
+++ b/plane-src/apps/web/core/components/issues/attachment/attachment-upload.tsx
@@ -27,7 +27,7 @@ export const IssueAttachmentUpload = observer(function IssueAttachmentUpload(pro
// states
const [isLoading, setIsLoading] = useState(false);
// file size
- const { maxFileSize } = useFileSize();
+ const { fileSizeLimitEnabled, maxFileSize } = useFileSize();
const onDrop = useCallback(
(acceptedFiles: File[]) => {
@@ -42,13 +42,13 @@ export const IssueAttachmentUpload = observer(function IssueAttachmentUpload(pro
const { getRootProps, getInputProps, isDragActive, isDragReject, fileRejections } = useDropzone({
onDrop,
- maxSize: maxFileSize,
+ maxSize: fileSizeLimitEnabled ? maxFileSize : undefined,
multiple: false,
disabled: isLoading || disabled,
});
const fileError =
- fileRejections.length > 0
+ fileRejections.length > 0 && fileSizeLimitEnabled
? t("attachment_upload.invalid_file_type_or_size", { size: maxFileSize / 1024 / 1024 })
: null;
diff --git a/plane-src/apps/web/core/components/issues/issue-detail-widgets/attachments/quick-action-button.tsx b/plane-src/apps/web/core/components/issues/issue-detail-widgets/attachments/quick-action-button.tsx
index 7853b3b..bcccb64 100644
--- a/plane-src/apps/web/core/components/issues/issue-detail-widgets/attachments/quick-action-button.tsx
+++ b/plane-src/apps/web/core/components/issues/issue-detail-widgets/attachments/quick-action-button.tsx
@@ -35,7 +35,7 @@ export const IssueAttachmentActionButton = observer(function IssueAttachmentActi
// store hooks
const { setLastWidgetAction, fetchActivities } = useIssueDetail(issueServiceType);
// file size
- const { maxFileSize } = useFileSize();
+ const { fileSizeLimitEnabled, maxFileSize } = useFileSize();
// operations
const { operations: attachmentOperations } = useAttachmentOperations(
workspaceSlug,
@@ -77,19 +77,21 @@ export const IssueAttachmentActionButton = observer(function IssueAttachmentActi
setToast({
type: TOAST_TYPE.ERROR,
title: "Error!",
- message:
- totalAttachedFiles > 1
- ? "Only one file can be uploaded at a time."
- : `File must be of ${maxFileSize / 1024 / 1024}MB or less in size.`,
+ message:
+ totalAttachedFiles > 1
+ ? "Only one file can be uploaded at a time."
+ : fileSizeLimitEnabled
+ ? `File must be of ${maxFileSize / 1024 / 1024}MB or less in size.`
+ : "File could not be attached. Try uploading again.",
});
return;
},
- [attachmentOperations, maxFileSize, workspaceSlug, handleFetchPropertyActivities, setLastWidgetAction]
+ [attachmentOperations, fileSizeLimitEnabled, maxFileSize, workspaceSlug, handleFetchPropertyActivities, setLastWidgetAction]
);
const { getRootProps, getInputProps } = useDropzone({
onDrop,
- maxSize: maxFileSize,
+ maxSize: fileSizeLimitEnabled ? maxFileSize : undefined,
multiple: false,
disabled: isLoading || disabled,
});
diff --git a/plane-src/apps/web/core/components/navigation/app-rail-root.tsx b/plane-src/apps/web/core/components/navigation/app-rail-root.tsx
index 009e45e..ae51746 100644
--- a/plane-src/apps/web/core/components/navigation/app-rail-root.tsx
+++ b/plane-src/apps/web/core/components/navigation/app-rail-root.tsx
@@ -6,7 +6,7 @@
"use client";
import { observer } from "mobx-react";
-import { useParams, usePathname } from "next/navigation";
+import { useParams, usePathname, useSearchParams } from "next/navigation";
import { SettingsIcon } from "lucide-react";
import { ContextMenu } from "@plane/propel/context-menu";
import { CheckIcon } from "@plane/propel/icons";
@@ -25,11 +25,17 @@ export const AppRailRoot = observer(() => {
// router
const { workspaceSlug, projectId } = useParams();
const pathname = usePathname();
+ const searchParams = useSearchParams();
// preferences
const { preferences, updateDisplayMode } = useAppRailPreferences();
const { isCollapsed, toggleAppRail } = useAppRailVisibility();
// derived values
- const isWorkspaceSettingsPath = pathname.includes(`/${workspaceSlug}/settings`) && !projectId;
+ const settingsModalSearchParams = new URLSearchParams(searchParams?.toString());
+ settingsModalSearchParams.set("workspaceSettings", "general");
+ const workspaceSettingsHref = `${pathname || `/${workspaceSlug}`}?${settingsModalSearchParams.toString()}`;
+ const isWorkspaceSettingsPath =
+ (pathname.includes(`/${workspaceSlug}/settings`) && !projectId) ||
+ searchParams?.get("workspaceSettings") === "general";
const showLabel = preferences.displayMode === "icon_with_label";
const railWidth = showLabel ? "3.75rem" : "3rem";
@@ -57,7 +63,7 @@ export const AppRailRoot = observer(() => {
item={{
label: "Settings",
icon:
+ {isLoading ? "Загрузка PDF" : `${pageCount} стр.`}
+
+
+
+ {isLoading && (
+
+
+
+ )}
+
+ {pdfDocument && (
+
+
+
+ {pageNumbers.map((pageNumber) => (
+
+ )}
+
+ {
+ const isChecked = value ?? true;
+
+ return (
+
+ );
+ }}
+ />
+
+ {storageFileSizeLimitEnabled && (
+
{isAdmin && (
+
+
+ Хранилище
++ Управляет ограничением веса файлов для вложений в задачах этого workspace. +
+
+
+ !storageFileSizeLimitEnabled ||
+ (Number(value) > 0 && Number.isFinite(Number(value))) ||
+ "Укажите лимит больше 0 МБ",
+ }}
+ render={({ field: { value, onChange, ref } }) => (
+ onChange(megabytesToBytes(event.target.value))}
+ ref={ref}
+ hasError={Boolean(errors.storage_file_size_limit)}
+ placeholder="Например, 25"
+ className="nodedc-settings-input w-full"
+ disabled={!isAdmin}
+ />
+ )}
+ />
+ {errors.storage_file_size_limit && (
+
+ )}
+ Максимальный размер файла, МБ
++ {errors.storage_file_size_limit.message} +
+ )} +