Bus UI Drop Zone

Drag-and-drop upload affordances with host-owned policy.

Use the drop zone when the module wants a visible upload target, optional actions, and a node-first shell that still leaves storage and authorization policy in the host.

Public surface

Function	Props type	Import path
`DropZone`	`DropZoneProps`	`github.com/busdk/bus-ui/pkg/ui`

When to use it

Use DropZone when a module needs drag-and-drop intake, a friendly title and copy block, and the ability to keep the file picker inside the same shared surface. The public API is pkg/ui.

See also File input, Evidence and files, and Reference.

Example

Loading DropZone demo...

Go API

import (
  gx "github.com/busdk/bus-gx/pkg/gx"
  ui "github.com/busdk/bus-ui/pkg/ui"
)

node, err := ui.DropZone(ui.DropZoneProps{
  ID:        "evidence-dropzone",
  Title:     "Upload evidence",
  Copy:      "Drop PDF and image files here.",
  MaxBytes:  10 << 20,
  AcceptedTypes: []string{
    "application/pdf",
    "image/png",
  },
})
if err != nil {
  return err
}

html, err := gx.RenderHTML(node)

.gx source

In .gx source, author the visible component state as GX markup. Keep the Go API block above for the package helper or render-boundary call.

package busuiexamples

import gx "github.com/busdk/bus-gx/pkg/gx"

func DropZoneExample() gx.Node {
  return <section class="drop-zone">
  <p><Text value={"Drop receipts here"}></Text></p>
  <input name="files" type="file" multiple></input>
</section>
}