I am trying to use server actions to upload an image to my gitlab project but i keep getting an error of "undefined" everytime i wanna excute the server action which exists in "actions.ts" to do this operation, and only when i remove the "use server" or i take the function out of a file that has "use server" does the method work. Does anyone have a reason why the method is not being recognized in a server component? mind you the place where im calling the serveraction is not a client component

normal ts file 

/**
 * Adds image data to the JSON output.
 * @param wikiprop Wiki property associated with the data
 * @param dataName Name of the data
 * @param inputData Image data
 * @param jsonOutput JSON output array
 */
async function addImageToJson(
  wikiprop: string,
  dataName: string,
  inputData: File,
  jsonOutput: any,
  isShowedWikiProps: boolean,
  title: string
) {
  console.log(`Starting addImageToJson for ${dataName}`);
  try {
    if (!inputData || !title) {
      console.warn(
        `Input data or title is missing for ${dataName}. Skipping image upload.`
      );
      return;
    }
    const imagePath = await uploadImage(title, inputData);
    if (!imagePath) {
      console.warn(`Image upload failed for ${dataName}. Received null path.`);
      return;
    }
    const jsonEntry = isShowedWikiProps
      ? { p: `### ${wikiprop}\t${dataName}\n![${dataName}](${imagePath})` }
      : { p: `### ${dataName}\n![${dataName}](${imagePath})` };

    console.log(
      `Adding JSON entry for ${dataName}:`,
      JSON.stringify(jsonEntry)
    );
    jsonOutput.push(jsonEntry);

    console.log(`Successfully processed image for ${dataName}`);
  } catch (error: any) {
    console.error(
      `Error in addImageToJson for ${dataName}:`,
      error instanceof Error ? error.message : String(error)
    );
  }
}
-----------------------------
actions.ts
"use server"



//upload image to gitlab
export async function uploadImage(
  fileName: string,
  fileContent: File
): Promise<string | null> {
  console.log(`Starting uploadImageToGitLab for ${fileName}`);
  try {
    if (!(fileContent instanceof File)) {
      console.warn(`fileContent is not a File object for ${fileName}`);
      return null;
    }

    const folderName = fileName;
    const fileExtension = fileContent.name.split(".").pop() || "jpg";
    const formattedFileName = `${fileName}_${formatDateForFilename()}.${fileExtension}`;
    const filePath = `${folderName}/${formattedFileName}`;
    const apiUrl = process.env.API_URL;

    if (!apiUrl) {
      console.error("API_URL is not defined in environment variables");
      return null;
    }

    const base64Content = await fileToBase64(fileContent);

    const response = await fetch(apiUrl, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${process.env.API_KEY}`,
      },
      body: JSON.stringify({
        branch: "main",
        commit_message: `Add ${formattedFileName} to ${folderName} via API`,
        actions: [
          {
            action: "create",
            file_path: filePath,
            encoding: "base64",
            content: base64Content,
          },
        ],
      }),
    });

    if (!response.ok) {
      throw new Error(`GitLab API responded with status ${response.status}`);
    }

    const result = await response.json();
    console.log(`GitLab API response for ${fileName}:`, JSON.stringify(result));

    return `/${filePath}`;
  } catch (error) {
    console.error(`Error in uploadImageToGitLab for ${fileName}:`, error);
    return null;
  }
}