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 removing everything again.

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.
• 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. See pricing for every plan.

1. Install and connect

1. Install Flowdrive from the Webflow Marketplace, then open your site in the Webflow Designer and open the Flowdrive app from the Apps panel.
2. Sign in to Flowdrive in the app panel, with Continue with Google or with your email.
3. Connect Webflow: click Connect Site at the bottom of the app panel. You can also do this from the Flowdrive dashboard, under Import → Webflow → Connect.
4. 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.

When the connection finishes, the app panel shows Sync Assets instead of Connect Site.

If Webflow takes you to the Flowdrive sign-in page after you install, sign in, then connect from the app panel as in step 3.

What the app asks permission for

Flowdrive doesn't request Webflow's permissions to write to your sites or pages, so it can't publish your site. The app panel changes the page you're designing only when you click Add upload widget, Insert or 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, 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 as Added by the Webflow app. 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.

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 fields it recognizes as password, security or payment fields, by their type, autocomplete setting or name. In the app, those fields are greyed out with the reason. 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, token or cvc. This applies to upload script version 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 container with the class fd-upload-container, an Upload files trigger, a hidden file input, the hidden field for the link if you created one, 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 and click Disable uploads on this site, 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. Then sign in to the Flowdrive dashboard and click Disconnect Webflow to remove the stored connection and release the domains.

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 read the site's domains from Webflow, or the connection needs renewing. Try again in a moment. If the app shows Reconnect to enable, reconnect Webflow and enable again.

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.

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 site isn't on your upload key's list. Turn uploads on for the site in the app, or add the domain under Upload Widget → Add your site.

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.