Image Upload ✅
Upload images with a full user-cropping UX to get that perfect profile photo.
REQUIRES BASIN Webflow's Business Plan forms do not accept submitted 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.
UploadCare support is being explored.
Current Features
Restrict the image upload to specific pixel dimensions
Uploads with the form data to Basin
Supports most any image type, including SVGs
If desired, the original uncropped image can also be captured for refinement
User Features
Upload a single image, by drag-drop, or click-and-browse
Pan ( drag ) and zoom ( scrollwheel ) to get the exact crop you want
Designer Features
Customization of the art and messaging
Safety-check on form attributes setup
Usage Notes
Place the component within a Webflow form
Setup your Webflow form for the Basin service ( usebasin.com )
Ensure these two properties are added to your form element ( not the Form Block )
enctype=multipart/form-dataaccept-charset=UTF-8
Properties
Name
Text
The input field name for your form submission data
Width (px)
Number
Width of the cropped photo in px
Height (px)
Number
Height of the cropped photo in px
Upload Full Image
Boolean
Enable if you also want to receive the uncropped image for reprocessing
Instructions
Text ( multiline )
Allows you to customize your instructions
Notes
Text
Additional note, defaults to the image size
Icon
Image
Specify a custom icon if you like. SVGs are best.
Icon Size
Variant
Choose Small, Medium, or Large icon size.
Debug
Boolean
Debug mode- shows any problem indicators in the designer, and emits console logs for testing.
Styling
You can specify;
The icon
The instructional message ( multiline )
The note ( defaults to show the size )
Future
Fixed size mode, with scaling
Ratio mode, with scaling
Sizing modes
Aspect ratio - Fixed, predefined, or Versatile
Final dimensions
Planned;
UploadCare support
Specify image type restrictions
? Auto-convert uploaded data
Upload final image
And possibly source image
And possibly crop data
Cropping mask shapes
Circle
Rounded corners
Possibly shape-crop, or simply use that as a reference and let the designer handle the masking in the HTML
Pointer-centered zoom-in
Last updated