Programmable Media

Programmatically create upload presets (video tutorial)

Last updated: Mar-28-2025

Overview

In this tutorial, we'll show you how to programmatically create and use Cloudinary's signed upload presets.

Video tutorial


Video Player is loading.
Current Time 0:00
Duration -:-
Loaded: 0%
Stream Type LIVE
Remaining Time -:-
 
1x
  • Chapters
  • descriptions off, selected
  • captions off, selected

    This video is brought to you by Cloudinary's video player - embed your own!

    Tutorial contents

    This tutorial presents the following topics. Click a timestamp to jump to that part of the video.

    What is an upload preset?

    Jump to this spot in the video  0:20 Upload presets let you add many parameters to your upload calls and use them all at once.

    Some use cases

    Jump to this spot in the video  0:31 With Cloudinary's APIs, you can create dozens of upload presets for different use cases, like: removing the background from an image, flagging a file for content moderation, or simply making sure your asset makes its way into the right folder. Check out more use cases in our Upload presets and Upload API documentation.

    Signed vs. unsigned presets

    Jump to this spot in the video  0:46 At Cloudinary, presets can be signed or unsigned. Unsigned presets are used with unsigned upload calls. For example, when uploading directly from the browser on the frontend. In this tutorial we focus entirely on signed presets on the backend. You can find more information on the difference between signed and unsigned presets in our Upload presets documentation.

    Setting up development environment

    Jump to this spot in the video  1:06 If this is your first time setting up your development environment with Cloudinary, we recommend watching our Upload Programmatically tutorial. It will also walk you through how to make your first upload.

    Clone the repository we use in this tutorial to follow along

    Jump to this spot in the video  1:43 It may be helpful to clone the repo we've created for this demo.
    CURL
    git clone https://github.com/cloudinary-training/cld-upload-presets

    Ensure script libraries are installed

    Jump to this spot in the video  1:48 Make sure all of our script's libraries are properly installed with a simple npm i command. If you open your package.json file, you can see all of the packages have been listed as dependencies.

    Create a basic upload preset script

    Jump to this spot in the video  1:59 Our first example script uses Cloudinary's Admin API to create a basic upload preset. We'll use that to upload an image to our product environment, with instructions on how to store it and actions to carry out as part of the upload process.
    Node.js
    require('dotenv').config();
    const cloudinary = require('cloudinary').v2;
    
    cloudinary.api.create_upload_preset({
      name: 'demo_preset',
      tags: 'baby, winter, snow',
      folder: 'babies',
      allowed_formats: 'jpg, png'
    })
    .then(uploadResult => console.log(uploadResult))
    .catch(error => console.error(error));

    Run script to create upload preset

    Jump to this spot in the video  2:36 Run node create-upload-preset.js to officially create our first upload preset!

    Upload file with our preset

    Jump to this spot in the video  2:43 Upload the asset to Cloudinary with our newly created upload preset called winter-baby.

    Create new preset with a simple transformation

    Jump to this spot in the video  3:20 We apply the same techniques shown in the earlier example, but with transformations. This will transform the original file and only keep the transformed asset in our Cloudinary product environment.
    Node.js
    require("dotenv").config();
    const cloudinary = require("cloudinary").v2;
    
    cloudinary.api.create_upload_preset({
        name: "profile-preset",
        tags: "employees, faces, profile",
        folder: "profiles",
        allowed_formats: "jpg, png",
    
        transformation: [
          {
            width: 200,
            height: 200,
            crop: "thumb",
            gravity: "face",
          },
        ],
      })
      .then((uploadResult) => console.log(uploadResult))
      .catch((error) => console.error(error));

    Run script to create another upload preset

    Jump to this spot in the video  4:04 Run create-derived-image-preset.js to create another upload preset!

    Upload file with our preset

    Jump to this spot in the video  4:18 Upload the asset to Cloudinary with our newly created upload preset called profile-preset.

    Keep learning

    Related topics

    If you like this, you might also like...

     

    Cloudinary Academy

     

    Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.

     

    ✔️ Feedback sent!