Needless UI

Komponen

Area unggah

Seret dan lepas atau pilih file, dengan validasi, pratinjau, dan unggahan beserta progresnya.

Impor

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

NuiDropzone

Tempat untuk menyeret dan melepas file, atau memilihnya.

Selektor
nui-dropzone
NamaTipeDefaultDeskripsi
filesDua arahFile[][]File yang disimpannya, sesuai urutan.
acceptInputstringJenis file yang diterima, seperti pada <input type="file">.
multipleInputbooleantrueLebih dari satu file sekaligus.
directoryInputbooleanfalseMenawarkan tombol untuk memilih folder.
maxFilesInputnumberInfinityJumlah file yang bisa disimpannya.
maxSize, minSizeInputnumber (bytes)Ukuran file terbesar dan terkecil, dalam byte.
validateInput(file: File) => string | nullMemeriksa setiap file. Jika mengembalikan pesan, file ditolak.
uploadInputNuiUploader<R>Mengirim file. Tanpanya, file hanya disimpan.
concurrencyInputnumber3Jumlah file yang diunggah sekaligus.
hintInputstringSatu baris di bawah teks area, misalnya jenis file yang diterimanya.
disabledInputbooleanfalseTidak menerima file.
labelsInputPartial<NuiDropzoneLabels>Semua teks yang ditampilkan atau diumumkannya, untuk diterjemahkan.
uploadedOutputNuiUpload<R>Mengirimkan file yang terunggah, beserta nilai yang dikembalikan upload.
rejectedOutput{ file, reason }[]Mengirimkan file yang ditolak, beserta alasannya.
queuePropertiNuiUploadQueue<R>Antrean unggahan, untuk membatalkan, mencoba ulang, dan membaca progres dari kode.
takeMetode(files: Iterable<File>) => voidMenambahkan file dari kode, sambil memeriksa masing-masing.

NuiUploader

Mengirim satu file: melaporkan progres dari 0 sampai 1, dan berhenti saat signal dibatalkan.

NamaTipeDefaultDeskripsi
(file, context)Metode(file: File, { signal, progress }) => Promise<R>Mengembalikan promise berisi apa pun jawaban server Anda.