# `PhiaUi.Components.FullscreenDrop`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/inputs/fullscreen_drop.ex#L1)

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"
    />

# `fullscreen_drop`

Renders a full-viewport drag-and-drop overlay.

Place this component once at the root of your LiveView template. It is
invisible by default and activates via the `PhiaFullscreenDrop` JS hook
when the user drags files over the browser window.

## Example

    <.fullscreen_drop upload={@uploads.files} label="Drop files to upload" />

## Attributes

* `upload` (`:any`) (required) - A `Phoenix.LiveView.UploadConfig` struct from `@uploads.field_name`.
* `label` (`:string`) - Main instruction text rendered inside the overlay. Defaults to `"Drop files to upload"`.
* `description` (`:string`) - Optional secondary text (accepted formats, size limits) below the label. Defaults to `nil`.
* `class` (`:string`) - Additional CSS classes applied to the overlay wrapper. Defaults to `nil`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*