Documentation

Documentation / @zerotal/flow / index / FileUploads

Function: FileUploads()

FileUploads<TBase>(Base): {(...args): WithUploads; prototype: WithUploads<any>; } & TBase

Defined in: flow/src/uploads/FileUploads.ts:72

Component mixin that adds server-side file-upload management — flow's equivalent of Livewire's WithFileUploads trait.

Type Parameters

TBase

TBase extends AbstractComponentCtor

The (abstract) Component constructor being extended.

Parameters

Base

TBase

The component class to mix into.

Returns

{(...args): WithUploads; prototype: WithUploads<any>; } & TBase

A subclass of Base with upload-management actions.

Remarks

Uploading itself needs no mixin: a <FileUpload> / file <input flow:model> POSTs bytes to /__flow/upload (over HTTP, with live progress) and then $sets a signed reference that the base Component resolves into a TemporaryUploadedFile. This mixin adds the ergonomic action for managing those pending uploads — chiefly WithUploads.removeUpload | removeUpload, for clearing a chosen file before it's stored — without bloating the base class. Bind a single property to accept one file, or an array (with multiple on <FileUpload>) to accept several.

Example

class Avatar extends ComponentWith(FileUploads) {
  @expose photo: TemporaryUploadedFile | null = null;
  @expose path = "";

  @expose async save() {
    this.path = (await this.photo?.store("avatars")) ?? this.path;
    this.photo = null;
  }

  async render() {
    return (
      <div>
        <FileUpload bind={this.photo} accept="image/*" />
        <button onClick={() => this.removeUpload("photo")}>Remove</button>
        <button onClick={this.save}>Save</button>
      </div>
    );
  }
}