# `PhoenixKitPhotos.Components.PhotoUploader`
[🔗](https://github.com/BeamLabEU/phoenix_kit_photos/blob/v0.3.0/lib/phoenix_kit_photos/components/photo_uploader.ex#L1)

Adds photos and videos to one library: a floating **+** button, a panel with the
queue, and the whole page as a place to drop files or folders.

## Usage

    <.live_component
      module={PhoenixKitPhotos.Components.PhotoUploader}
      id="uploader"
      library_uuid={library_uuid}
      auth={scope}
    />

`auth` is the current `PhoenixKit.Users.Auth.Scope`. The component shows nothing at
all to someone who may not add to the library (`PhoenixKitPhotos.Uploads.can_upload?/2`:
a user library's owner, managers and contributors; for Media, the admins and holders
of `media`), and checks again before it stores anything.

## What it does

  * **Pick or drop.** The **+** button opens a panel with *Choose files*; dropping files
    or a whole folder anywhere on the page adds them (a folder's sidecars and system
    litter are left out, and said so). A drop of thousands is fed to the upload by the
    `PhotoUploader` hook in a sliding window: at most as many files in flight as the
    panel's "Uploads at once" control says (`Uploads.max_concurrent_uploads/0` unless
    the person changed it), never more than one batch (`Uploads.max_entries/0`).
  * **Straight in.** In a private library files start uploading as soon as they are
    chosen. In a **public** library (`Libraries.public?/1`: anyone can see what is
    in it) they wait for *Upload*, with the warning in front of them.
  * **Progress, per file**, and what became of each: added, already there, in
    another of your libraries, or why not. A file is checked for duplicates by its
    bytes and its renditions are made in the background; the timeline shows it when
    they are ready (`PhoenixKitPhotos.LiveUpdates`).

Memory: the browser sends the file in chunks that LiveView writes to disk, and the file
is hashed and stored from disk, so a video costs what a thumbnail does.

## Options

  * `:on_stored` — an atom. When set, the parent LiveView gets
    `{on_stored, component_id, {:added | :duplicate | :elsewhere, file} | {:error, reason}}`
    for each finished file; it must have a clause for it. Unset, nothing is sent.

Requires the `PhotoUploader` hook, which ships in this package's JS bundle.

---

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