Iklil Najma Muqtafa

A new template is coming soon 👀

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

Upcoming Framer template with smooth card hover animations.

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.

Meet Tag Manager, a @Framer plugin that helps you fix SEO and accessibility in seconds. AI scans your layers and suggests the perfect semantic HTML tags automatically, so your site stays clean, structured, and search engine friendly without the manual headache.

Try my plugin here.

Introducing Horizontal Scroll FX for Framer.

Transform vertical layouts into immersive horizontal storytelling experiences with just a single component.

Get the component here: https://framer.link/dI68kkd

I just launched a new horizontal scroll component.

Look at what I'm doing

Get the components here

Turn vertical scroll into immersive horizontal stories with Horizontal Scroll in Framer.

Available now.

I'm about to launch a new component for horizontal scrolling.

Which thumbnail do you prefer?

right or left?

Advanced reverse scroll image reveal component for editorial website. made by love.

see component: https://framer.link/bwADXKQ

My first sale of "Interactive SVG" components.

CHECK THIS OUT