Screenshot tool alternative with Cloudinary

[vojtaholik]

This is my alternative to [insert your favorite screenshot upload tool]. I use it in combination with Record Screen script.

It watches a screenshots directory on desktop and uploads any new file to Cloudinary. I have it then set to copy link to clipboard and move the file to trash. On top of that I have a dynamic route on my personal website to display the image/video along with a simple kvstore to track views (anonymously, just so that I know when someone view the file). It looks like this. Code for it is here.

One of nice things about Cloudinary is that if I record a video, all I have to do is replace.mov with .gif in url to get a gif.

Don't forget to run following command in your terminal to change default screenshot (cmd+shift+4) location:

defaults write com.apple.screencapture location ~/Desktop/screenshots

Open watch-screenshots in Script Kit

// Name: Watch Screenshots Dir
// Watch: ~/Desktop/screenshots
// Description: Don't forget to run following command in your terminal to set default screenshot directory in macOSX: defaults write com.apple.screencapture location ~/Desktop/screenshots

import "@johnlindquist/kit";
import cloudinary from "cloudinary";
import trash from "trash";

const DIR = "screenshots";
const NOTIFY_SOUND_FILE_PATH = false; // home("Desktop/come-here-notification.mp3");
const CUSTOM_DOMAIN = false; // 'https://vojta.io/shots/'

// These are optional and automatically set by the watcher
let filePath = await arg();
let event = await arg();

// Cloudinary options
const options = {
  public_id: `${DIR}/${Date.now()}`,
  unique_filename: true,
  use_filename: true,
  overwrite: true,
  filename_override: true,
};

cloudinary.v2.config({
  cloud_name: await env("CLOUDINARY_CLOUD_NAME"),
  api_key: await env("CLOUDINARY_API_KEY"),
  api_secret: await env("CLOUDINARY_API_SECRET"),
});

// if file is added to DIR directory
if (event === "add") {
  await appendFile(home(`Desktop/${DIR}/download.log`), filePath + "\n");
  const isVideoFile = filePath.endsWith(".mov");

  await cloudinary.v2.uploader.upload(
    filePath,
    { ...options, resource_type: isVideoFile ? "video" : "image" },
    async (error, result) => {
      if (error) {
        console.error("Error uploading file:", error);
      } else {
        if (result) {
          await copy(
            CUSTOM_DOMAIN
              ? `${CUSTOM_DOMAIN}${result.public_id.replace(`${DIR}/`, "")}`
              : isVideoFile
              ? result.url.replace(".mov", ".mp4")
              : result.url
          );
          notify("✓ Uploaded to Cloudinary");
          NOTIFY_SOUND_FILE_PATH &&
            (await playAudioFile(NOTIFY_SOUND_FILE_PATH));
          await trash([filePath]);
        }
      }
    }
  );
}