webdevkaleem Posts - Answer Overflow

webdevkaleem

•Created by webdevkaleem on 1/10/2025 in #questions

Uploadthing: Type-error when sending custom field data to the client

So i want to send some data down to the client upon image upload. api/uploadthing.core.ts

  .onUploadComplete(async ({ metadata, file }) => {
      const commonFileName = file.name.split(".")[0];
      const commonFileType = file.name.split(".")[1];

      // 1. Fetch the original image which is uploaded
      const responseImage = await fetch(file.url);

      // 2. Error check
      if (!responseImage.ok) new UploadThingError("Failed to fetch image");

      // 3. Create a buffer of the original image
      const bufferImage = await responseImage.arrayBuffer();

      // 4. Make mobile & tablet resized buffers using sharp
      const mobileBuffer = await sharp(bufferImage).resize(400, 400).toBuffer();
      const tabletBuffer = await sharp(bufferImage).resize(600, 600).toBuffer();

      // 5. Create uploadthing files using the buffers
      const mobileImage = new UTFile(
        [mobileBuffer],
        `${commonFileName}/mobile.${commonFileType}`,
      );
      const tabletImage = new UTFile(
        [tabletBuffer],
        `${commonFileName}/tablet.${commonFileType}`,
      );

      // 6. Upload the files
      const savedImages = await utapi.uploadFiles([mobileImage, tabletImage]);

      // 7. ::Check:: If the images were uploaded successfully
      if (!savedImages[0]?.data) {
        new UploadThingError("Failed to fetch image");
      }

      // 8. Create an array of the images with the fields that are to be used in the frontend
      const imagesArr: {
        key: string;
        url: string;
      }[] = savedImages
        .map((obj) => {
          if (obj.data) {
            return {
              key: obj.data.key,
              url: obj.data.url,
            };
          }
        })
        .filter((obj) => obj !== undefined);

      // 9. Return data to the frontend
      return {
        metadata: { uploadedBy: metadata.userId, images: [...imagesArr] },
      };
    }),

  .onUploadComplete(async ({ metadata, file }) => {
      const commonFileName = file.name.split(".")[0];
      const commonFileType = file.name.split(".")[1];

      // 1. Fetch the original image which is uploaded
      const responseImage = await fetch(file.url);

      // 2. Error check
      if (!responseImage.ok) new UploadThingError("Failed to fetch image");

      // 3. Create a buffer of the original image
      const bufferImage = await responseImage.arrayBuffer();

      // 4. Make mobile & tablet resized buffers using sharp
      const mobileBuffer = await sharp(bufferImage).resize(400, 400).toBuffer();
      const tabletBuffer = await sharp(bufferImage).resize(600, 600).toBuffer();

      // 5. Create uploadthing files using the buffers
      const mobileImage = new UTFile(
        [mobileBuffer],
        `${commonFileName}/mobile.${commonFileType}`,
      );
      const tabletImage = new UTFile(
        [tabletBuffer],
        `${commonFileName}/tablet.${commonFileType}`,
      );

      // 6. Upload the files
      const savedImages = await utapi.uploadFiles([mobileImage, tabletImage]);

      // 7. ::Check:: If the images were uploaded successfully
      if (!savedImages[0]?.data) {
        new UploadThingError("Failed to fetch image");
      }

      // 8. Create an array of the images with the fields that are to be used in the frontend
      const imagesArr: {
        key: string;
        url: string;
      }[] = savedImages
        .map((obj) => {
          if (obj.data) {
            return {
              key: obj.data.key,
              url: obj.data.url,
            };
          }
        })
        .filter((obj) => obj !== undefined);

      // 9. Return data to the frontend
      return {
        metadata: { uploadedBy: metadata.userId, images: [...imagesArr] },
      };
    }),

type-error

