ドロップゾーンの API

インポート

import-dropzone.ts

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

NuiDropzone

ファイルをドロップしたり選んだりする場所。

セレクター: nui-dropzone

NuiDropzone: プロパティ
名前	型	デフォルト	説明
`files`双方向	`File[]`	`[]`	保持しているファイル。順番に並びます。
`accept`入力	`string`		受け付けるファイルの種類。`<input type="file">` と同じ形式です。
`multiple`入力	`boolean`	`true`	一度に複数のファイルを受け付けます。
`directory`入力	`boolean`	`false`	フォルダーを選ぶボタンを表示します。
`maxFiles`入力	`number`	`Infinity`	保持できるファイルの数。
`maxSize, minSize`入力	`number (bytes)`		ファイルの最大サイズと最小サイズ（バイト単位）。
`validate`入力	`(file: File) => string \| null`		各ファイルをチェックします。メッセージを返すと、そのファイルは受け付けられません。
`upload`入力	`NuiUploader<R>`		ファイルを送信します。指定しない場合、ファイルは保持されるだけです。
`concurrency`入力	`number`	`3`	同時にアップロードするファイルの数。
`hint`入力	`string`		ゾーンのテキストの下に表示する1行。受け付けるファイルの説明などに使います。
`disabled`入力	`boolean`	`false`	ファイルを受け付けなくします。
`labels`入力	`Partial<NuiDropzoneLabels>`		表示または読み上げるすべてのテキスト。翻訳に使います。
`uploaded`出力	`NuiUpload<R>`		アップロードされたファイルを、`upload` の戻り値とともに出力します。
`rejected`出力	`{ file, reason }[]`		受け付けられなかったファイルを、その理由とともに出力します。
`queue`プロパティ	`NuiUploadQueue<R>`		アップロードキュー。コードからキャンセル、再試行、進捗の読み取りができます。
`take`メソッド	`(files: Iterable<File>) => void`		コードからファイルを追加します。各ファイルはチェックされます。

NuiUploader

1つのファイルを送信する関数。進捗を 0 から 1 で報告し、シグナルが中断されたら停止します。

NuiUploader: プロパティ
名前	型	デフォルト	説明
`(file, context)`メソッド	`(file: File, { signal, progress }) => Promise<R>`		サーバーの応答内容を値とする Promise を返します。