Shortcuts Tips: Uploading Images to a CDN for Blogging
Last night I went on a journey into Shortcuts and API requests while trying to solve a problem I have in managing images for this blog. One of the limitations of Squarespace, my website host, is that itās very reliant on its online editor, including for adding arbitrary images to blog posts. Adding images to posts that use Markdown blocks, as mine do, is particularly clunky.Ā
I wanted an image solution that was Markdown-native, so that I could keep everything in the text file and adjust while in the writing flow. Shortcuts was the obvious place to turn, as it has Markdown actions, and I do many posts from an iPad. Furthermore, Shortcuts will be fully cross-platform when itĀ comes to the Mac this fall. A few months ago, I found aĀ shortcut by Matt VanOrmer onĀ Peer ReviewedĀ that seemed to solve the problem. Mattās shortcut takes an image and uploads it toĀ ImgurĀ using the Imgur action included in Shortcuts. It returns the appropriate HTML for pasting into a text editor.Ā
This solution was good for a while, but I always felt a nag in the back of my mind that I didnāt have any control over what Imgur did with the image files. The hotlinks could suddenly stop working, seeing as using Imgur as a Content Delivery Network (CDN)Ā wasnāt kosherĀ with theirĀ Terms of Service. I needed a solution that I could control and rely on before getting too far down the road. I knew I needed to find a traditional CDN.
After some research, I foundĀ ImageKit.ioĀ which promises fast delivery, has a generous free plan, andĀ an API. Iād heard about using APIs with Shortcuts, but never delved into using them myself. I quickly created an account and located my private API key; it was time to put the rubber to the road.
Below, I give you the full saga so that if you, too, are just starting to make more advanced shortcuts, you can learn from my mistakes. If youād rather skip right to the goodies, here are theĀ Upload to ImageKitĀ andĀ Upload Image to TextĀ shortcuts that I created.
UPDATE: These two shortcuts have since been streamlined intoĀ one standalone shortcut.
Using the Get Contents of URL Action
I knew that the key to making API calls in Shortcuts laid within the Get Contents of URL action, so I started there.
LuckilyĀ ImageKitās documentation for a server-side uploadĀ was clear about that first endpoint URL:Ā https://upload.imagekit.io/api/v1/files/upload. Thatās where I needed the file to end up.
I wanted to post a file to CDN, so I chose POST as the Method, and File as the Request Body. I immediately ran into a wall: I couldnāt figure out how ImageKitās parameters fit into the Headers and Request Body. I scoured the internet for screenshots or explainers for making a similar API request. Surely someone else had used ImageKit for this or showed how they upload images to a CDN via Shortcuts. I couldnāt find anything inĀ all the usual places, but thisĀ YouTube videoĀ did come close.
Many trials of guess-and-check later, I was still banging my head against the wall. The shortcut was reaching ImageKit, but always returned an error about missing the fileName parameter or incorrect authorization. I had to be missing something simple.Ā
I was. It turns out that Headers are primarily for authorization, and require specific formatting. The Request Body is where other parameters should go.
Parsing ImageKitās documentation with my non-technical eyes (what the heck is a cURL?), I realized that I needed to useĀ AuthorizationĀ as the key, andĀ Basic username:passwordĀ as the value for that key. Username is the private API key, and there is no password. I also needed to Base64 encode that user:password string, which, luckily, is trivial in Shortcuts using the Base64 Encode action.
By using Form (not File as I originally guessed) for my Request Body, I was able to addĀ fileĀ andĀ fileNameĀ for my required parameters, and used variables generated by the shortcut for their values. More on those variables below.
Finally, I had success. Shortcuts didnāt error out, and I was able to see my test image in my ImageKit library. Huzzah!
Click here for a screenshot of the full shortcut.
Building Out the Rest of the Shortcut
File VariableĀ - Iām a proponent of building many individual shortcuts as building blocks so that they can be called by multiple other ones. Thatās how I typically use this shortcut; I call it as a Run Shortcut action in anĀ adapted versionĀ of that Imgur Uploader shortcut that I got fromĀ Peer Reviewed. That shortcut does some heavy lifting by getting the image, preparing it for the web by converting it to JPEG, resizing, and then passing it to the Upload to ImageKit shortcut as its input variable. That shortcut also takes the URL returned by this one and gives me a few options for formatting it (plain URL, HTML image, or Markdown image).
Auth (Base64) VariableĀ - Iām using the appĀ Data JarĀ to store my private key. That way, I can reference it across multiple shortcuts and have only one place to change it if needed. Plus, I can freely share this Shortcut without revealing the key. However, you could just paste your private key directly into the first Text action and remove the Data Jar action altogether. Just donāt forget the colon (:) at the end of your private key to satisfy theĀ user:passwordĀ format that the API expects.
File Name VariableĀ - ImageKit needs a name for each file uploaded to the library. I enter one in an Ask For Input action, but with the default text set to the fileās existing name. That speeds things up if the file is already named on my device.
OutputĀ - A shortcut is only as good as the output, so when Get Contents of URL returns some JSON, you need to do something with it. I used the Get Dictionary Value action to specify that I wanted to get the value for theĀ urlĀ key out of the JSON. This is the direct link to the item just uploaded, which is ultimately what I need so that it can be formatted into a Markdown image link.
Checking for ErrorsĀ - Since Iām running this shortcut from the Share Sheet most often, I need some indication if something goes wrong. The final action returns an alert if I donāt get a URL back from ImageKit.
I hope you enjoyed going on this journey with me. Despite some initial frustration, I enjoyed learning more about making web requests, and how these actions work together. I plan to share more Shortcuts tips as I learn!
Get the Upload to ImageKit shortcut (Original Version) ā
Get the Upload Image to Text shortcut (Original Version) ā
UPDATE:Ā I have since streamlined these two shortcuts into one. The latest version can be foundĀ on RoutineHub.
Iām new at this, so please forgive me if I used some technical language incorrectly here.