FileUploadは、ドラッグアンドドロップサポート、複数ファイルのアップロード、自動アップロード、進捗状況の追跡、および検証を備えた高度なアップローダーです。
import FileUpload from 'primevue/fileupload';
FileUploadの基本モードは、デフォルトの高度なモードの代替として、よりシンプルなUIを提供します。
<FileUpload ref="fileupload" mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
<Button label="Upload" @click="upload" severity="secondary" />
auto プロパティが有効な場合、ファイルは選択後すぐにアップロードされます。
<FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" />
FileUploadは、ドラッグアンドドロップサポート、複数ファイルのアップロード、自動アップロード、進捗状況の追跡、および検証を備えた高度なアップローダーです。
<FileUpload name="demo[]" url="/api/upload" @upload="onAdvancedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000">
<template #empty>
<span>Drag and drop files to here to upload.</span>
</template>
</FileUpload>
アップローダーUIは、テンプレートを使用してカスタマイズできます。
ここにファイルをドラッグアンドドロップしてアップロードします。
<FileUpload name="demo[]" url="/api/upload" @upload="onTemplatedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000" @select="onSelectedFiles">
<template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
<div class="flex flex-wrap justify-between items-center flex-1 gap-4">
<div class="flex gap-2">
<Button @click="chooseCallback()" icon="pi pi-images" rounded outlined severity="secondary"></Button>
<Button @click="uploadEvent(uploadCallback)" icon="pi pi-cloud-upload" rounded outlined severity="success" :disabled="!files || files.length === 0"></Button>
<Button @click="clearCallback()" icon="pi pi-times" rounded outlined severity="danger" :disabled="!files || files.length === 0"></Button>
</div>
<ProgressBar :value="totalSizePercent" :showValue="false" class="md:w-20rem h-1 w-full md:ml-auto">
<span class="whitespace-nowrap">{{ totalSize }}B / 1Mb</span>
</ProgressBar>
</div>
</template>
<template #content="{ files, uploadedFiles, removeUploadedFileCallback, removeFileCallback }">
<div class="flex flex-col gap-8 pt-4">
<div v-if="files.length > 0">
<h5>Pending</h5>
<div class="flex flex-wrap gap-4">
<div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="p-8 rounded-border flex flex-col border border-surface items-center gap-4">
<div>
<img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
</div>
<span class="font-semibold text-ellipsis max-w-60 whitespace-nowrap overflow-hidden">{{ file.name }}</span>
<div>{{ formatSize(file.size) }}</div>
<Badge value="Pending" severity="warn" />
<Button icon="pi pi-times" @click="onRemoveTemplatingFile(file, removeFileCallback, index)" outlined rounded severity="danger" />
</div>
</div>
</div>
<div v-if="uploadedFiles.length > 0">
<h5>Completed</h5>
<div class="flex flex-wrap gap-4">
<div v-for="(file, index) of uploadedFiles" :key="file.name + file.type + file.size" class="p-8 rounded-border flex flex-col border border-surface items-center gap-4">
<div>
<img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
</div>
<span class="font-semibold text-ellipsis max-w-60 whitespace-nowrap overflow-hidden">{{ file.name }}</span>
<div>{{ formatSize(file.size) }}</div>
<Badge value="Completed" class="mt-4" severity="success" />
<Button icon="pi pi-times" @click="removeUploadedFileCallback(index)" outlined rounded severity="danger" />
</div>
</div>
</div>
</div>
</template>
<template #empty>
<div class="flex items-center justify-center flex-col">
<i class="pi pi-cloud-upload !border-2 !rounded-full !p-8 !text-4xl !text-muted-color" />
<p class="mt-6 mb-0">Drag and drop files to here to upload.</p>
</div>
</template>
</FileUpload>
customUpload プロパティを有効にすることで、アップロードの実装をオーバーライドできます。このサンプルでは、クライアント側で画像をグレースケールフィルターで表示します。
<FileUpload mode="basic" @select="onFileSelect" customUpload auto severity="secondary" class="p-button-outlined" />
<img v-if="src" :src="src" alt="Image" class="shadow-md rounded-xl w-full sm:w-64" style="filter: grayscale(100%)" />
FileUploadは、スクリーンリーダー用にtype="file"の非表示のネイティブinput要素を使用します。
アップローダーのインタラクティブ要素はボタンです。詳細については、ボタンのアクセシビリティセクションを参照してください。