ファイルアップロード

FileUploadは、ドラッグアンドドロップサポート、複数ファイルアップロード、自動アップロード、進捗状況トラッキング、バリデーションを備えた高度なアップローダーです。

インポート#


import { FileUpload } from 'primereact/fileupload';

基本#

FileUploadの基本モードは、デフォルトの高度なモードの代替として、よりシンプルなUIを提供します。

選択


<Toast ref={toast}></Toast>
<FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" maxFileSize={1000000} onUpload={onUpload} />

自動#

autoプロパティが有効になっている場合、ファイルは選択後すぐにアップロードされます。

参照


<Toast ref={toast}></Toast>
<FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" maxFileSize={1000000} onUpload={onUpload} auto chooseLabel="Browse" />

高度#

選択

ファイルをここにドラッグアンドドロップしてアップロードします。


<FileUpload name="demo[]" url={'/api/upload'} multiple accept="image/*" maxFileSize={1000000} emptyTemplate={<p className="m-0">Drag and drop files to here to upload.</p>} />

テンプレート#

アップローダーUIは、テンプレートを使用してカスタマイズできます。

0 B/ 1 MB

ここに画像をドラッグアンドドロップ


<Toast ref={toast}></Toast>

<Tooltip target=".custom-choose-btn" content="Choose" position="bottom" />
<Tooltip target=".custom-upload-btn" content="Upload" position="bottom" />
<Tooltip target=".custom-cancel-btn" content="Clear" position="bottom" />

<FileUpload ref={fileUploadRef} name="demo[]" url="/api/upload" multiple accept="image/*" maxFileSize={1000000}
    onUpload={onTemplateUpload} onSelect={onTemplateSelect} onError={onTemplateClear} onClear={onTemplateClear}
    headerTemplate={headerTemplate} itemTemplate={itemTemplate} emptyTemplate={emptyTemplate}
    chooseOptions={chooseOptions} uploadOptions={uploadOptions} cancelOptions={cancelOptions} />

カスタムアップロード#

アップロードの実装は、customUploadプロパティとカスタムのuploadHandler関数を定義することでオーバーライドできます。

選択


<FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" customUpload uploadHandler={customBase64Uploader} />

アクセシビリティ#

スクリーンリーダー

FileUploadは、スクリーンリーダー用にtype="file"の非表示のネイティブinput要素を使用します。

キーボードサポート

アップローダーのインタラクティブな要素はボタンです。詳細はボタンのアクセシビリティセクションを参照してください。