Skip to main content

Web2PrintImageAttributeController

You get this controller when useAttribute(...) resolves a Web2Print image attribute. It lets a shopper upload an image and position, scale, and rotate it on the print. The configured value stores the uploaded image id/image_url plus its transform.

import { useAttribute } from "@expivi/product-configurator";

const attribute = useAttribute(configurator, attributeCid);

Uploading and transforming an image​

uploadImage(...) validates the file (size and extension, per settings), uploads it, and stores the result. Then adjust the transform.

const response = await attribute.uploadImage(file, progress => {
  console.log(`${progress}%`);
});

attribute.updatePosition(20, 40);
attribute.updateScale(1.5); // clamped to settings min/max
attribute.updateRotation(90);

// Clear the image again
attribute.removeImage();

API​

uploadImage(file, onProgress?): Promise<ImageUploadResponse>​

Validates the file against the attribute's max_filesize and allowed_extensions settings (throwing on violation), uploads it through the image upload service, stores the returned image id and URL with default transform values, and returns the upload response.

setImageProperty(property, value): void​

Updates one field inside the image value object (e.g. offsetX, scale, rotation, image_url).

updatePosition(offsetX, offsetY): void​

Updates the image offsets.

updateScale(scale): void​

Updates scale, clamped to scaling_settings.min_scale/max_scale when those are configured.

updateRotation(rotation): void​

Updates rotation.

resetImage(): void​

Clears the uploaded image reference and restores default offsets, scale, and rotation from settings.

removeImage(): void​

Alias for resetImage().

Serialization emits nothing until an image id exists. For all other members, see the Common Attribute API.