> For the complete documentation index, see [llms.txt](https://sygnal.gitbook.io/sygnal-webflow-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sygnal.gitbook.io/sygnal-webflow-components/cc/sygnal-forms/image-upload.md).

# Image Upload ✅

Upload images with a full user-cropping UX to get that perfect profile photo.

<figure><img src="https://2784689242-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fijt1q5GHhhw4y4FjjPNG%2Fuploads%2FL3TD7RYo33qU25XpttJE%2F2025-10-05_19-11-32.gif?alt=media&amp;token=d3f24317-3c62-4f49-9f13-b2ddeabda961" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**REQUIRES BASIN, OR A CUSTOM API** \
Webflow's Business Plan forms do not accept multipart-mime file content.  Instead the file upload process occurs immediately on addition of the file, rather than at form submit. We currently do not have a way to integrate with that mechanism.&#x20;

You can use Basin's built-in file upload support, or you can build an API that accepts multipart-mime data along with your form data for application and CMS integration builds. &#x20;

*UploadCare and FileStack support are being explored.*&#x20;
{% endhint %}

## Current Features &#x20;

* Restrict the image upload to specific pixel dimensions&#x20;
* Uploads with the form data to Basin&#x20;
* Supports most any image type, including SVGs&#x20;
* If desired, the original uncropped image can also be captured for refinement&#x20;

{% hint style="danger" %}
**SVG FILES** \
Technically, SVG files are supported but the sizing calculations do not crop SVG's correctly.&#x20;
{% endhint %}

### User Features&#x20;

* Upload a single image, by drag-drop, or click-and-browse&#x20;
* Pan ( drag ) and zoom ( scrollwheel ) to get the exact crop you want&#x20;

### Designer Features

* Customization of the art and messaging&#x20;
* Safety-check on form attributes setup&#x20;

## Usage Notes&#x20;

* Place the component within a Webflow form&#x20;
* Setup your Webflow form for the Basin service ( usebasin.com )&#x20;
* Ensure these two properties are added to your form element ( not the Form Block )&#x20;
  * `enctype` = `multipart/form-data`&#x20;
  * `accept-charset` = `UTF-8`&#x20;

## Properties

<table><thead><tr><th width="168.66668701171875">Property</th><th width="156.333251953125">Type </th><th>Description </th></tr></thead><tbody><tr><td>Name</td><td>Text</td><td>The input field name for your form submission data</td></tr><tr><td>Width (px)</td><td>Number</td><td>Width of the cropped photo in px</td></tr><tr><td>Height (px)</td><td>Number</td><td>Height of the cropped photo in px</td></tr><tr><td>Upload Full Image</td><td>Boolean</td><td>Enable if you also want to receive the uncropped image for reprocessing </td></tr><tr><td>Instructions</td><td>Text ( multiline )</td><td>Allows you to customize your instructions</td></tr><tr><td>Notes</td><td>Text</td><td>Additional note, defaults to the image size </td></tr><tr><td>Icon</td><td>Image</td><td>Specify a custom icon if you like. SVGs are best.</td></tr><tr><td>Icon Size</td><td>Variant</td><td>Choose Small, Medium, or Large icon size.</td></tr><tr><td>Debug</td><td>Boolean</td><td>Debug mode- shows any problem indicators in the designer, and emits console logs for testing. </td></tr></tbody></table>

## Styling

<figure><img src="https://2784689242-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fijt1q5GHhhw4y4FjjPNG%2Fuploads%2Feukj1dtEHN9GYrdiNP7o%2Fimage.png?alt=media&amp;token=5ae08b8c-360c-473b-b49e-665a7d4d1879" alt=""><figcaption></figcaption></figure>

You can specify;

* The icon
* The instructional message ( multiline )&#x20;
* The note ( defaults to show the size )&#x20;

## Future&#x20;

Fixed size mode, with scaling&#x20;

Ratio mode, with scaling&#x20;

Sizing modes

* Aspect ratio - Fixed, predefined, or Versatile&#x20;
* Final dimensions&#x20;

Planned;

* UploadCare support&#x20;

Specify image type restrictions

* ? Auto-convert uploaded data&#x20;

Upload final image&#x20;

* And possibly source image&#x20;
* And possibly crop data&#x20;

Cropping mask shapes&#x20;

* Circle
* Rounded corners&#x20;
* Possibly shape-crop, or simply use that as a reference and let the designer handle the masking in the HTML&#x20;

Pointer-centered zoom-in&#x20;