Needless UI

Components

Dropzone

Drop files or choose them, with checks, previews and uploads with progress.

Import

import-dropzone.ts
import { NuiDropzone, type NuiUploader } from '@needless-ui/angular/dropzone';

NuiDropzone

A place to drop files, or choose them.

Selector
nui-dropzone
NameTypeDefaultDescription
filesTwo-wayFile[][]The files it holds, in order.
acceptInputstringThe kinds of file it takes, as for <input type="file">.
multipleInputbooleantrueMore than one file at a time.
directoryInputbooleanfalseOffers a button to choose a folder.
maxFilesInputnumberInfinityHow many files it holds.
maxSize, minSizeInputnumber (bytes)The largest and smallest file, in bytes.
validateInput(file: File) => string | nullChecks each file. A message turns it away.
uploadInputNuiUploader<R>Sends a file. Without it, files are only held.
concurrencyInputnumber3How many files upload at once.
hintInputstringA line under the zone’s text, such as what it takes.
disabledInputbooleanfalseIt takes no files.
labelsInputPartial<NuiDropzoneLabels>Every text it shows or announces, to translate.
uploadedOutputNuiUpload<R>Emits a file uploaded, with what upload returned.
rejectedOutput{ file, reason }[]Emits the files turned away, with the reasons.
queuePropertyNuiUploadQueue<R>The upload queue, to cancel, retry and read progress from code.
takeMethod(files: Iterable<File>) => voidAdds files from code, checking each one.

NuiUploader

Sends one file: it reports progress from 0 to 1, and stops when the signal aborts.

NameTypeDefaultDescription
(file, context)Method(file: File, { signal, progress }) => Promise<R>Returns a promise of whatever your server answers.