Appearance

UploadBackdrop Component ​

File Information ​

  • Path: app/components/asset/UploadBackdrop.vue
  • Purpose: Full-screen drag-and-drop overlay that intercepts files/folders dragged anywhere onto a DAM page and hands them off to the upload flow.

Overview ​

UploadBackdrop is mounted once inside the collage-layout wrapper so it covers the entire DAM shell. It listens for native dragenter, dragover, dragleave, and drop events on document, uses a counter to track nested elements (preventing flicker when crossing child boundaries), and shows the drop zone only when isDropping is true.

When files are dropped:

  1. The component calls DropHandler from utils/file-hierarchy to traverse the DataTransfer's FileSystemEntry tree, resolving both flat files and nested folder structures.
  2. It checks permissions (canUploadContent, canCreateFolders), storage limits (5 GB), and folder-creation access.
  3. If the current route is a folder detail page it creates any missing subfolders, then queues the files via useUploadCommon.
  4. Files dropped outside a folder context go to the root.

Version upload mode (isVersionUpload: true) restricts the drop zone to a single file and omits the folder-upload hint.

Props ​

PropTypeDefaultDescription
isDroppingBooleanfalseControls overlay visibility; bind with v-model:isDropping
isVersionUploadBooleanfalseRestricts to a single file; hides folder drop text

Events ​

EventPayloadWhen
update:isDroppingbooleanDrag enters or leaves the window
uploadDragEventFiles have been resolved and upload is about to begin

Drag Counter ​

The component tracks drag entry/exit with dragCounter (increments on dragenter, decrements on dragleave). This is the standard fix for the browser bug where crossing a child element fires dragleave on the parent before the next dragenter, which would otherwise flicker the overlay.

Usage ​

vue
<!-- Inside collage-layout.vue -->
<UploadBackdrop v-model:isDropping="isDragging" />