
Hello Everyone I’m an Independent UI Designer & No-Code Web Developer
Hiring page with a multi-step application form, now available in the new @framer Template.
Live Demo: https://framer.link/bTaaS54
File Upload Component: https://framer.link/84zvJGx
Pre-loader in our latest @framer template.
Live preview : https://framer.link/bTaaS54
A preview of the CMS detail page in my new framer template.
See my template : https://framer.link/bTaaS54
New template just landed on the marketplace!
Meet our latest Framer template — Clean design, easy customization, and built to impress.
Check it out now!
How to add Framer File Upload Component with Cloudflare R2 Integration
Requirement: To follow this guide, you’ll need the File Upload Component for Framer.
Step by step:
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/.
3. Publish and test your form.
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
How to add Framer File Upload Component with Supabase Integration
Requirement: To follow this guide, you’ll need the File Upload Component for Framer.
Step by step:
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.
3. Publish and test your form.
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
How to add Framer File Upload Component with Cloudinary Integration
Requirement: To follow this guide, you’ll need the File Upload Component for Framer.
Step by step:
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.
3. Publish and test your form.
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
Framer File Upload Component with Google Drive Integration
Requirement: To follow this guide, you’ll need the File Upload Component for Framer.
Step by step:
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.
4. Publish and test your form.
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
The component that can do all of this is Animated Fit Text Pro.
Get this component now.
This Framer component just made its first sale.
Here's the component: https://framer.link/l8O8sHN
See every detail of the NeuralEdge Framer Template in this full-page scroll preview.
See template here.
File Upload Component Setup Documentation. Simple, clear, and beginner friendly. Just copy, paste, and your component is ready to use inside @framer
Get the component here: https://framer.link/84zvJGx
Live Preview: https://documentationfileupload.framer.website
Edit any SVG directly inside @Framer. Drag points, adjust curves, and create smooth morph animations live on canvas.
See component here : https://framer.link/HHh7vcX
I’m sharing this component for free with Framer Creators. Get this component for free!!
Hi @Andreu, I'm not sure if this is a bug or something else, but I can't find this plugin in the Marketplace. However, it still appears in the Quick Actions plugin list. Could you please take a look?
This will be very helpful for those of you who want to use indent by column in @Framer.
You can get it here.