Uploadthing

Uploadthing provids a very convenient way to store uploaded images and media files for production scenarios.

Installation

pnpm dlx shadcn@latest add --overwrite https://headcodecms.com/r/storage-uploadthing.json

It needs to overwrite components/headcode/form/image-field.ts to point to the Uploadthing field component. If the —overwrite does not work, you must manually change the reference to Uploadthing the image-field.ts file.

Configuration

Configure the Uploadthing token in your environment file (e.g., .env.local):

next.config.ts

UPLOADTHING_TOKEN=<your-uploadthing-token>

In order to use Uploadthing, you need to add the following to your next.config.ts file:

next.config.ts

import type { NextConfig } from 'next'const nextConfig: NextConfig = {  cacheComponents: true,  reactCompiler: true,  images: {    remotePatterns: [new URL('https://<APP_ID>.ufs.sh/f/**')],  },}export default nextConfig

Add the Uploadthing Dropzone styles to the app/(headcode/headcode/globals.css Tailwind CSS file:

app/(headcode)/headcode/globals.css

@import "tailwindcss";@import "tw-animate-css";@import "uploadthing/tw/v4";@source "../../../node_modules/@uploadthing/react/dist";...