Flowdrive for Webflow

The Flowdrive app adds an upload field to forms on your Webflow site, and lets you browse, insert and import files from inside the Webflow Designer. Visitors upload a file, it's stored in Flowdrive, and its link is sent with the rest of the form.

This page covers installing the app, turning uploads on for a site, adding the upload field, customizing it, and turning it off or removing it.

What you need

• A Flowdrive account. The free plan works with the app. Create one before you connect.
• A Webflow site. Changes the app makes to your site go live when you publish it.
• A paid Webflow plan for custom code. Turning on uploads adds a script through Webflow's custom code, which needs an active Site plan on that site, or a Core, Growth, Agency or Freelancer Workspace. Browsing, inserting and importing files work without it.
• Language. The app and its screens are in English.

Plans and pricing

The app itself has no extra charge. Uploads count against your Flowdrive plan, the same as files you upload in the dashboard.

The free plan also holds up to 25 files in total. An upload that would go over your storage, largest-file or file-count limit is refused. Requests over your plan's monthly amount are billed at $0.05 per 1,000, on every plan. See pricing for every plan.

1. Install and connect

1. Install Flowdrive from the Webflow Marketplace. On Webflow's screen, choose the sites Flowdrive can use and approve. Uploads and Sync Assets only work on sites you authorize here, so tick every site you want them on.
2. Sign in to Flowdrive, or create an account, when asked. Then choose the organization to connect Webflow to and click Connect Webflow. You have 15 minutes after approving on Webflow's screen.
3. Open your site in the Webflow Designer and open the Flowdrive app from the Apps panel. Click Connect Webflow. In the window that opens, choose the organization and click Continue. If that organization isn't connected to Webflow yet, you approve Webflow in the same window first. Sign in another way in the app panel keeps the Google and email sign-in.

Once the app panel is signed in, it shows Sync Assets. If it shows Connect this site instead, click it to add this site to the connection.

You can also connect Webflow from the Flowdrive dashboard, under Import → Webflow → Connect.

What the app asks permission for

Flowdrive doesn't request Webflow's Write sites or Write pages permissions, so it can't publish your site. The app panel changes the page you're designing only when you click Add upload widget, Update settings, Insert Image, Insert Video, Insert Audio, Insert Asset (the + on a file) or Replace in Sync Assets. You publish.

2. Turn on uploads for a site

1. In the Designer, open the Flowdrive app and click Upload widget.
2. Click Enable uploads.
3. Publish your site.

You can also turn uploads on from the Flowdrive dashboard: Upload Widget, step 2, Webflow app, then Enable next to the site.

What turning on uploads adds to your site

One script, added through Webflow's Custom Code API with the name Flowdrive Upload Widget.

• It loads a pinned, versioned file from https://files.tryflowdrive.com/widget/VERSION/index.min.js (VERSION is the script version, for example 1.1.15), with an integrity hash, in the site footer, so it runs on every page of the site. Your upload key is on it as data-fd-id.
• It loads its stylesheet from files.tryflowdrive.com.
• On pages with an upload field, it uploads the files visitors pick to api.tryflowdrive.com and puts each file's link in the form.
• On pages with secured files (see Secured Files), it asks files.tryflowdrive.com for signed links to those files. If the site uses Memberstack and the visitor is signed in, it sends their Memberstack member token with that request, so Flowdrive can check their plan.

Your site's domains on your upload key. Flowdrive adds your site's webflow.io address and its custom domains to the list of sites that can upload with your key. In the dashboard they show under Upload Widget → Your sites → Webflow sites as Added by the Webflow app, and you don't type them in. Flowdrive reads them from Webflow each time you turn on uploads, so if you add a custom domain in Webflow later, disable and enable uploads for the site. To remove them, turn off uploads for that site or disconnect Webflow. Uploads from other sites are refused. A listed domain also covers its subdomains.

If Flowdrive can't read your site's domains from Webflow, uploads aren't turned on and you'll see an error. Try again in a moment.

If another Flowdrive account already has uploads on the site

Several Flowdrive accounts can connect the same Webflow site, for example an agency and its client. A site's uploads go to one account at a time, because the site carries one upload script. If uploads on the site already go to another account, Enable shows Uploads go to another Flowdrive account and a Switch to this org button. Switching moves the site's uploads to your account and releases the site's domains from the other account's key. The other account sees the same message and can switch back. Neither account's files are touched. Publish the site for the switch to reach your live pages.

If you added the Flowdrive script by hand

Earlier setups pasted a script that loads https://files.tryflowdrive.com/index.min.js into the site's custom code or an Embed element. That address is no longer updated, so a site that keeps it won't get new versions of the upload script. To move to the app:

1. Turn on uploads for the site as above.
2. Remove the old <script src="https://files.tryflowdrive.com/index.min.js" …> tag. Look in Site settings → Custom code (head and footer code), in each page's Page settings → Custom code, and in any Embed element.
3. Publish the site.

Leave the upload fields you already have: they keep working with the app's script.

When Flowdrive releases a new version of the upload script, it may update the script on your sites. The new version reaches your live site the next time you publish.

3. Add the upload field to a form

The upload field goes inside a Webflow Form. If the page has no form, add one first.