Argument of type '({ metadata, file }: AdapterArgs & { metadata: { userId: string; images: { key: string; url: string; }[]; }; file: UploadedFileData; }) => Promise<{ metadata: { uploadedBy: string; images: { ...; }[]; }; }>' is not assignable to parameter of type 'UploadCompleteFn<{ userId: string; images: { key: string; url: string; }[]; }, void | JsonObject, AdapterArgs>'.
  Type 'Promise<{ metadata: { uploadedBy: string; images: { key: string; url: string; }[]; }; }>' is not assignable to type 'MaybePromise<void | JsonObject>'.
    Type 'Promise<{ metadata: { uploadedBy: string; images: { key: string; url: string; }[]; }; }>' is not assignable to type 'Promise<void | JsonObject>'.
      Type '{ metadata: { uploadedBy: string; images: { key: string; url: string; }[]; }; }' is not assignable to type 'void | JsonObject'.
        Type '{ metadata: { uploadedBy: string; images: { key: string; url: string; }[]; }; }' is not assignable to type 'JsonObject'.
          Property 'metadata' is incompatible with index signature.
            Type '{ uploadedBy: string; images: { key: string; url: string; }[]; }' is not assignable to type 'JsonValue | JsonObject | JsonArray'.
              Type '{ uploadedBy: string; images: { key: string; url: string; }[]; }' is not assignable to type 'JsonObject'.
                Property 'images' is incompatible with index signature.
                  Type '{ key: string; url: string; }[]' is not assignable to type 'JsonValue | JsonObject | JsonArray'.
                    Type '{ key: string; url: string; }[]' is not assignable to type 'JsonArray'.
                      Type '{ key: string; url: string; }' is not assignable to type 'JsonValue'.ts(2345)

Argument of type '({ metadata, file }: AdapterArgs & { metadata: { userId: string; images: { key: string; url: string; }[]; }; file: UploadedFileData; }) => Promise<{ metadata: { uploadedBy: string; images: { ...; }[]; }; }>' is not assignable to parameter of type 'UploadCompleteFn<{ userId: string; images: { key: string; url: string; }[]; }, void | JsonObject, AdapterArgs>'.
  Type 'Promise<{ metadata: { uploadedBy: string; images: { key: string; url: string; }[]; }; }>' is not assignable to type 'MaybePromise<void | JsonObject>'.
    Type 'Promise<{ metadata: { uploadedBy: string; images: { key: string; url: string; }[]; }; }>' is not assignable to type 'Promise<void | JsonObject>'.
      Type '{ metadata: { uploadedBy: string; images: { key: string; url: string; }[]; }; }' is not assignable to type 'void | JsonObject'.
        Type '{ metadata: { uploadedBy: string; images: { key: string; url: string; }[]; }; }' is not assignable to type 'JsonObject'.
          Property 'metadata' is incompatible with index signature.
            Type '{ uploadedBy: string; images: { key: string; url: string; }[]; }' is not assignable to type 'JsonValue | JsonObject | JsonArray'.
              Type '{ uploadedBy: string; images: { key: string; url: string; }[]; }' is not assignable to type 'JsonObject'.
                Property 'images' is incompatible with index signature.
                  Type '{ key: string; url: string; }[]' is not assignable to type 'JsonValue | JsonObject | JsonArray'.
                    Type '{ key: string; url: string; }[]' is not assignable to type 'JsonArray'.
                      Type '{ key: string; url: string; }' is not assignable to type 'JsonValue'.ts(2345)

The imagesArr is what i want on the client as I loop over imagesArr to render all the images. [Important Point]: In the backend all the images are uploaded successfully and in the right size as well -------------

Nextjs 15
App router
tRPC

Nextjs 15
App router
tRPC

12 replies

TTCTheo's Typesafe Cult

•Created by webdevkaleem on 1/10/2025 in #questions

Uploadthing muti image generation from a single image

I want to upload a single image and have 2 copies generated which are smaller than the original image (for mobile 400x400 and tablet 600x600). I want this process to be automatic, when the original image (1000x1000) has been done uploadthing. Any help on how should i complete this task (T3 stack: App router, tRPC, uploadthing) Thanks

2 replies

Gaming

Programming