Back

File Failed to Upload, Server SDK Node

  • 0
  • Self Hosted
  • Web
  • Storage
ZachHandley
4 Jun, 2024, 20:37

Hey so, I have a POST route that I'm trying to upload a file on and it's been giving me nothing but problems today.

So basically a user sends a POST request to my route with FormData, like so

TypeScript
export const updateAvatar = async (
  userData: Partial<AuthUser>,
  avatar: File
): Promise<AuthUser | string> => {
  try {
    const formData = new FormData();
    formData.append("userData", JSON.stringify(userData));
    formData.append("avatar", avatar, avatar.name);
    console.log("formData", formData.get("avatar"));
    const response = await ky(`${API_URL}/api/auth/avatar.json`, {
      method: "POST",
      body: formData,
      credentials: "include",
    });

I then receive that on my server (same place lol)

TypeScript
export const POST = async ({
  request,
  cookies,
}: APIContext): Promise<Response> => {
  try {
    const userApi = new UserApi(cookies);
    const formData = await request.formData();

    const userData = JSON.parse(formData.get("userData") as string);
    const avatar = formData.get("avatar") as File;
    console.log("Avatar: ", avatar);

    // Parse and validate user data using AuthUserSchema
    const parsedUserData = AuthUserSchema.parse(userData);
    const curUserResponse = await userApi.getUser();
    const curUser = curUserResponse.data;
    if (parsedUserData.$id !== curUser?.$id) {
      return new Response(makeResponse("Unauthorized"), {
        status: 401,
        headers: {
          "Content-Type": "application/json",
        },
      });
    }

    // Upload the avatar and update the user's avatar URL in the database
    const updatedUserResponse = await userApi.uploadAvatar(avatar);

then, finally, it goes to my userApi, which, without pasting alot

TypeScript
async uploadAvatar(file: File)
// Upload the file
      const fileCreated = await tryAwaitWithRetry(
        async () =>
          await this.storage.createFile(avatarStorageId, ID.unique(), file)
      );

so. Not complex. I keep getting an error.

TypeScript
Avatar:  File {
  size: 43256,
  type: 'image/webp',
  name: 'Asset 6@0.5x.webp',
  lastModified: 1717533215968
}
Failed to upload avatar: TypeError: source.on is not a function
    at DelayedStream.create (/home/zach/GitHub/myproject/webserver/node_modules/delayed-stream/lib/delayed_stream.js:33:10)
    at CombinedStream.append (/home/zach/GitHub/myproject/webserver/node_modules/combined-stream/lib/combined_stream.js:45:37)
    at FormData.append (/home/zach/GitHub/myproject/webserver/node_modules/isomorphic-form-data/node_modules/form-data/lib/form_data.js:74:3)
    at _Client.prepareRequest (file:///home/zach/GitHub/myproject/webserver/node_modules/node-appwrite/dist/client.mjs:200:24)
    at _Client.call (file:///home/zach/GitHub/myproject/webserver/node_modules/node-appwrite/dist/client.mjs:261:35)

So either a bug, or, cause it's right about the file

TL;DR
Developers are attempting to upload a file using FormData in Node JS but encountering a 'source.on is not a function' TypeError. The issue seems to be related to the file format or the FormData object setup. To troubleshoot, ensure the file format is correct and the FormData configuration is accurate.
ZachHandley
4 Jun, 2024, 20:42

"node-appwrite": "^13.0.0",

Reply

Reply to this thread by joining our Discord

Reply on Discord

Need support?

Join our Discord

Get community support by joining our Discord server.

Join Discord

Get premium support

Join Appwrite Pro and get email support from our team.

Learn more