Expose onUploadProgress

[JanStevens]

Hi,

When using ky you can pass in an onUploadProgress so you can properly show progress events.

Can this be exported so it can be used?

Thanks

[Julien-R44]

Hey, onUploadProgress (and onDownloadProgress ) from ky are already available in the request options, they are part of BaseRequestOptions and get forwarded to ky at runtime. So this should already work:

tuyau.api.files.upload({
  body: { file: myFile },
  onUploadProgress: (progress) => {
    console.log(`${progress.percent * 100}%`)
  },
})

Could you clarify what you wouldlike exported that isnt currently accessible ?

[JanStevens]

Hi,

that good to know, I mainly try to do the following but then using the mutationOptions with react-query integration. I noticed I failed to mention this. This is my original hook which works

export const useUploadFile = () => {
  const mutation = useMutation({
    mutationFn: ({ file, type, onProgress, signal }: UploadFileProps) => {
      const formData = new FormData()
      formData.append('file', file)
      formData.append('type', type)

      return internalApiClient
        .post(urlFor('tenant.uploads.files.store'), {
          body: formData,
          timeout: false,
          onUploadProgress: onProgress,
          signal,
        })
        .json<Data.StorageFile>()
    },
  })

  return {
    isLoading: mutation.isPending,
    uploadFile: mutation.mutate,
    uploadFileAsync: mutation.mutateAsync,
  }
}

And then when I use the mutationOptions() the hook becomes

export const useUploadFile = () => {
  const mutation = useMutation(apiClientV2.tenant.uploads.files.store.mutationOptions())

  return {
    isLoading: mutation.isPending,
    uploadFile: mutation.mutate,
    uploadFileAsync: mutation.mutateAsync,
  }
}

The first problem is that file is typed here as a MultipartFile which does not match with a regular JS frontend File object. The second part is that I don't see how I can forward the onUploadProgress event through the mutationOptions()

Regards

[Julien-R44]

Okay that makes sense. I think the documentation is currently lacking in this area, i will improve it. But for now you can do it like this:

export const useUploadFile = ({ onUploadProgress }) => {
  return useMutation(
    apiClientV2.tenant.uploads.files.store.mutationOptions({
      tuyau: { onUploadProgress },
    })
  )
}

useUploadFile({ onUploadProgress })

Basically, all ky options can be passed through the tuyau options, both for queries and mutations

But maybe you would prefer to be able to set onUploadProgress when calling mutate() instead?

const { mutate } = useUploadFile()

function upload() {
  mutate({ ..., onUploadProgress })
}

That would make sense too. maybe we can add support for it

Also, regarding the MultiPartFile issue, thats a known bug. Will fix it asap

[JanStevens]

Ha cool thanks will try it!

[epenflow]

Hi i've been using tuyau in adonisjs + nextjs monorepo setup, and it's been great for type safety. However i'v encountered a few friction points that, if addressed would significantly improve the DX

1. Native File support in generated types
   Currently, when handling multipart/form-data, the generated types for request body don't seem recognize the native DOM File object. This forces us to use double casting

// Current workaround
value={(field.state.value ?? []) as unknown as File[]}
onValueChange={(file) => field.handleChange(file as unknown as typeof field.state.value)}

2. Optional baseUrl wrapping for urlFor
   In monorepo setups, the frontend and backend run on different origins. Manually prepending the environment variable every time we need an asset URL is repetitive

const src = `${process.env.NEXT_PUBLIC_BASE_URL}${tuyauClient.urlFor("attachments", { key: name })}`;

Add an option in urlFor to wrap the path with the baseUrl

3. Expose safe utility as a standalone export
   The safe utility is excellent for avoiding try-catch blocks. However, it is currently difficult to use it for custom logic or external mutations (like wrapping a TanStack Query mutateAsync call).

const [error, success] = await safe(mutateAsync({ params, body: value }));

[Julien-R44]

@epenflow Hey thanks, just created a new issue with your feedbacks since it doesnt seems related to this one
But thanks, seems to be relevant points

[Julien-R44]

Second issue about Multipart file is fixed with #105

Closing the issue, @JanStevens feel free to re-open if you are still meeting issues with onUploadProgress etc