useFileUploadItem()
Use the composable useFileUploadItem
to control the file upload of a file in a multiple file upload.
<!-- Parent component or page -->
<script lang="ts" setup>
const { files } = useMultipleFilesUpload()
<script lang="ts" setup>
<template>
<div v-for="(file, index) of files" :key="index">
<FileUploadItem :file="file" />
</div>
</template>
<!-- FileUploadItem component -->
<script lang="ts" setup>
import { FileItemRef } from '@nhost/nhost-js'
import { useFileUploadItem } from '@nhost/vue'
const { file } = defineProps<{ file: FileItemRef }>()
const { name, progress } = useFileUploadItem(file)
</script>
<template>
<div>
<span>{{ name }}</span>
<v-progress-linear v-model="progress">
{{ progress }}
</v-progress-linear>
</div>
</template>
Parameters
ref required ActorRefWithDeprecatedState<FileUploadContext, { type: “ADD”, file: File, id: string, bucketId: string, name: string } | { type: “UPLOAD”, file: File, id: string, name: string, bucketId: string } & FileUploadConfig | { type: “UPLOAD_PROGRESS”, progress: number, loaded: number, additions: number } | { type: “UPLOAD_DONE”, id: string, bucketId: string } | { type: “UPLOAD_ERROR”, error: StorageErrorPayload } | { type: “CANCEL” } | { type: “DESTROY” }, { value: any, context: FileUploadContext }, ResolveTypegenMeta<Typegen0, { type: “ADD”, file: File, id: string, bucketId: string, name: string } | { type: “UPLOAD”, file: File, id: string, name: string, bucketId: string } & FileUploadConfig | { type: “UPLOAD_PROGRESS”, progress: number, loaded: number, additions: number } | { type: “UPLOAD_DONE”, id: string, bucketId: string } | { type: “UPLOAD_ERROR”, error: StorageErrorPayload } | { type: “CANCEL” } | { type: “DESTROY” }, BaseActionObject, ServiceMap>> | Interpreter<FileUploadContext, any, { type: “ADD”, file: File, id: string, bucketId: string, name: string } | { type: “UPLOAD”, file: File, id: string, name: string, bucketId: string } & FileUploadConfig | { type: “UPLOAD_PROGRESS”, progress: number, loaded: number, additions: number } | { type: “UPLOAD_DONE”, id: string, bucketId: string } | { type: “UPLOAD_ERROR”, error: StorageErrorPayload } | { type: “CANCEL” } | { type: “DESTROY” }, { value: any, context: FileUploadContext }, ResolveTypegenMeta<Typegen0, { type: “ADD”, file: File, id: string, bucketId: string, name: string } | { type: “UPLOAD”, file: File, id: string, name: string, bucketId: string } & FileUploadConfig | { type: “UPLOAD_PROGRESS”, progress: number, loaded: number, additions: number } | { type: “UPLOAD_DONE”, id: string, bucketId: string } | { type: “UPLOAD_ERROR”, error: StorageErrorPayload } | { type: “CANCEL” } | { type: “DESTROY” }, BaseActionObject, ServiceMap>>