Upload & Editor

Drag-and-drop upload with validation (type, size, count — messages translated), previews and progress (list and single variants). Editor is a lightweight contenteditable rich-text editor.

Upload

Upload

Vue

<div class="thl-row">
  <div class="thl-col-12 thl-col-md-6"><ThlUpload multiple :max-size="2 * 1024 * 1024" accept="image/*" :request="fakeRequest" /></div>
  <div class="thl-col-12 thl-col-md-6"><ThlUpload variant="single" /></div>
</div>

React

<Upload multiple maxSize={2 * 1024 * 1024} accept="image/*"
  request={(file, onProgress) => api.upload(file, onProgress)} onChange={setFiles} />
<Upload variant="single" />

Angular

<thl-upload multiple [maxSize]="2 * 1024 * 1024" accept="image/*" [request]="upload" (filesChange)="files.set($event)" />
<thl-upload variant="single" />

Editor

Editor

Vue

<div><ThlEditor v-model="html" :min-height="140" /><pre style="font-size:12px;margin-top:8px;white-space:pre-wrap">{{ html }}</pre></div>

React

<Editor value={html} onChange={setHtml} minHeight={140} />

Angular

<thl-editor [(value)]="html" [minHeight]="140" />

API

Upload

<ThlUpload> · import { ThlUpload } from '@thl-ui/vue'

Prop	Type	Default
accept	string	—
maxSize	number	—
multiple	boolean	—
maxFiles	number	—
request	function	—
variant	string	"list"
hint	string	—

Events: change

Editor

<ThlEditor> · import { ThlEditor } from '@thl-ui/vue'

Prop	Type	Default
modelValue	string	""
placeholder	string	—
minHeight	number	—
ariaLabel	string	—

Events: update:modelValue