Needless UI

Mga component

Dropzone

Mag-drop o pumili ng mga file, may pagsusuri, preview at pag-upload na may progress.

Import

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

NuiDropzone

Isang lugar para mag-drop ng mga file, o pumili ng mga ito.

Selector
nui-dropzone
PangalanUriDefaultPaglalarawan
filesTwo-wayFile[][]Ang mga file na hawak nito, ayon sa pagkakasunod.
acceptInputstringAng mga uri ng file na tatanggapin, gaya sa <input type="file">.
multipleInputbooleantrueHigit sa isang file nang sabay.
directoryInputbooleanfalseNag-aalok ng button para pumili ng folder.
maxFilesInputnumberInfinityIlang file ang kaya nitong hawakan.
maxSize, minSizeInputnumber (bytes)Ang pinakamalaki at pinakamaliit na file, sa byte.
validateInput(file: File) => string | nullSinusuri ang bawat file. Tinatanggihan ito kapag may ibinalik na mensahe.
uploadInputNuiUploader<R>Nagpapadala ng file. Kapag wala ito, hinahawakan lang ang mga file.
concurrencyInputnumber3Ilang file ang sabay-sabay na ina-upload.
hintInputstringIsang linya sa ilalim ng text ng zone, gaya ng kung ano ang tinatanggap nito.
disabledInputbooleanfalseWala itong tinatanggap na file.
labelsInputPartial<NuiDropzoneLabels>Bawat text na ipinapakita o ina-announce nito, para maisalin.
uploadedOutputNuiUpload<R>Inilalabas ang file na na-upload, kasama ang ibinalik ng upload.
rejectedOutput{ file, reason }[]Inilalabas ang mga file na tinanggihan, kasama ang mga dahilan.
queuePropertyNuiUploadQueue<R>Ang upload queue, para mag-cancel, mag-retry at magbasa ng progress mula sa code.
takeMethod(files: Iterable<File>) => voidNagdadagdag ng mga file mula sa code, at sinusuri ang bawat isa.

NuiUploader

Nagpapadala ng isang file: iniuulat nito ang progress mula 0 hanggang 1, at humihinto kapag na-abort ang signal.

PangalanUriDefaultPaglalarawan
(file, context)Method(file: File, { signal, progress }) => Promise<R>Nagbabalik ng promise ng kung anuman ang isagot ng server mo.