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.
• 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.
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
If you want to allow PDF uploads, you must enable PDF delivery in Cloudinary:
Go to Cloudinary Console → Settings → Security
Turn on “Allow delivery of PDF and ZIP files”
Save your changes
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.
The Component & Future Updates : Fully functional file upload component with free ongoing improvements
Demo Form :A ready-to-use Framer form using the file upload input
Documentation & Setup Instructions : Clear step-by-step guide for Cloudinary configuration
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/
Kai Studio
