Full-viewport drop overlay that appears when the user drags files over the browser window.

Provides fullscreen_drop/1 — an absolutely-positioned overlay that covers the entire viewport with a highlighted dashed border and a drop instruction. The overlay activates when a user drags a file over the browser window and deactivates when the drag leaves or a file is dropped.

The overlay is wired to Phoenix LiveView's phx-drop-target so dropped files are processed by the LiveView upload system.

JS Hook

This component requires the PhiaFullscreenDrop JS hook to be registered in your application. Copy priv/templates/js/hooks/fullscreen_drop.js to your assets/js/hooks/ directory and register it:

// app.js
import { PhiaFullscreenDrop } from "./hooks/fullscreen_drop"
let liveSocket = new LiveSocket("/live", Socket, {
  hooks: { PhiaFullscreenDrop, ...otherHooks }
})

The hook listens to dragenter / dragleave / drop events on the document to toggle the overlay's visibility via data-active attribute, which is targeted by CSS classes.

Requirements

The parent LiveView must configure the upload with allow_upload/3:

def mount(_params, _session, socket) do
  {:ok, allow_upload(socket, :files, accept: :any, max_entries: 20)}
end

Basic usage

<%!-- Place near the top of your root layout --%>
<.fullscreen_drop
  upload={@uploads.files}
  label="Drop files anywhere to upload"
/>

With custom label and icon

<.fullscreen_drop
  upload={@uploads.attachments}
  label="Release to attach files"
  description="Supported: PDF, DOCX, PNG, JPG up to 50 MB"
/>