🤳 Build Image Uploader Endpoint
Quality of life improvement and explore backend options for this site
Table of Contents
Uploading Images is Slow
When I want to add an image to this site, I have to:
- export the image from Apple Photos
- upload the image to Uploadcare
- copy the url, width and height from Uploadcare
- add the image to the markdown file
Let's make a serverless endpoint to make it easier
I want to build an endpoint that will:
- take an image
- upload the image to Uploadcare
- return the markdown text
 - I can then paste the markdown text into the markdown file
What options exist?
I'm going to use this project to explore backend options for this site.
Cloudflare Pages Functions → The Edge is Too Limited
While there is documentation to deploy Next.js Route Handlers via Cloudflare Pages, the runtime for the function is edge meaning I cant include the use of libraries I need to do the image uploading. (I did explore doing the image uploading with all native support but didnt want to get into the weeds using the Cloudflare crypto API to authenticate requests to Uploadcare.)
Supabase Edge Functions → You Gotta Use Deno
Next.js Route Handlers and Vercel Deploy → You Gotta Deploy to Vercel
If I wanted to continue with Next.js Route Handlers and use them in a node.js runtime, then I would need to move deploying my site from Cloudflare Pages to Vercel.
Serverless and AWS Lambda → Yaml Infrastructure
Serverless and AWS Lambda
Option Choosen: Supabase Gives Room To Grow
What I choose for this project will set me up for building the next things. With a eye towards keeping things easy, Im learning towards using Supabase as the kinda batteries included option. I dont want to move off Cloudflare hosting to Vercel hosting just to get Next.js Route Handlers.
This allowed me to quickly add email magic link auth.
Building the Endpoint
- Setup VSCode muilti root workspace
- Setup
import_map.jsonfordenoimports insupabase/functions - Setup
npm run devto spin up local supabase functions - Figure out how I want to do auth with supabase functions
- I want to only auth me. perhaps dont have "create user" on client. only create users by hand in supabase admin CLI. only support sign in on the client. can do this just with magic link too.
- want to manage local-env auth different from prod auth
- setup to handle magic link auth
- Turn on CORS, docs
- Give function access to
Uploadcaresecrets, docs - Parse image from request body
- Upload image to Uploadcare and get id back
- Request image info from Uploadcare via id
- Return markdown text with image info
- Add a "copy text" button to the page
- [-] Setup functions to deploy on merge to
main, docs on doing that with Github Actions → right now I just use this locally
Enchantments
- On /auth give a nice message on success/failure
- On /auth/verify give a nice message on failure, redirect to home on success
References
🌱 Projects
Current things that bring me joy to work on
Steps for Cocktail Photos
Build Image Uploader Endpoint the endpoint only runs locally for security the endpoint takes the image the endpoint returns the mardown text 