Convert to webp automatically

Custom Coding
1

Hi,
is there a way to convert uploaded images as jpg, png etc. by users in forms automatically into WEBP files?
This would be quite helpful, as now I’ have to download each image uploaded by users manually, convert and replace it in airtable.
Thanks in advance
Julian

2

When a user uploads a new image, I have an airtable automation that runs a script that uploads the image to Cloudinary in the desired format (custom Cloudinary upload setup) and returns in another column the URL of the hosted image.

I have three columns in my airtable:

  1. where the file is uploaded
  2. hosted image url
  3. formula to return hosted image url if there is one, if not it returns the url of a default avatar.

Find below the script that airtable runs.

There is two input variable you need to pass into the script:
“Avatar” is the “Expiring download URL” (that’s important) of the uploaded image.
“recrodId” is the record id of the User.

const inputData = input.config();
const { Avatar, recordId } = inputData;

// Define the Cloudinary API credentials
const cloudinaryApiKey = '[YOUR API KEY]';
const cloudinaryApiSecret = '[YOUR API SECRET]';
const cloudinaryCloudName = '[YOUR CLOUD NAME]';

// Define the Cloudinary upload preset
const cloudinaryUploadPreset = '[YOUR CUSTOM UPLOAD PRESET]';

// Define the Cloudinary upload URL with custom folder
const cloudinaryUploadURL = `https://api.cloudinary.com/v1_1/${cloudinaryCloudName}/upload`;

// Get the URL from the Avatar field directly
const url = Avatar;

if (url) {
  // Define the Cloudinary upload options
  const options = {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      file: url,
      upload_preset: cloudinaryUploadPreset,
      api_key: cloudinaryApiKey,
      api_secret: cloudinaryApiSecret,
      public_id: recordId,
      resource_type: 'image',
    }),
  };

  // Make the API call to Cloudinary
  fetch(cloudinaryUploadURL, options)
    .then((response) => response.json())
    .then((data) => {
      // Log the Cloudinary API response
      console.log(data);

      // Extract the secure_url from the Cloudinary API response
      const secureUrl = data.secure_url;
      console.log('Secure URL:', secureUrl);
      // Pass the secureUrl to the next step in your Airtable automation
      output.set('secureUrl', secureUrl);
    })
    .catch((error) => {
      // Handle any errors that occur during the API call
      console.error('Error during API call:', error);
    });
} else {
  console.error('No avatar URL found in the input configuration.');
}
3

Hi Steven, thanks!
What can I use instead of the API and secret key information, as this won’t be usable by airtable any longer beginning from January 2024?

4

These are the API info of your Cloudinary account, not Airtable.