檔案拖放區 API · Needless UI

匯入

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`		顯示在拖放區文字下方的一行說明，例如可接收哪些檔案。
`disabled`輸入	`boolean`	`false`	不接收任何檔案。
`labels`輸入	`Partial<NuiDropzoneLabels>`		它顯示或朗讀的所有文字，供翻譯使用。
`uploaded`輸出	`NuiUpload<R>`		發出上傳完成的檔案，以及 `upload` 傳回的結果。
`rejected`輸出	`{ file, reason }[]`		發出被拒絕的檔案及其原因。
`queue`屬性	`NuiUploadQueue<R>`		上傳佇列，可從程式碼取消、重試及讀取進度。
`take`方法	`(files: Iterable<File>) => void`		從程式碼加入檔案，並逐一檢查。

NuiUploader

傳送一個檔案：以 0 到 1 回報進度，並在收到中止訊號時停止。

NuiUploader: 屬性
名稱	型別	預設值	說明
`(file, context)`方法	`(file: File, { signal, progress }) => Promise<R>`		傳回一個 Promise，其結果為伺服器回應的任何內容。