V15: Improve the dropzone for Upload Field

[iOvergaard]

Description

The Upload Field 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.

Fixes AB#51190

How to test

1. Create an Upload Field property and verify that you can drag & drop files
2. Go to the Media Library, create a new media item and verify that drag & drop works there as well
3. Try, if you can, to upload a file large enough to have time to click the "Cancel" button and verify that the network request is cancelled

[Copilot]

Pull Request Overview

This PR updates the Upload Field component to use a new dropzone input, aligning its behavior for file uploads, drag & drop, and upload cancellation. Key changes include replacing the old file upload preview logic with the new dropzone component, refactoring file and cancellation state management, and updating the dropzone manager to handle cancelled uploads appropriately.

Reviewed Changes

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

File	Description
src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/input-upload-field.element.ts	Refactored to use the new dropzone component, including property and event handling updates, and removal of legacy temporary file logic.
src/Umbraco.Web.UI.Client/src/packages/media/dropzone/dropzone-manager.class.ts	Adjusted upload status handling by checking for cancelled uploads before success, and removed an unused helper method.

Comments suppressed due to low confidence (2)

src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/input-upload-field.element.ts:31

• [nitpick] Consider renaming '_file' to '_uploadedFile' to provide clearer context about its purpose within the component.

temporaryFileId: this._file?.temporaryFile.temporaryUnique,

src/Umbraco.Web.UI.Client/src/packages/media/dropzone/dropzone-manager.class.ts:130

• Verify that handling cancelled uploads here aligns with the intended upload flow, as this logic change may affect how cancelled uploads are processed.

if (uploaded.status === TemporaryFileStatus.CANCELLED) {

[leekelleher]

Tested out, all working as expected! 🚀