Add File Upload Form: Free Tutorial by Iklil Najma Muqtafa

Learn how to add file upload Input to your Framer forms and connect them to Google Drive, Cloudinary, Supabase, or Cloudflare R2 without complex coding.

Introduction

Collecting files—whether they are resumes, images, or documents—is a crucial part of many modern websites. By connecting your Framer project to a dedicated storage provider, you gain full ownership of your data and bypass file size limitations.

While Framer doesn't have a native "File Input," you can easily implement this using the File Upload Input Component. This tutorial will walk you through the setup for four different backends.

Requirement: To follow this guide, you’ll need the File Upload Component for Framer.

Option 1: Google Drive

Ideal for beginners who want files to land directly in a familiar folder.

1. Prepare Your Drive

Open Google Drive and create a new folder named Uploads.
Open the folder and copy the URL from your browser's address bar.

2. Set Up Google Apps Script

Go to script.google.com and create a New Project.
Get the Google Drive Script here and paste it into the editor.
Replace the placeholder with your folder URL.
Click Deploy > New Deployment > Web App. Set access to "Anyone".
Setting up a new deployment in Google Apps Script for the Framer File Upload component, configured as a Web App with access set to 'Anyone'.
Copy the Web App URL.
Copying the generated Web App URL from the Google Apps Script deployment dashboard to be used in the Framer component settings.

3. Connect to Framer

Select the component in Framer.

Configuring the File Upload component properties in Framer by selecting Google Drive as the provider and entering the Web App URL.

Set provider to Google Drive and paste your Web App URL.

Option 2: Cloudinary (Recomended)

The fastest setup for automated image optimization and a "no-code" backend.

1. Configure Cloudinary

Sign up at Cloudinary.
Copy your Cloud Name from the dashboard.
Create an Unsigned Upload Preset in the settings.
See detailed Cloudinary setup steps here.

2. Connect to Framer

In Framer, set the provider to Cloudinary.

Configuring the File Upload component in Framer for Cloudinary by entering the Cloud Name and the Unsigned Upload Preset name.

Enter your Cloud Name and Upload Preset name.

Option 3: Supabase

A robust, open-source solution for managing files with a clean dashboard.

1. Create a Bucket

In Supabase, create a new Public bucket named uploads.
You need to run a specific SQL policy to allow public uploads.
Copy the SQL Policy Code here.

2. Connect to Framer

Copy your Project URL and Anon Key from the API settings.

Setting up Supabase storage in Framer by entering the Project URL, Anon Key, and the specific Bucket Name for file uploads.

Set the provider in Framer to Supabase and fill in the credentials.

Option 4: Cloudflare R2

Best for large files and high traffic using a secure Worker bridge.

1. Setup R2 & Worker

Create an R2 bucket in Cloudflare.
Create a new Worker to handle the upload logic.
Get the R2 Worker Code & CORS Settings here.
Bind the Worker to your R2 bucket in the Cloudflare settings.

2. Connect to Framer

Copy your Worker's URL (e.g., ...workers.dev).

Connecting the Framer file upload component to Cloudflare R2 by inputting the deployed Worker URL in the component property panel.

Set the provider in Framer to Cloudflare R2 and paste the URL.
- No trailing slash! The URL should end with .dev — not .dev/.

Conclusion

You now have a fully functional file upload system integrated directly into your Framer site. Testing is key—ensure you publish your site to verify the connection between the component and your storage provider.

Ready to start? Get the File Upload Component