Docs
Installation

Installation

Install and configure UploadShad

Overview

UploadShad is a powerful and easy-to-use file uploader component designed for ShadCN forms and React applications. It provides seamless integration, customizable options, and robust handling of file uploads.

Breakdown
  • Install Shadcn and dependant components
  • Install UploadShad dependencies
  • Install UploadShad

Run the ShadCN CLI

Run the shadcn-ui init command and setup your project with Shadcn.


pnpm dlx shadcn@latest init

Add UploadShad

This will add UploadShad & install it's required dependencies into your project.


pnpm dlx shadcn@latest add https://uploadshad.nerfdesigns.com/registry/uploadshad.json
This uses the (new) ShadCN CLI.

Environment Variable

For UploadShad to upload & delete images in your S3 Bucket, add these AWS configuration Environment Variables to your .env file. UploadShad ensures that variables without the "NEXT_PUBLIC" prefix remain secured on the server, and are not exposed to the client.


NEXT_PUBLIC_HOST_URL=<http://localhost:3000 ensure you update this in production>
AWS_BUCKET_NAME=<bucket name>
AWS_BUCKET_REGION=<bucket region>
AWS_BUCKET_ACCESS_KEY=<your access key>
AWS_BUCKET_SECRET_ACCESS_KEY=<your secret key>
AWS_BUCKET_PRODUCTION_FOLDER=<example folder>
NEXT_PUBLIC_AWS_BASE_URL=<https://example.s3.region.amazonaws.com>

Enable Toasts in your project (optional)

Notification Toasts are used to show feedback to the user for various states, and error messages.

Add the Sonner Toaster to your highest/closest .layout file.


export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html className="smooth-scroll" lang="en">
      <body className={inter.className}>
          {children}
      </body>
        <Toaster richColors position="top-center" />
    </html>
  );
}

Thats it!

You have successfully installed UploadShad into your project. 🎉

Now you can start using UploadShad in your Forms.

Alternatively, you can learn how UploadShad works under the hood


Resources