Skip to content

Video files with uppercase .MP4 extension fail to load in Media Library (400 Bad Request) #1033

@anton-abyzov

Description

@anton-abyzov

Bug Description

Video files with uppercase file extensions (e.g., .MP4, .Mp4) fail to load in the Media Library and cause 400 Bad Request errors when trying to display them. This particularly affects AI-generated videos from tools like OpenAI Sora, Runway ML, and other video generation platforms that commonly output files with uppercase extensions.

Error Details

Console Error:

Failed to load resource: the server responded with a status of 400 (Bad Request)
Request URL: http://localhost:5000/_next/image?url=http%3A%2F%2Flocalhost%3A5000%2Fuploads%2F2025%2F10%2F20%2F586557621bfbafe41ffdc391026a5ebe2.MP4&w=256&q=75

Error Message:

The requested resource isn't a valid image.

Root Cause

The application attempts to process .MP4 video files through Next.js's Image component (which only handles image formats) instead of using video players. This happens because video file detection is case-sensitive:

// Current code - only matches lowercase
media.path.indexOf('mp4') > -1

This check fails for:

  • .MP4 (uppercase)
  • .Mp4 (mixed case)
  • .mP4 (other variations)

Steps to Reproduce

  1. Generate or download a video file with uppercase .MP4 extension (e.g., from OpenAI Sora)
  2. Navigate to /launches and click "Create Post"
  3. Click "Insert Media" to open Media Library
  4. Upload the .MP4 file
  5. Observe the video thumbnail fails to load with 400 error in console

Expected Behavior

  • Video files should be detected regardless of extension case (.mp4, .MP4, .Mp4)
  • Videos should render using video players (not Next.js Image component)
  • Media Library should display video thumbnails correctly

Actual Behavior

  • Videos with uppercase extensions are treated as images
  • Next.js Image component rejects them with 400 Bad Request
  • Media Library shows broken/failed thumbnails
  • Cannot preview or use these videos in posts

Environment

  • Browser: Chrome, Firefox, Safari (all affected)
  • Platform: macOS, Windows, Linux (all affected)
  • Postiz Version: Latest (main branch)
  • Video Source: OpenAI Sora, Runway ML, or any tool generating .MP4 files

Impact

  • Severity: Medium-High
  • Frequency: Affects all AI-generated videos with uppercase extensions
  • Workaround: Manually rename files to lowercase .mp4 before uploading

Affected Components

  • Media Library (/launches page)
  • Video upload and preview functionality
  • All social media provider integrations (X, LinkedIn, Instagram, etc.)
  • Backend media processing

Screenshots

Image

Related

This issue is particularly important as AI video generation tools (Sora, Runway, Pika, etc.) are becoming more popular, and they commonly output files with uppercase extensions.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions