Framer Image Upload Field: Setup and Use Cases Guide

Overview

Forms Plugin has five upload-type Advanced Fields, and each one is built around a different media type or capture method. Image Upload is the one built specifically for pictures: a visitor picks an image file from their device, sees an instant thumbnail preview before the upload even finishes, and that file attaches to the form submission. It shares its underlying settings pattern with Audio Upload and Video Upload, but it has one feature neither of those fields has: a live, client-side image preview.

This post covers what the field's settings panel actually controls, what makes the preview functionality different from every other upload field in the plugin, and the real use cases it's built for.

Quick Answer

• Image Upload accepts any image MIME type the visitor's browser recognizes (JPG, PNG, GIF, WEBP, and others), not a fixed list of file extensions.
• The default Field Name is image-upload, the default Label is "Image", and the default Placeholder is "Click to upload image".
• Max Size is a hard 25MB cap enforced client-side and server-side, the same ceiling as Audio Upload and Voice Recording, separate from File Upload's 50MB.
• Image Preview generates an instant thumbnail the moment a visitor selects a file, entirely client-side, before the upload to the server completes. No other upload-type field in Forms Plugin has this.
• Storage is either FormsPlugin's own storage (default) or Google Drive via a self-deployed Google Apps Script web app, with an Allow Multiple toggle for accepting more than one image.
• Available on Pro and Scale plans, not Basic.

What is the Image Upload field?

It's one of 14 Advanced Fields in Forms Plugin, alongside File Upload, Phone Number, Country, Range Slider, Color Picker, Button Option, Rating, Promoter Score (NPS), E-Signature, Voice Recording, Audio Upload, Video Upload, and URL Source Collector. Drop it into a form and it gives visitors a file picker that accepts image files from their device, shows a thumbnail of what they picked, and attaches the upload to the form submission.

The field uses a MIME-type wildcard check rather than a fixed extension allowlist. Under the hood, the file input accepts any file where the browser reports its type as starting with image/, which covers JPG, PNG, GIF, WEBP, SVG, and HEIC where the visitor's browser supports it. This is a meaningfully different mechanism from Audio Upload, which works off an explicit list of accepted audio file extensions. Image Upload doesn't check against a fixed list of extensions, it checks whether the browser recognizes the file as an image at all, which is a broader and more permissive check by design.

What do the core settings control?

Field Name is the unique identifier that appears in your submitted form data, defaulting to image-upload. This is the key that shows up in your CRM field mapping, your email notification, or your webhook payload, so rename it if the default conflicts with another field or your integration expects a specific key.

Label Name defaults to "Image" and Placeholder defaults to "Click to upload image", both the visible text a visitor sees on the form itself. Sub Text uses a template string, "Max {max} MB", where {max} gets replaced dynamically with whatever you set as the Max Size in the Upload Settings panel, so the helper text stays accurate if you change the limit later.

Required is a Yes/No toggle, defaulting to No. The Validation sub-panel adds two custom error message fields, the same pattern as every other upload field. Required Error supports {label} and {name} placeholders for a custom message when a visitor tries to submit without uploading. Max Size Error additionally supports a {max} placeholder that inserts the configured size ceiling directly into the error text.

One safety behavior worth knowing: while a file is actively uploading, the field is treated as required for submission purposes regardless of whether Required is toggled on. A visitor can't submit the form mid-upload and lose the image they were in the process of attaching. It isn't a separate setting you configure, it's just how the field behaves during an active upload.

What does the Upload Settings panel control?

Upload Settings is a dedicated sub-panel covering Max Size, the uploading state label, Show Spinner, Allow Multiple, and the storage destination.

Max Size is a slider control clamped to a 25MB ceiling in the component itself, meaning any configured value above 25MB gets capped at that number. It's enforced both client-side, before the upload begins, and server-side on receipt, so a file over the limit is rejected at both points. This is the same 25MB ceiling as Audio Upload and Voice Recording, and it's a separate number from the File Upload field's cap, which sits at 50MB. Don't assume the File Upload ceiling carries over here, it doesn't.

The uploading state label defaults to "Uploading [FileName]...", where [FileName] is a token replaced with the actual filename during the upload. This is the same mechanism Audio Upload and Video Upload use. Show Spinner is a Yes/No toggle, defaulting to Yes, controlling whether a loading spinner appears during the upload.

Allow Multiple is a Yes/No toggle, defaulting to No, that lets a visitor select and upload more than one image through the same field. When it's turned on, a Max Files stepper appears, letting you set how many images a visitor can attach. Multiple uploaded images are submitted as a single comma-separated value of URLs in the form data, rather than as separate fields, so plan your CRM mapping or webhook parsing around that format if you turn this on.

Storage is a dropdown with two options: "FormsPlugin (default)" and "Google Drive." Selecting Google Drive reveals an Apps Script URL field, a Link Type dropdown, and a Customize toggle, covered in the next section.

What makes the image preview different from every other upload field?

This is the field's real differentiator. Neither Audio Upload nor Video Upload nor Voice Recording has a visual thumbnail preview, there's nothing to preview for an audio waveform or a video file in the panel the same way. Image Upload does, and it's built to feel instant.

The moment a visitor picks an image file, a thumbnail preview renders immediately, generated entirely client-side using the browser's own object URL for the selected file. This happens before the file has finished uploading to the server, so visitors see confirmation of what they selected right away instead of waiting on a network round trip.

The Image Preview panel gives you real control over how that thumbnail displays. Height defaults to 44px. Radius defaults to 8px, with two corner-shape options available in the panel. There's also an aspect ratio setting, choosing between "auto" and "square" cropping, plus optional border and shadow styling to match the thumbnail to the rest of your form's design. If you're building a form where visual confirmation matters, a product customization request, a real estate listing form, anything where the visitor needs to feel confident they picked the right file, this preview is the reason to reach for Image Upload specifically rather than a generic File Upload field.

Where does the uploaded image get stored?

FormsPlugin default storage means Forms Plugin hosts the file on its own backend. No additional configuration is required, the storage works once the field is in place, and the image is accessible via a URL that appears in your form submission data.

Google Drive storage works differently. Selecting it reveals an Apps Script URL field with helper text pointing to a setup guide: deploy the Apps Script template, then paste the resulting /exec URL into the field. This is a self-hosted routing mechanism, not a one-click OAuth connection. A Link Type dropdown then lets you choose "Downloadable," which returns a direct file URL, or "Preview only," which returns a Drive preview page URL instead. A Customize toggle, defaulting to Off, reveals advanced folder controls when turned on: a name override, a per-field subfolder option, and a date/time stamp option, useful for keeping uploads from multiple forms organized inside the same Drive.

This same Apps Script mechanism is shared across every upload-type Advanced Field in Forms Plugin, including File Upload, Audio Upload, Video Upload, and Voice Recording. If you've already deployed the Apps Script template for one of those fields on your site, that same deployment works for Image Upload too, you don't need a separate one.

Can you style it and add conditional logic?

Every property is editable directly on the Framer canvas. Neither styling nor conditional logic is specific to this field, the system is the same across every Forms Plugin field. Label Style controls whether the label is shown, the required indicator character, the label font, and the label color. Layout controls direction (Vertical or Horizontal) and gap between label and input. Input Style covers font, text color, background, padding, border, corner radius, and shadow. Icon controls the upload icon's visibility, image, color, size, background, and border. Clear Button controls the dismiss icon shown after a file is selected. Focus Style and Error Style cover the field's focused-state border and shadow, and its error-state text color and font. These defaults match what's documented for Audio Upload and Video Upload, the panel structure is identical.

Conditions work identically to every other Forms Plugin field: the five actions (Show/Hide, Required, Read-Only, Disable, Value Reset) combine with AND/OR logic across the standard operator set, including Is Empty, Is Not Empty, Contains, Exact Match, Starts With, Ends With, and Regex. That's the same system documented on the conditional logic feature page, nothing image-specific about it.

What are the real use cases for an image upload field in a form?

Product customization requests. A form where a customer uploads a reference image, a logo, or a photo they want printed, embroidered, or replicated on a custom product order.

Portfolio or work-sample submissions. Designer, photographer, or contractor application forms that ask for image samples of past work alongside the rest of the intake questions.

ID or document photo verification. Onboarding or verification flows that ask a user to upload a photo of an ID or document as part of a signup or application process.

Before/after photos for service quotes. Home service, repair, or renovation businesses collecting a photo of the current state of a space or item so they can scope a quote before a site visit.

Profile picture uploads. Membership sites, community platforms, or onboarding forms where a user sets a profile image as part of account setup.

Visual bug or issue reports. Support forms where a customer attaches a screenshot alongside their description, giving the support team visual context instead of a text-only report.

Real estate or listing photo submissions. Property listing intake forms where an owner or agent uploads photos of a property as part of the listing submission.

The through-line: the visitor has an image file ready to hand over, and the instant preview means they get visual confirmation they picked the right one before the form is even submitted.

What plan do you need?

Pro or Scale. Image Upload is not included on the free Basic plan. Current pricing is one-time and lifetime, check that page for the current figures before making a decision. Both Pro and Scale include the field, so the choice between them comes down to how many sites you're running and whether you need the commercial license for client work, not whether you get Image Upload at all. The features page has the full Advanced Fields list alongside it.

Frequently asked questions

What image formats does the Image Upload field accept?
Any image MIME type the visitor's browser recognizes, checked via the browser reporting the file's type as starting with image/. In practice that covers JPG, PNG, GIF, WEBP, SVG, and HEIC where the browser supports it. This is a wildcard MIME-type check, not a fixed list of accepted extensions, which is a different mechanism from Audio Upload's explicit extension allowlist.

How is Image Upload different from File Upload?
File Upload accepts any file type up to 50MB and has no thumbnail preview. Image Upload is scoped specifically to images, caps at 25MB, and generates an instant client-side thumbnail preview the moment a visitor selects a file, with configurable height, radius, aspect ratio, border, and shadow. If you need a visual confirmation of what a visitor uploaded, Image Upload is the right field, not File Upload.

Can visitors upload more than one image through this field?
Yes, when Allow Multiple is turned on in the Upload Settings panel. A Max Files stepper appears letting you set how many images a visitor can attach. Multiple images submit as a single comma-separated value of URLs rather than separate form fields, so account for that format if you're mapping the submission into a CRM or webhook.

Does Google Drive storage for Image Upload require a Google account connection?
Not through OAuth. It requires deploying your own Google Apps Script web app and pasting the resulting /exec URL into the Apps Script URL field. It's a self-hosted routing mechanism, the same one used across File Upload, Audio Upload, Video Upload, and Voice Recording. A deployment made for one of those fields works for Image Upload too.

Can I make the image upload field conditional on another field's answer?
Yes, using the same conditional logic system every other Forms Plugin field uses. The Conditions sub-panel supports Show/Hide, Required, Read-Only, Disable, and Value Reset, triggered by AND/OR rules across the standard operator set. For example: show the Image Upload field only if a visitor selects "photo verification" from a dropdown earlier in the form. The conditional logic page has the full rule builder details.

Bottom line

Image Upload is the field to reach for whenever a form needs a picture back from a visitor, and its instant client-side thumbnail preview is what sets it apart from File Upload, Audio Upload, and Video Upload, none of which offer a visual preview. It accepts any image type the browser recognizes rather than a fixed extension list, caps at the same 25MB ceiling as the other media upload fields, and supports both default hosted storage and self-deployed Google Drive storage with an Allow Multiple option for forms that need more than one image. Available on Pro and Scale, with styling and conditional logic working identically to every other field in the plugin.