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>>

useFileUpload()useHasuraClaim()