# Image Upload ✅

<figure><img src="/files/tkkEY0Bjlz5pPV7e7DPV" 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="/files/NjLJVrdMA08dZoz9IqIz" 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;


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://sygnal.gitbook.io/sygnal-webflow-components/cc/sygnal-forms/image-upload.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.