1. In the app panel, click Upload widget.
2. Pick the form. The pin icon (Show in canvas) shows you which form it is.
3. Set the options:
   • Max file size: leave empty for no limit beyond your plan's.
   • Accepted file types: for example image/* or application/pdf, or use the presets.
   • Allow multiple files.
4. Choose Where the uploaded file URL goes:
   • Create a field adds a hidden field (named file-url unless you change it) that's sent with the form.
   • Use a form field puts the link in one of the form's own text fields.
5. Click Add upload widget, then publish.

Fields the app won't use

The upload field won't write the link into password or email fields, fields marked as password, username, one-time-code or card fields, or fields whose names are on its list of password, security, captcha and payment names. In the app, those fields are greyed out with the reason. Fields whose name, id or autocomplete reads as a username, login, user ID or account name (such as username or login) are also greyed out and can't be selected, and the upload field won't write into them. Other fields in the same form, including a dedicated upload field in a sign-up form, work as usual. The app also won't add uploads to a form that has payment fields, and it won't create a field with a name like password, username, token or cvc. The username and login rules apply to upload script version 1.1.17 and later; the others to 1.1.13 and later.

4. Customize the upload field

The app adds the upload field as a group of elements inside your form: a wrapper with the class fd-upload-wrapper holding a container with the class fd-upload-container (the Upload files trigger, a hidden file input and, if you created one, the hidden field for the link), and a list that shows the files as they upload. Style them with classes in the Designer like any other element.

To change behaviour, select the element with the class fd-upload-container and add a custom attribute (Settings panel, Custom attributes, +):

Custom code doesn't run inside the Designer, so test on your published or staging site.

5. Other things the app does

• Browse your files. Search, filter by type and sort your Flowdrive files from the app panel.
• Insert a file. Select an element on the canvas, then click Insert Image or Insert Video on a Flowdrive file. A selected image or video is replaced; otherwise the file is placed inside or next to the selected element.
• Upload. Click Upload to add files to the current Flowdrive folder.
• Replace a file. Replace uploads a new file under the same link. It must be the same file type.
• Import Webflow assets. Sync Assets lists your site's Webflow assets, copies the ones you select into Flowdrive, and can swap the matching images on the current page for their Flowdrive copies.
• Delete a file. Deleting a file from the app panel deletes it right away. It doesn't go to the trash, and you can't restore it.

6. Turn off uploads, disconnect, uninstall

Turn off uploads for one site

In the app panel, open Upload widget, click Disable uploads on this site, then Yes, disable uploads. Or click Disable next to the site in the dashboard. This removes the Flowdrive script from that site and releases its domains from your upload key. Publish the site to remove the script from your live pages. Your files stay in Flowdrive.

Disconnect Webflow

In the Flowdrive dashboard, go to Upload Widget (or Settings → Integrations → Webflow) and click Disconnect Webflow. This:

• removes the Flowdrive script from each site where uploads are on, and lists any site it couldn't clean so you can remove the script by hand;
• releases the domains the app added;
• deletes the Webflow access Flowdrive stored.

Publish each site to remove the script from your live pages. Your files stay in Flowdrive, and you can reconnect at any time. To also revoke Flowdrive's access on Webflow's side, uninstall the app in Webflow.

Uninstall the app

Disconnect first, then uninstall. Once the app is uninstalled, Webflow no longer lets Flowdrive reach your sites, so Flowdrive can't remove its script for you.

If you uninstalled without disconnecting, check each site's custom code settings in Webflow. If Flowdrive Upload Widget is still listed, remove it and publish the site. If the Flowdrive dashboard still shows your Webflow connection, click Disconnect Webflow there.

Delete your Flowdrive account

Deleting your account doesn't remove the script from your Webflow sites. Disconnect Webflow first, or remove the script by hand as above. Deletion happens 7 days after you request it, and you can cancel it during that time.

Troubleshooting

Enable uploads says "Could not enable uploads". Flowdrive couldn't finish turning uploads on: it couldn't read the site's domains, Webflow didn't accept the script, or the connection needs renewing. Try again in a moment. If the app shows Reconnect to enable, reconnect Webflow and enable again. If it keeps failing, email support with the site name.

Enable shows "Uploads go to another Flowdrive account". Another Flowdrive account turned uploads on for this site. Click Switch to this org to move the site's uploads to your account, then publish. See If another Flowdrive account already has uploads on the site.

The dashboard says your Webflow connection has expired. Webflow no longer accepts the saved connection, usually because the app was uninstalled or access was revoked. Click Reconnect Webflow. If you don't, Flowdrive deletes the rejected connection at its next daily check, and the dashboard then shows Connect Webflow.

The app says "No form on this page". The upload field goes inside a Webflow Form. Add a form to the page, then click Check again.

Uploads are refused with "Domain not allowed". The domain isn't on your upload key's list. Flowdrive adds a site's domains when uploads are turned on, so the fix is in the app, not the dashboard:

1. In the Designer, open the Flowdrive app and click Upload widget.
2. If uploads are off, click Enable uploads. If they're on and the refused domain is new, for example a custom domain you added in Webflow after turning uploads on, click Disable uploads on this site, then Yes, disable uploads, then Enable uploads. Flowdrive reads the site's domains from Webflow again.
3. Publish the site.

A Webflow site's domains can't be added by hand in the dashboard.

Your data

• Your Webflow connection. Flowdrive stores the access Webflow grants it (encrypted), the IDs of the sites you turn uploads on for, and which Webflow user is linked to your Flowdrive account. The app panel keeps a sign-in session for your browser. Disconnecting deletes the stored access.
• Your sites' domains. Stored on your upload key so uploads from your sites are accepted.
• Files. Files visitors upload, and files you upload or import, are stored in your Flowdrive account. For assets you import, Flowdrive also keeps a record of which Webflow asset each file came from.
• Form submissions. The form itself is still handled by Webflow. Flowdrive only adds the file's link to it.

Read the full privacy policy.

Support

Email [email protected]. See contact for other ways to reach us.