[misc]: Uncaught (in promise) TypeError: _actions_uploadthing_actions__WEBPACK_IMPORTED_MODULE_4__.utapi.listFiles is not a function

[marienjus]

I understand that this issue may be closed if it should be filed in another category

• [X] I understand

My issue

I dont seem to get why this is coming out. my code:

'use client';

import { UploadButton, UploadDropzone, } from '@/lib/uploadthing'
import React, { useEffect, useState } from 'react'
import { ClientUploadedFileData } from 'uploadthing/types';
import { CardsShare } from './_';
import { utapi } from '@/actions/uploadthing.actions';

export default function PageShareToDoc() {
  const [files_, setFiles_] = useState<any>([])

  const fetchExistingFiles = async () => {
    const files = await utapi.listFiles();
    setFiles_(files);
    console.log(':__:', files);
  }

  useEffect(() => {
    fetchExistingFiles()
  }, [files_])

  return (
    <div className='mt-10 container p-3 mx-auto'>
      {/* <UploadButton
                endpoint='imageUploader'
                // onBeforeUploadBegin={}
                onClientUploadComplete={(res: ClientUploadedFileData<null | any>[]) => {
                    console.log("Files: ", res);
                    alert("Upload Completed");
                }}
            // onUploadError={}
            // onUploadProgress={}

            /> */}

      <CardsShare />
      {
        JSON?.stringify(files_)
      }

      {
        files_ && files_?.map((file: any, index: any) => (
          <>
            images showing?
            <img src={file?.key} alt={file?.name} />
          </>
        ))
      }

      <UploadDropzone
        endpoint='imageUploader'
        className="bg-slate-800 ut-label:text-lg ut-allowed-content:ut-uploading:text-red-300"

        onClientUploadComplete={(res: ClientUploadedFileData<null | any>[]) => {
          console.log("Files: ", res);
          alert("Upload Completed");
        }}

      // onUploadError={(error) => {
      //     console.log("Error: ", error);
      //     const fieldErrors = error.data?.zodError?.fieldErrors;
      //     //                              ^? typeToFlattenedError
      //     setError(fieldErrors.foo[0] ?? "");
      // }}
      />
    </div>
  )
}

// actions:

"use server";

import { UTApi } from "uploadthing/server";

export const utapi = new UTApi();

[juliusmarminge]

Utapi is server-only

You can use it in server actions but you cant just export the class like you're doing.

Make a server action and call the function in there

[juliusmarminge]

In your actions file, do this:

// actions.ts
"use server";

import { UTApi } from "uploadthing/server";

const utapi = new UTApi();

export const listFiles = utapi.listFiles;

and import that instead. actions must be async functions, you cannot export an object/class instance