How to Integrate Filestack with V0

Open V0 at v0.dev and describe the file upload interface you want to build. Filestack integrations usually involve a trigger button or drop zone that opens the Picker, a progress indicator during upload, and a display area for uploaded file previews or a file list table. When prompting V0, be specific about the file types you accept (images, documents, any), the number of files (single or multiple), and how uploaded files should be displayed afterward. V0 generates React components with shadcn/ui — it will generate Button components for the upload trigger, Card components for the file list, and Progress components for upload feedback. The Filestack Picker is initialized in client-side JavaScript, so the upload trigger component should be a Client Component with the 'use client' directive. Tell V0 what happens after upload succeeds — whether you store the CDN URL in state, POST it to an API route, or navigate to a new page. After generating the UI, you will need to add the Filestack SDK initialization code (covered in the next step), but V0 gives you the structural scaffold and styling. Push the generated component to GitHub using V0's Git panel.

Install the Filestack JavaScript SDK and integrate it into your V0-generated upload component. The SDK provides the PickerInstance that opens the Filestack Picker modal with your API key and configuration options. Since the Picker uses browser APIs, the component must be a Client Component. The filestack-js package is the official npm SDK — install it with npm install filestack-js. The Picker configuration accepts many options including fromSources (which upload sources to show: 'local_file_system', 'googledrive', 'dropbox', 'url', 'webcam', 'instagram'), accept (file type restrictions), maxFiles (upload limit), maxSize (file size limit in bytes), and transformations (enable the built-in transformation UI). The onUploadDone callback receives an array of file objects, each with a handle (the unique Filestack file identifier), url (the full CDN URL), filename, mimetype, and size. The CDN URL format is https://cdn.filestackcontent.com/{handle} and you can append transformation parameters like /resize=width:800/auto_image/ between the base URL and the handle to apply transformations. Store the returned handles and URLs in your component state and send them to your backend API route for persistence in your database. For V0-generated apps using Supabase or another database, store the CDN URL string rather than the file bytes — Filestack is your file storage layer.

1// components/FilestackUploader.tsx
2'use client';
3
4import { useState } from 'react';
5import { Button } from '@/components/ui/button';
6import { Card } from '@/components/ui/card';
7import { Badge } from '@/components/ui/badge';
8
9interface UploadedFile {
10  handle: string;
11  url: string;
12  filename: string;
13  mimetype: string;
14  size: number;
15}
16
17interface FilestackUploaderProps {
18  onFilesUploaded: (files: UploadedFile[]) => void;
19  maxFiles?: number;
20  accept?: string[];
21}
22
23export function FilestackUploader({
24  onFilesUploaded,
25  maxFiles = 5,
26  accept = ['image/*', 'application/pdf'],
27}: FilestackUploaderProps) {
28  const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>([]);
29  const [isLoading, setIsLoading] = useState(false);
30
31  const openPicker = async () => {
32    const apiKey = process.env.NEXT_PUBLIC_FILESTACK_API_KEY;
33    if (!apiKey) {
34      console.error('NEXT_PUBLIC_FILESTACK_API_KEY is not set');
35      return;
36    }
37
38    setIsLoading(true);
39
40    // Dynamically import to avoid SSR issues
41    const { init } = await import('filestack-js');
42    const client = init(apiKey);
43
44    const picker = client.picker({
45      fromSources: ['local_file_system', 'googledrive', 'dropbox', 'url'],
46      accept,
47      maxFiles,
48      onUploadDone: (result: { filesUploaded: UploadedFile[] }) => {
49        const newFiles = result.filesUploaded;
50        setUploadedFiles((prev) => [...prev, ...newFiles]);
51        onFilesUploaded(newFiles);
52        setIsLoading(false);
53      },
54      onFileUploadFailed: () => {
55        setIsLoading(false);
56      },
57      onClose: () => {
58        setIsLoading(false);
59      },
60    });
61
62    picker.open();
63  };
64
65  const removeFile = (handle: string) => {
66    setUploadedFiles((prev) => prev.filter((f) => f.handle !== handle));
67  };
68
69  // Generate Filestack transformation URL for image thumbnails
70  const getThumbnailUrl = (url: string, width = 200) => {
71    return url.replace(
72      'https://cdn.filestackcontent.com/',
73      `https://cdn.filestackcontent.com/resize=width:${width}/auto_image/`
74    );
75  };
76
77  return (
78    <div className="space-y-4">
79      <Button onClick={openPicker} disabled={isLoading} className="w-full">
80        {isLoading ? 'Opening picker...' : 'Upload Files'}
81      </Button>
82
83      {uploadedFiles.length > 0 && (
84        <div className="space-y-2">
85          {uploadedFiles.map((file) => (
86            <Card key={file.handle} className="p-3 flex items-center gap-3">
87              {file.mimetype.startsWith('image/') && (
88                <img
89                  src={getThumbnailUrl(file.url)}
90                  alt={file.filename}
91                  className="w-12 h-12 object-cover rounded"
92                />
93              )}
94              <div className="flex-1 min-w-0">
95                <p className="text-sm font-medium truncate">{file.filename}</p>
96                <p className="text-xs text-muted-foreground">
97                  {(file.size / 1024).toFixed(1)} KB
98                </p>
99              </div>
100              <Badge variant="secondary">Uploaded</Badge>
101              <Button
102                variant="ghost"
103                size="sm"
104                onClick={() => removeFile(file.handle)}
105              >
106                Remove
107              </Button>
108            </Card>
109          ))}
110        </div>
111      )}
112    </div>
113  );
114}

