File Uploader

Premium Forms Component by Kai Studio

Show PreviewBuy for $25
File Uploader

About File Uploader

This component is Part of the  Essential Components plugin. Browse and insert 30+ components directly in Framer. Start for free

Add a drag-and-drop file upload field to your Framer forms.Visitors can upload images, videos, PDFs, and audio and the file is stored securely on Cloudinary’s cloud storage.

How It Works

• Lets visitors drag & drop a file or click to browse.

• Checks the file type and size before uploading

• Shows upload progress and a preview (for images)

• Uploads the file to Cloudinary’s cloud storage

• Saves a secure Cloudinary file URL

• Sends that file link with the form when it’s submitted

• No backend or custom code required

Works with Cloudinary’s free tier (25GB bandwidth/month and generous upload limits). You don’t need a server or any code, Framer handles the form, Cloudinary handles the files.

How to Use the Component

1. Add the Component

Copy the component into your Framer project and add it inside a Framer Form

2. Create a Free Cloudinary Account

Sign up for a free Cloudinary account and copy your Cloud Name from your dashboard

3. Create an Upload Preset (One-Time Setup)

In your Cloudinary console dashboard,

  • Go to Settings → Upload

  • Click Upload Presets → Add Upload Preset or edit the existing one. Take note of the preset name.

  • Set Signing Mode to Unsigned. You can also set a folder name for your files.

  • In the Optimize and Deliver section, add only the file types you want users to upload.

⚠️ Important:Only add the formats you actually want to allow ,each separated by a comma. If you want images only, make sure only image file types are listed and nothing else.

Examples:

• Images only → jpg,jpeg,png,webp

• Images + PDFs → jpg,jpeg,png,webp,pdf

• Audio only → mp3,wav,m4a

• Video only → mp4,mov,webm

⚠️ Important for PDF Uploads (Cloudinary Setting)

If you want to allow PDF uploads, you must enable PDF delivery in Cloudinary:

  1. Go to Cloudinary Console → Settings → Security

  2. Turn on “Allow delivery of PDF and ZIP files”

  3. Save your changes

  4. This is required in addition to adding pdf in your Allowed Formats list in your Upload Preset.

4. Connect It in Framer

In the Properties panel of the file upload component,

  • Paste your cloudinary Cloud Name

  • Paste your Cloudinary Upload Preset name

  • Choose the File Type– Max File Size (10MB for images/PDFs/audio · up to 100MB for video)

  • Customise the rest of the properties to match the rest of the inputs, i.e placeholder text, colors, font, border, padding ,e.t.c

5. Publish & Test

  • Preview your form

  • Upload a test file

  • Submit the form

  • Confirm the file link comes through in whatever backend you select.

What You Get after Purchase

  1. The Component & Future Updates : Fully functional file upload component with free ongoing improvements

  2. Demo Form :A ready-to-use Framer form using the file upload input

  3. Documentation & Setup Instructions : Clear step-by-step guide for Cloudinary configuration

  4. Dedicated Lifetime Support. If you have any questions, feel free to email me anytime, I’m happy to help.

Live Preview : https://fileuploadinput.framer.website/