How to create a Product with images in Swell using backend API in a NextJS server action ?

[waldothedeveloper]

I really would like to see a more complete example in the backend documentation on how to create a product where an explanation on how to upload images is more clear.

In my NextJS app, I'm receiving formData in my server action. I'm getting all the images (an 'array' of images) like this:

const files = formData.getAll("service_image_file") as File[];

Then, I'm looping over the files array of images to get a new array of this:

const arrayBuffer = await file.arrayBuffer();
const buffer = new Uint8Array(arrayBuffer);

and then I'm trying to create my Product (which I'm calling Service)

 const { id } = loggedInSwellUser?.results[0];
    // save the data in Swell
    const serviceDraft = await createProductDraft({
      name: parsed.data.service_name,
      price: parsed.data.service_price,
      description: parsed.data.service_description,
      images: finalImages, // this SHOULD HAVE MY ARRAY of Buffer images
      vendor_id: id,
    });

this is how the createProductDraft looksl ike:

import "server-only";

import swell from "@/lib/server";

export const createProductDraft = async (productData: any) => {
  const res = await swell.post("/products", {
    name: productData.name,
    price: productData.price,
    description: productData.description,
    images: productData.images,
    // TODO: this is a draft, make sure to change this to false later
    active: true,
    type: "digital",
    vendor_id: productData.vendor_id,
  });

  return res;
};

But the images are not created, not uploaded. I just don't know what's going on.
Can someone give me a fire torch? I'm walking in pure darkness...

[logeshswell]

First, you need to upload a list of files using /:files endpoint.
https://developers.swell.is/backend-api/files/create-a-file#create-a-file

Then, you can create a product with images field value as the list of file upload responses.
https://developers.swell.is/backend-api/products/create-a-product

[waldothedeveloper]

Thanks for the answer @logeshswell. I wasn't aware the was an endpoint for files. This all makes sense now.

[waldothedeveloper]

Hey @logeshswell , I wonder why when I hit the /:files endpoint with multiple images, I see images returning undefined, as if they were NOT uploaded.

Would this be due to the 'way' I'm uploading my files server side (node server function called by a NextJs server action)

import "server-only";

import type { SwellError, SwellFile } from "@/types/index";

import swell from "@/lib/server";
import sizeOf from "image-size";

export const uploadFiles = async (
  files: File[]
): Promise<SwellFile[] | SwellError> => {
  if (!files.length) {
    return {
      errors: {
        name: {
          code: "no-files",
          message:
            "There are no files to upload or the files received are not valid.",
        },
      },
    };
  }

  return await Promise.all(
    files.map(async (file) => {
      console.log(`uploading file ${file.name}...`);

      const arrayBuffer = await file.arrayBuffer();
      const bufferBeforeBase64Str = Buffer.from(arrayBuffer);
      const imgDimensions = sizeOf(bufferBeforeBase64Str);
      const dataStream = bufferBeforeBase64Str.toString("base64");

      return await swell.post("/:files", {
        content_type: file.type,
        filename: file.name,
        data: {
          $base64: dataStream,
        },
        width: imgDimensions.width,
        height: imgDimensions.height,
      });
    })
  );
};