Upload

Mode

Skin

Theme

Overview & How It Works

The ln-upload component is applied to a container element via data-ln-upload="URL" enclosing an <input type="file" hidden> and a drop zone ([data-ln-upload-zone]). It listens for drag-and-drop actions and native file picker changes, validates client-side file constraints (types, sizes), clones item markup from <template data-ln-template="ln-upload-item">, and uploads files asynchronously via fetch(FormData) with real-time progress tracking.

Upon successful upload, it automatically injects hidden form inputs (<input type="hidden" name="file_ids[]" value="...">) into the DOM, allowing uploaded file IDs to be submitted cleanly through standard HTML form submissions without custom JavaScript glue code.

Upload Zone

Drop files here or click to upload pdf, doc, docx, jpg, png

    Custom Item Template (Scoped Override)

    This uploader provides its own <template> inside the container.

    Drag files here — two-line layout

      SSR Hydration in Edit Forms

      Pre-rendered server attachments are hydrated on mount without wiping server IDs on new uploads or removals.

      Add more attachments or drop files here
      • financial_report_2025.pdf 1.2 MB
      • project_specifications.docx 440 KB

      API & Events

      Attributes

      Attribute Description
      data-ln-upload="URL" Upload endpoint URL.
      data-ln-upload-accept="ext,ext" Comma-separated list of allowed file extensions or MIME patterns.
      data-ln-upload-delete="URL/{id}" Delete endpoint URL pattern containing {id}.
      data-ln-upload-max-size="bytes" Maximum allowed file size in bytes.
      data-ln-upload-max-files="N" Maximum total uploaded files limit.
      data-ln-upload-file-field="name" FormData field name for the file (default: file).
      data-ln-upload-ids-field="name" Hidden inputs name (default: file_ids[]).

      JS API (available on the container element)

      const container = document.querySelector('[data-ln-upload]');
container.lnUpload.getFileIds();   // ['42', '43']
container.lnUpload.getFiles();     // [{ serverId: '42', name: 'doc.pdf', size: 120000 }, ...]
container.lnUpload.upload(files);  // Programmatic file upload
container.lnUpload.remove(id);     // Remove by localId or serverId
container.lnUpload.clear();        // Clear all files
container.lnUpload.destroy();      // Teardown and cleanup

      Custom Events

      Event Type Detail
      ln-upload:request-upload Inbound Command { files: FileList | File[] }
      ln-upload:request-remove Inbound Command { localId?, serverId? }
      ln-upload:request-clear Inbound Command {}
      ln-upload:before-upload Cancelable Lifecycle { file }
      ln-upload:before-remove Cancelable Lifecycle { localId, serverId }
      ln-upload:before-clear Cancelable Lifecycle {}
      ln-upload:uploaded Notification { localId, serverId, name, size, response }
      ln-upload:progress Notification { localId, file, percent, loaded, total }
      ln-upload:removed Notification { localId, serverId }
      ln-upload:error Notification { file, message, status, error }
      ln-upload:invalid Notification { file, reason }
      ln-upload:cleared Notification {}