V15: Improve the dropzone for Image Cropper

[iOvergaard]

Description

The Image Cropper now uses the new dropzone input <umb-dropzone-input /> to share the logic and user experience. The dropzone input features an uploader UI with manual and auto cancel of uploads, and users can follow the upload progress.

Additionally, the Image Cropper now supports hosting the Backoffice on another URL by prefixing the image URLs with the server URL.

Lastly, an update has been made to read the object URL directly from the File object rather than try to load the entire image into memory. This is usually not a problem for images, but we fixed it elsewhere as well, allowing browsers to handle files in the gigabyte range.

Fixes AB#49148

How to test

1. Create an Image Cropper property and verify that you can drag & drop files
2. Try, if you can, to navigate away from the page as a large upload is in progress and verify, that the network request was cancelled

[Copilot]

Pull Request Overview

This pull request improves the Image Cropper by integrating a new dropzone input component, streamlining the file handling via object URLs, and supporting backoffice hosting on an external URL.

• Introduces a custom getter/setter for file handling that uses URL.createObjectURL for improved memory management.
• Replaces the previous file uploading logic with a new dropzone mechanism and updates styling accordingly.
• Adjusts the focal point getter order in the image cropper preview for cleaner code.

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

File	Description
src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-field.element.ts	Updates file property handling by creating object URLs and adding a server URL prefix to the source.
src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/input-image-cropper.element.ts	Refines the dropzone handling to work with new uploadable items and integrates updated temporary file logic.
src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-preview.element.ts	Reorders the focalPoint getter implementation for consistency.

[Copilot]

Pull Request Overview

This pull request refactors the Image Cropper to use a new dropzone input component, improves file handling by generating object URLs directly from File objects, and adds support for hosting the Backoffice on a separate URL by prefixing image URLs.

• Replaces FileReader logic with URL.createObjectURL and manages object URLs in the image cropper field.
• Updates the dropzone component and upload cancellation behavior in the image cropper input.
• Minor reordering of getter/setter implementation for the focal point in the preview component.

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File	Description
src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-field.element.ts	Updates file handling to use object URLs and prefixes image URLs with a server URL from context.
src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/input-image-cropper.element.ts	Adjusts dropzone behavior and file upload cancellation mechanism using the new dropzone input API.
src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-preview.element.ts	Reorders the getter/setter for focalPoint for improved clarity.

Comments suppressed due to low confidence (3)

src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-field.element.ts:54

• Consider revoking the object URL in the component's disconnectedCallback as well, to ensure no memory leak occurs if the component is removed before file cleanup.

this.fileDataUrl = URL.createObjectURL(file);

src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/input-image-cropper.element.ts:92

• [nitpick] Verify that stopping immediate propagation is intentional, as it might prevent other important event listeners on the dropzone from executing.

e.stopImmediatePropagation();

src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-preview.element.ts:25

• [nitpick] For improved clarity and consistency, consider placing the getter for focalPoint before the setter.

get focalPoint() {

[leekelleher]

Tested out, working as expected. 🚀

For testing the navigate away/cancelling, I used a 30Mb sample image and set Chrome network throttle to 4G for slower upload time. Navigating away cancels the request. 👍