feat: configurable upload file size limits via .env (#695)

* feat: make upload file size limits configurable via .env Add UPLOAD_MAX_*_MB environment variables for documents, images, videos, exercise assignment files, AI assistant documents, landing page images, and media thumbnails. API presign routes validate file size server-side; dashboard UI reads the same limits from layout data. * chore: wire upload limit env vars through Docker compose and docs Pass UPLOAD_MAX_*_MB from the root .env into api and dashboard containers in both compose files, document them in .env.example and self-hosting guides. Co-authored-by: Rotimi Best <[email protected]> * docs: cross-link upload limits in README, Railway, Coolify, and Cloudflare guides Co-authored-by: Rotimi Best <[email protected]> * fix: address PR review feedback on upload limits - Restore 5 MB default for thumbnail uploads (edit-asset-dialog regression) - Add getResolvedUploadLimits() fallback for Storybook/tests - Cache core getUploadLimits() like the dashboard helper - Document presign fileSize as advisory; allow zero-byte fileSize in schema - Only send fileSize to presign when greater than zero * docs: remove upload limits from Cloudflare setup guide ---------
2026-06-29 12:48:51 +01:00
parent 65420320e7
commit a61942feb9
39 changed files with 411 additions and 79 deletions
@@ -15,11 +15,11 @@ export class PresignApi extends BaseApiWithErrors {
   * Gets a presigned upload URL for a document.
   * @returns { url, fileKey } on success
   */
-  async getDocumentUploadUrl(fileName: string, fileType: string) {
+  async getDocumentUploadUrl(fileName: string, fileType: string, fileSize?: number) {
    const result = await this.execute<DocumentUploadPresignRequest>({
      requestFn: () =>
        classroomio.course.presign.document.upload.$post({
-          json: { fileName, fileType }
+          json: { fileName, fileType, ...(fileSize != null && fileSize > 0 ? { fileSize } : {}) }
        }),
      logContext: 'getting document upload URL'
    });
@@ -47,11 +47,11 @@ export class PresignApi extends BaseApiWithErrors {
   * Gets a presigned upload URL for a video.
   * @returns { url, fileKey } on success
   */
-  async getVideoUploadUrl(fileName: string, fileType: string) {
+  async getVideoUploadUrl(fileName: string, fileType: string, fileSize?: number) {
    const result = await this.execute<VideoUploadPresignRequest>({
      requestFn: () =>
        classroomio.course.presign.video.upload.$post({
-          json: { fileName, fileType }
+          json: { fileName, fileType, ...(fileSize != null && fileSize > 0 ? { fileSize } : {}) }
        }),
      logContext: 'getting video upload URL'
    });
@@ -44,8 +44,11 @@
  import SectionEditor from './section-editor.svelte';
  import type { Question } from '$features/course/types';
  import type { ExerciseEditorErrors } from './store';
+  import { getResolvedUploadLimits } from '$lib/utils/config/upload-limits-context';

  const flipDurationMs = 200;
+  const uploadLimits = getResolvedUploadLimits();
+  const platformMaxFileSizeMb = uploadLimits.exerciseFileMb;
  const initialQuestionsLength = $questionnaire.questions.length;
  type QuestionDndEvent = CustomEvent<{ items: Question[] }>;

@@ -390,6 +393,7 @@
          mode: 'edit',
          question: toExerciseQuestionModel(question),
          labels: questionLabels,
+          platformMaxFileSizeMb,
          onImageUpload: uploadImage
        }}
        onQuestionChange={(nextQuestion) => onSharedQuestionChange(question.id, nextQuestion)}
@@ -54,6 +54,7 @@
  import ChevronLeftIcon from '@lucide/svelte/icons/chevron-left';
  import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
  import type { Question } from '$features/course/types';
+  import { getResolvedUploadLimits } from '$lib/utils/config/upload-limits-context';

  interface Props {
    preview?: boolean;
@@ -65,6 +66,9 @@

  let { preview = false, exerciseId = '', isFetchingExercise = false, mySubmissions = [] }: Props = $props();

+  const uploadLimits = getResolvedUploadLimits();
+  const platformMaxFileSizeMb = uploadLimits.exerciseFileMb;
+
  let isSubmitting = $state(false);
  /** When true, do not re-apply a past submission over a fresh take (Try again). */
  let skipHydrateFromSubmissions = $state(false);
@@ -305,7 +309,8 @@
      file.type as
        | 'application/pdf'
        | 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
-        | 'application/msword'
+        | 'application/msword',
+      file.size > 0 ? file.size : undefined
    );
    if (!uploadResult) {
      throw new Error('Failed to get upload URL');
@@ -946,6 +951,7 @@
            answer: $questionnaireMetaData.answers[sectionQuestionKey],
            labels: questionLabels,
            disabled: isSubmitting,
+            platformMaxFileSizeMb,
            onFileUpload: handleFileUpload,
            onVideoRecordingUpload: handleVideoRecordingUpload
          }}
@@ -1002,6 +1008,7 @@
                  answer: sharedCurrentAnswer,
                  labels: questionLabels,
                  disabled: isSubmitting,
+                  platformMaxFileSizeMb,
                  onFileUpload: handleFileUpload,
                  onVideoRecordingUpload: handleVideoRecordingUpload
                }}
@@ -14,6 +14,7 @@
  import * as Dialog from '@cio/ui/base/dialog';
  import * as FileDropZone from '@cio/ui/custom/file-drop-zone';
  import type { FileRejectedReason } from '@cio/ui/custom/file-drop-zone';
+  import { getResolvedUploadLimits } from '$lib/utils/config/upload-limits-context';

  interface Props {
    lessonId?: string;
@@ -34,7 +35,8 @@
    'application/msword'
  ];

-  const MAX_DOCUMENT_SIZE = 5 * 1024 * 1024; // 5MB
+  const uploadLimits = getResolvedUploadLimits();
+  const maxDocumentSize = uploadLimits.documentBytes;

  const documentUploader = new DocumentUploader();

@@ -58,9 +60,9 @@
      return $t('course.navItem.lessons.materials.tabs.document.file_type_error');
    }

-    if (file.size > MAX_DOCUMENT_SIZE) {
+    if (file.size > maxDocumentSize) {
      return $t('course.navItem.lessons.materials.tabs.document.file_size_error', {
-        size: formatFileSize(MAX_DOCUMENT_SIZE)
+        size: formatFileSize(maxDocumentSize)
      });
    }

@@ -87,7 +89,7 @@
    if (opts.reason === 'Maximum file size exceeded') {
      snackbar.error(
        $t('course.navItem.lessons.materials.tabs.document.file_size_error', {
-          size: formatFileSize(MAX_DOCUMENT_SIZE)
+          size: formatFileSize(maxDocumentSize)
        })
      );
    } else if (opts.reason === 'File type not allowed') {
@@ -259,7 +261,7 @@
            accept=".pdf,.docx,.doc,application/pdf,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/msword"
            maxFiles={1}
            fileCount={0}
-            maxFileSize={MAX_DOCUMENT_SIZE}
+            maxFileSize={maxDocumentSize}
            onUpload={handleFilesUpload}
            onFileRejected={handleFileRejected}
          >
@@ -14,6 +14,7 @@
  import { mediaApi } from '$features/media/api';
  import { JobPoller, jobsApi, type MediaJobEnvelope } from '$features/jobs';
  import { onDestroy } from 'svelte';
+  import { getResolvedUploadLimits } from '$lib/utils/config/upload-limits-context';

  const ADD_VIDEO = 'course.navItem.lessons.materials.tabs.video.add_video';
  const PROCESSING_BASE = `${ADD_VIDEO}.processing`;
@@ -50,6 +51,9 @@

  const isDisabled = $derived($lessonVideoUpload.isUploading || $isFreePlan);

+  const uploadLimits = getResolvedUploadLimits();
+  const maxVideoSize = uploadLimits.videoBytes;
+
  const videoUploader = new VideoUploader();
  const mediaUploader = new MediaUploader();

@@ -401,7 +405,7 @@
        accept="video/*"
        maxFiles={1}
        fileCount={0}
-        maxFileSize={800 * FileDropZone.MEGABYTE}
+        maxFileSize={maxVideoSize}
        onUpload={handleUpload}
        {onFileRejected}
      >
@@ -12,6 +12,7 @@
  import { snackbar } from '$features/ui/snackbar/store';
  import { t } from '$lib/utils/functions/translations';
  import { uploadImage } from '$lib/utils/services/upload';
+  import { getResolvedUploadLimits } from '$lib/utils/config/upload-limits-context';

  interface Props {
    open?: boolean;
@@ -22,7 +23,8 @@

  type AssetStatusValue = 'active' | 'archived';

-  const THUMBNAIL_MAX_SIZE = 5 * FileDropZone.MEGABYTE;
+  const uploadLimits = getResolvedUploadLimits();
+  const thumbnailMaxSize = uploadLimits.thumbnailBytes;

  let { open = $bindable(false), asset = null, isSaving = false, onSave = async () => {} }: Props = $props();

@@ -126,7 +128,7 @@
              accept={FileDropZone.ACCEPT_IMAGE}
              maxFiles={1}
              fileCount={0}
-              maxFileSize={THUMBNAIL_MAX_SIZE}
+              maxFileSize={thumbnailMaxSize}
              onUpload={handleThumbnailFilesUpload}
              onFileRejected={handleThumbnailRejected}
            >
@@ -14,6 +14,7 @@
  import { t } from '$lib/utils/functions/translations';
  import { uploadImage } from '$lib/utils/services/upload';
  import { classroomio } from '$lib/utils/services/api';
+  import { getResolvedUploadLimits } from '$lib/utils/config/upload-limits-context';

  function buildHlsUrl(asset: OrganizationAsset): string | null {
    if (!asset.hlsManifestKey) return null;
@@ -32,7 +33,8 @@
    onThumbnailSaved?: (asset: OrganizationAsset) => void;
  }

-  const THUMBNAIL_MAX_SIZE = 1 * FileDropZone.MEGABYTE;
+  const uploadLimits = getResolvedUploadLimits();
+  const thumbnailMaxSize = uploadLimits.thumbnailBytes;
  const REGEN_POLL_INTERVAL_MS = 2000;
  const REGEN_POLL_TIMEOUT_MS = 60_000;
  const SLOT_KEYS = ['start', 'middle', 'end'] as const;
@@ -289,7 +291,7 @@
                accept={FileDropZone.ACCEPT_IMAGE}
                maxFiles={1}
                fileCount={0}
-                maxFileSize={THUMBNAIL_MAX_SIZE}
+                maxFileSize={thumbnailMaxSize}
                onUpload={handleCustomUpload}
                onFileRejected={handleUploadRejected}
              >
@@ -14,6 +14,7 @@
  import { InputField } from '@cio/ui/custom/input-field';
  import { Button } from '@cio/ui/base/button';
  import UploadCloudIcon from '@lucide/svelte/icons/upload-cloud';
+  import { getResolvedUploadLimits } from '$lib/utils/config/upload-limits-context';

  interface Props {
    imageURL?: string;
@@ -48,7 +49,8 @@
    alt_description: string;
  }[] = $state([]);

-  const MAX_IMAGE_SIZE = 500 * 1000;
+  const uploadLimits = getResolvedUploadLimits();
+  const maxLandingImageSize = uploadLimits.landingImageBytes;

  async function handleImageClick(img: string) {
    onchange?.(img);
@@ -58,7 +60,7 @@
  }

  function handleUnsupportedFile(file: File) {
-    if (file.size > MAX_IMAGE_SIZE) {
+    if (file.size > maxLandingImageSize) {
      snackbar.error('snackbar.landing_page_settings.error.file_size');
      return;
    }
@@ -130,7 +132,7 @@
              bind:src={cropperSrc}
              onCropped={handleCropped}
              onUnsupportedFile={handleUnsupportedFile}
-              maxFileSize={MAX_IMAGE_SIZE}
+              maxFileSize={maxLandingImageSize}
              accept=".jpg, .jpeg, .png, .webp"
              disabled={isUploading}
            >