{image?.preview ? (
) : (
);
}
```
### Server-Side: Handle File Uploads
Create an API route to handle the file upload using the Whop SDK:
```typescript
import { verifyUserToken, whopApi } from "@/lib/whop-api";
import { headers } from "next/headers";
import { NextResponse } from "next/server";
export async function POST(request: Request) {
try {
// Verify user authentication
const headersList = await headers();
const userToken = await verifyUserToken(headersList);
if (!userToken) {
return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
}
// Get the file from the request
const file = await request.blob();
// Upload to Whop
const response = await whopApi.uploadAttachment({
file: new File([file], `upload-${Date.now()}.png`, {
type: "image/png",
}),
record: "forum_post", // or other record types
});
// The response includes the directUploadId and URL
return NextResponse.json({
success: true,
attachmentId: response.directUploadId,
url: response.attachment.source.url
});
} catch (error) {
console.error("Error uploading file:", error);
return NextResponse.json(
{ error: "Failed to upload file" },
{ status: 500 }
);
}
}
```
### Using Uploaded Media
After uploading, you can use the attachment ID in various Whop features. For example, to create a forum post with the uploaded image (server-side):
```typescript
const createForumPost = async (attachmentId: string) => {
const post = await whopApi.createForumPost({
input: {
forumExperienceId: "your-forum-id",
content: "Check out this image!",
attachments: [
{ directUploadId: attachmentId }
]
}
});
return post;
}
```
### Supported File Types
The Whop API supports the following file types for upload:
* Images: `.jpg`, `.jpeg`, `.png`, `.gif`
* Videos: `.mp4`, `.mov`
* Documents: `.pdf`
### Best Practices
1. **File Size**: Keep uploads under 100MB for optimal performance
2. **Image Optimization**: Consider using libraries like `sharp` for image processing before upload
3. **Error Handling**: Implement proper error handling on both client and server
4. **Clean Up**: Remember to clean up any preview URLs to prevent memory leaks
5. **Security**: Always verify user authentication before handling uploads
6. **Progress Tracking**: Consider implementing upload progress tracking for better UX
### Complete Example
Here's a complete example showing both client and server integration:
```typescript
// app/components/MediaUploader.tsx (Client)
import { useState, useCallback, useEffect } from "react";
import { useDropzone } from "react-dropzone";
export default function MediaUploader() {
const [image, setImage] = useState<{
file: File;
preview: string;
} | null>(null);
const [isUploading, setIsUploading] = useState(false);
useEffect(() => {
return () => {
if (image?.preview) {
URL.revokeObjectURL(image.preview);
}
};
}, [image]);
const onDrop = useCallback((acceptedFiles: File[]) => {
const file = acceptedFiles[0];
if (file) {
setImage({
file,
preview: URL.createObjectURL(file),
});
}
}, []);
const { getRootProps, getInputProps } = useDropzone({
onDrop,
accept: {
"image/*": [".jpeg", ".jpg", ".png", ".gif"],
},
maxFiles: 1,
});
const handleUpload = async () => {
if (!image?.file) return;
setIsUploading(true);
try {
// Send to your API route
const formData = new FormData();
formData.append("file", image.file);
const response = await fetch("/api/upload", {
method: "POST",
body: formData,
});
const data = await response.json();
if (!response.ok) {
throw new Error(data.error);
}
// Clear the form after successful upload
setImage(null);
} catch (error) {
console.error("Upload failed:", error);
} finally {
setIsUploading(false);
}
};
return (
Drag & drop an image here, or click to select
)}
{image?.preview ? (
) : (
{image && (
)}
Drag & drop an image here, or click to select
)}{message}
Connection Status: {status}
### Company API (deprecated) -- V2 and V5
Legacy. Old system for when you want to automate your own creator account or sync payments/crm data to your internal systems.
# Getting started
Source: https://dev.whop.com/getting-started
1. Clone our Next.js app template:
You do not have access to this experience
;
}
// Either: 'admin' | 'customer' | 'no_access';
// 'admin' means the user is an admin of the whop, such as an owner or moderator
// 'customer' means the user is a common member in this whop
// 'no_access' means the user does not have access to the whop
const { accessLevel } = result.hasAccessToExperience;
if (accessLevel === "admin") {
return You are an admin of this experience
;
}
if (accessLevel === "customer") {
return You are a customer of this experience
;
}
return You do not have access to this experience
```
## 3. Set up your database
### Create a Supabase database
Go to [Supabase](https://supabase.com) and create a new account if you don't have one
Create a new project and copy your database password
### Set up Prisma
Now, let's set up Prisma in your project:
Replace the contents of `prisma/schema.prisma` with:
```prisma prisma/schema.prisma
// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
directUrl = env("DIRECT_URL")
}
model Experience {
id String @unique
prompt String
}
```
Now generate your database and Prisma client:
> These are custom scripts we defined in the package.json file to load your env from .env.local and run the prisma commands. If you want to use the native prisma CLI, you'll need to move your `.env.local` to `.env` and run the commands manually.
{displayImage ? (
{image && (
📸
{isDragActive ? "Drop the image here..." : "Drag & drop an image here, or click to select"}
Supports JPG, PNG, GIF
{uploadProgress > 0 && uploadProgress < 100 && (
)}
)}
{prompt ? `"${prompt}"` : "Creator has not set a prompt yet."}