remix.run how do I resize images before uploading to cloudinary?

Question

I wish to resize images to about 500px x 500px before uploading it to cloundary. How I resize the images that is in AsyncIterable Uint8Array format. I would like to do this in the uploadImageToCloudinary function. I have tried resizing it with sharp package but i dont know how to convert data AsyncIterable to be compatible with the sharp package.

import {

  redirect,
  unstable_composeUploadHandlers,

  unstable_createMemoryUploadHandler,
  unstable_parseMultipartFormData,
} from "@remix-run/node";

// writeAsyncIterableToWritable is a Node-only utility
import { writeAsyncIterableToWritable } from "@remix-run/node";
import type {

  UploadApiResponse,

} from "cloudinary";
import { v2 as cloudinary } from "cloudinary";
import cuid from "cuid";

import { createInstagram } from "~/models/instagram.server";
import { createNewOrder } from "~/models/order.server";

cloudinary.config({
  cloud_name: process.env.CLOUDINARY_NAME,
  api_key: process.env.CLOUDINARY_API_KEY,
  api_secret: process.env.CLOUDINARY_API_SECRET,
});

async function uploadImageToCloudinary(data: AsyncIterable<Uint8Array>) {
  let randomFolder = (Math.random() + 1).toString(36).substring(5);

  const uploadPromise = new Promise<UploadApiResponse>(
    async (resolve, reject) => {
      const uploadStream = cloudinary.uploader.upload_stream(
        {
          folder: `file_uplaoded/${randomFolder}`,
        },
        (error, result) => {
          if (error) {
            reject(error);
            return;
          }
          resolve(result);
        }
      );
      await writeAsyncIterableToWritable(data, uploadStream);
    }
  );

  return uploadPromise;
}

export const action = async ({ request }) => {
  let selectedLargePhotosURLArray: any = [];

  const uploadHandler = unstable_composeUploadHandlers(
    // our custom upload handler
    async ({ name, contentType, data, filename }) => {
      const regexFileExtension = /\.[0-9a-z]+$/gm;
      const fileExtension = filename?.match(regexFileExtension);
      if (fileExtension != undefined && fileExtension?.length > 0) {
        const lowCaseFileExt = fileExtension[0].toLowerCase();
        let allowedFileExtension =
          lowCaseFileExt === ".png" ||
          lowCaseFileExt === ".jpg" ||
          lowCaseFileExt === ".jpeg" ||
          lowCaseFileExt === ".heic" ||
          lowCaseFileExt === ".gif"
            ? true
            : false;
        if (
          name === "petImages" &&
          filename !== undefined &&
          allowedFileExtension
        ) {
          const uploadedImage = await uploadImageToCloudinary(data);
          console.log(uploadedImage.secure_url);
          selectedLargePhotosURLArray.push(uploadedImage.secure_url);
          return uploadedImage.secure_url;
        }
      }
    },
    // fallback to memory for everything else
    unstable_createMemoryUploadHandler({
      maxPartSize: 300000000,
    })
  );

  const formData = await unstable_parseMultipartFormData(
    request,
    uploadHandler
  );

 

  return null
};

Answer 1

Cloudinary has a feature called Upload Presets which can be used for image transformations.

To enable that, do to your Cloudinary Account -> Click Settings (cog icon) -> Upload Manipulations -> Incoming Transformation, set your desired settings and save.

Now you can use the preset like this:

const uploadStream = cloudinary.uploader.upload_stream(
  {
    upload_preset: `preset_name`,
    folder: `file_uplaoded/${randomFolder}`,
  },
  (error, result) => {
    if (error) {
      reject(error)
      return
    }
    resolve(result)
  },
)