Drag & Drop Upload + File Previews for AI Bot Conversations page

Customization Theme component
,
1
:information_source: Summary Drag & Drop Upload + File Previews for AI Bot Conversations page
:hammer_and_wrench: Repository GitHub - VaperinaDEV/drag-drop-upload-file-previews-ai-bot-page: Drag & Drop Upload + File Previews for AI Bot Conversations page · GitHub
:question: Install Guide How to install a theme or theme component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

Hello :waving_hand:

Uploading a file to the AI bot conversation page input only works through the upload button, and once a file is attached, all you see is its filename in a plain text row, no preview, no visual indication of what you actually attached.

What this component adds

  • Drag & drop anywhere in the conversation panel — not just onto the textarea, the whole panel is a drop zone with a highlighted state while dragging.
  • Real image thumbnails for image uploads, generated client-side, shown with the filename instead of just text.
  • Color-coded extension badges for non-image files (PDF, DOCX, XLSX, ZIP, MP3, code files, etc.) so the upload list is visually scannable even for file types that can’t have a real preview.
  • Configurable via theme settings, a default_badge_color fallback color, and an extension_colors objects-schema setting so admins can add/override colors per extension straight from the theme settings UI, no code editing needed.

Settings

Setting Description
default_badge_color Fallback hex color for extensions with no explicit color set
extension_colors Objects-schema list of { extension, color } rows to override/extend the built-in category colors

Built-in categories already cover most common file types out of the box (documents, spreadsheets, presentations, archives, audio, video, code, fonts, e-books), so most people won’t need to touch extension_colors at all.

1 Like