For production applications, Filestack recommends using signed upload policies to prevent unauthorized uploads to your account. Without a policy, anyone who discovers your API key can upload files to your Filestack storage at your expense. The signing process happens server-side using your Filestack Secret (which must never reach the browser) and creates a time-limited, cryptographically signed policy that the Picker uses to authenticate uploads. Create a Next.js API route that generates a signed policy on demand. The policy specifies what operations are allowed, which file types are accepted, the maximum file size, and an expiry timestamp. The signing uses HMAC-SHA256 with your Filestack Secret key and returns a handle, policy (base64-encoded JSON), and signature that the Picker sends with each upload request. Add the signature generation to your API route using Node.js's built-in crypto module — no additional dependencies required. Your upload component fetches this policy from /api/filestack/policy before opening the Picker and passes the policy and signature to the Picker configuration. This two-step flow (fetch policy, then open picker) is the recommended production pattern. You can also use this API route to validate file handles received from the client before storing them in your database, ensuring files were actually uploaded through your approved Picker configuration.

1// app/api/filestack/policy/route.ts
2import { NextResponse } from 'next/server';
3import { createHmac } from 'crypto';
4
5export async function GET() {
6  const secret = process.env.FILESTACK_SECRET;
7  if (!secret) {
8    return NextResponse.json({ error: 'Filestack not configured' }, { status: 500 });
9  }
10
11  // Policy expires in 1 hour
12  const expiry = Math.floor(Date.now() / 1000) + 3600;
13
14  const policy = {
15    expiry,
16    call: ['pick', 'read', 'stat', 'write', 'writeUrl'],
17    maxSize: 20971520, // 20MB max file size
18  };
19
20  const policyBase64 = Buffer.from(JSON.stringify(policy)).toString('base64');
21  const signature = createHmac('sha256', secret)
22    .update(policyBase64)
23    .digest('hex');
24
25  return NextResponse.json({
26    policy: policyBase64,
27    signature,
28    apiKey: process.env.NEXT_PUBLIC_FILESTACK_API_KEY,
29  });
30}

Configure Filestack credentials in Vercel before deploying your app. Open the Vercel Dashboard, navigate to your project, and go to Settings → Environment Variables. Add NEXT_PUBLIC_FILESTACK_API_KEY with your Filestack API Key — this key uses the NEXT_PUBLIC_ prefix because it is safe for client-side use and required by the Picker widget running in the browser. Add FILESTACK_SECRET with your Filestack app secret — this must NOT have the NEXT_PUBLIC_ prefix since it is used only in the server-side policy signing API route. The secret must remain server-only. Set both variables for Production, Preview, and Development environments, then click Save. For local development, add both variables to .env.local in your project root. After setting variables, trigger a Vercel redeployment from the Deployments tab. Once deployed, test file uploads through the live URL by opening the Picker and uploading a test image. Verify the CDN URL returned is accessible and that transformations work by appending /resize=width:400/ to the URL in your browser. If uploads succeed but you see 400 errors on the policy route, check that FILESTACK_SECRET matches the secret in your Filestack Dashboard exactly — extra spaces or newlines in the environment variable value are a common source of signing failures.