cabloy 5.1.136 → 5.1.138

package/zova/src/suite/cabloy-basic/modules/basic-image/src/component/formFieldImage/controller.tsx

@@ -1,15 +1,14 @@
 import type { TableIdentity } from 'table-identity';
+import type { VNode } from 'vue';
 import type { IComponentOptions } from 'zova';
 import type { IJsxRenderContextFormField } from 'zova-module-a-form';
 import type { ControllerFormField, IFormFieldComponentOptions } from 'zova-module-a-form';
 import type { IImageSceneRecord, IResourceFormFieldOptionsBase } from 'zova-module-a-openapi';
 
 import { classes } from 'typestyle';
-import { CircleStencil, Cropper, RectangleStencil } from 'vue-advanced-cropper';
 import { BeanControllerBase, ClientOnly, Use } from 'zova';
 import { Controller } from 'zova-module-a-bean';
 import { ZFormField } from 'zova-module-a-form';
-import { $QueryEnsureLoaded } from 'zova-module-a-model';
 import {
   buildImagePreviewTitle,
   inferImageRelationName,
@@ -18,8 +17,12 @@ import {
 } from 'zova-module-basic-image';
 
 import type { IImageTransformOptions } from '../../types/image.js';
+import type {
+  IImageUploaderRenderState,
+  IImageUploaderResult,
+} from '../imageUploader/controller.jsx';
 
-import { ModelImage } from '../../model/image.js';
+import { ZImageUploader } from '../../.metadata/component/imageUploader.js';
 import 'vue-advanced-cropper/dist/style.css';
 
 declare module 'zova-module-a-openapi' {
@@ -58,12 +61,6 @@ export interface ControllerFormFieldImageProps extends IFormFieldComponentOption
   options?: IResourceFormFieldImageOptions;
 }
 
-interface IUploadPolicyState {
-  acceptAttr: string;
-  multiple: boolean;
-  pending: boolean;
-}
-
 interface IImagePreviewItem {
   id: TableIdentity;
   url?: string;
@@ -92,16 +89,12 @@ export class ControllerFormFieldImage extends BeanControllerBase {
 
   static $componentOptions: IComponentOptions = { inheritAttrs: false, deepExtendDefault: true };
 
-  fileInputRef?: HTMLInputElement;
   errorMessage?: string;
-  isUploading = false;
+  effectiveMultiple = false;
   currentValue?: TableIdentity | TableIdentity[] | string;
   currentOptions: IResourceFormFieldImageOptions = {};
   $$formField?: ControllerFormField;
 
-  @Use()
-  $$modelImage: ModelImage;
-
   uploadedPreviewMap: Record<string, IImagePreviewItem> = {};
 
   @Use({ injectionScope: 'host' })
@@ -120,82 +113,142 @@ export class ControllerFormFieldImage extends BeanControllerBase {
           this.$$formField = $$formField;
           this.currentValue = propsBucket.value as any;
           this.currentOptions = propsBucket.options ?? {};
-          const uploadPolicyState = this._getUploadPolicyState(this.currentOptions);
-          const items = this._getPreviewItems(propsBucket.value, uploadPolicyState.multiple);
-          const maxCount = this._getMaxCount(this.currentOptions);
           const hasValidationError = !$$formField.field.state.meta.isValid;
-          const cardClass = classes(
-            'rounded-box border border-base-300 bg-base-100 p-4',
-            (hasValidationError || !!this.errorMessage) && 'border-error',
-            props.class,
-          );
+          const imageScene = this.currentOptions.imageScene;
+          if (!imageScene) {
+            return this._renderUploadSceneRequired(
+              hasValidationError,
+              props.class,
+              propsBucket.options?.placeholder,
+            );
+          }
           return (
-            <div class={cardClass}>
-              <ClientOnly>
-                <input
-                  ref={ref => {
-                    this.fileInputRef = ref as HTMLInputElement;
-                  }}
-                  class="hidden"
-                  type="file"
-                  accept={uploadPolicyState.acceptAttr}
-                  multiple={uploadPolicyState.multiple}
-                  onChange={event => {
-                    void this._handleFileChange(event, propsBucket.disableNotifyChanged);
-                  }}
-                />
-              </ClientOnly>
-              <div class="flex flex-wrap items-center gap-3">
-                {items.length < maxCount && (
-                  <button
-                    type="button"
-                    disabled={this.isUploading || uploadPolicyState.pending}
-                    class={classes(
-                      'btn btn-primary',
-                      (this.isUploading || uploadPolicyState.pending) && 'btn-disabled',
-                    )}
-                    onClick={() => {
-                      if (this.isUploading || uploadPolicyState.pending) return;
-                      this._applyInputPolicy(uploadPolicyState);
-                      this.fileInputRef?.click();
-                    }}
-                  >
-                    {this._getUploadButtonText(items.length, uploadPolicyState.multiple)}
-                  </button>
-                )}
-                {this.isUploading && (
-                  <span class="inline-flex items-center gap-2 text-sm text-base-content/70">
-                    <span class="loading loading-spinner loading-sm text-primary"></span>
-                    {this.scope.locale.Uploading()}
-                  </span>
-                )}
-                {!items.length && !this.isUploading && (
-                  <span class="text-sm text-base-content/60">
-                    {propsBucket.options?.placeholder ?? this.scope.locale.NoImageSelected()}
-                  </span>
-                )}
-              </div>
-              {!!this.errorMessage && <p class="mt-3 text-sm text-error">{this.errorMessage}</p>}
-              {!!items.length && (
-                <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
-                  {items.map((item, index) => {
-                    return this._renderPreviewCard(
-                      item,
-                      index,
-                      items,
-                      false,
-                      propsBucket.disableNotifyChanged,
-                    );
-                  })}
-                </div>
-              )}
-            </div>
+            <ZImageUploader
+              imageScene={imageScene}
+              accept={this.currentOptions.accept}
+              mimeTypes={this.currentOptions.mimeTypes}
+              extensions={this.currentOptions.extensions}
+              maxSize={this.currentOptions.maxSize}
+              minSize={this.currentOptions.minSize}
+              multiple={this.currentOptions.multiple !== false}
+              onBeforeUpload={(fileCount, policy) => {
+                return this._validateUploadCount(fileCount, policy.multiple);
+              }}
+              crop={this._getCropOptions(this.currentOptions)}
+              resize={this.currentOptions.resize}
+              onUploadedBatch={(uploaded, policy) => {
+                this._handleUploaded(uploaded, propsBucket.disableNotifyChanged, policy.multiple);
+              }}
+              onError={error => {
+                this.errorMessage = error.message;
+              }}
+              slotDefault={state => {
+                const multiple = state.policy.multiple;
+                this.effectiveMultiple = multiple;
+                const items = this._getPreviewItems(propsBucket.value, multiple);
+                const maxCount = this._getMaxCount(this.currentOptions, multiple);
+                return this._renderUploadContent(
+                  state,
+                  items,
+                  maxCount,
+                  hasValidationError,
+                  props.class,
+                  propsBucket.options?.placeholder,
+                  propsBucket.disableNotifyChanged,
+                );
+              }}
+            ></ZImageUploader>
           );
         }}
       ></ZFormField>
     );
   }
 
+  private _renderUploadSceneRequired(
+    hasValidationError: boolean,
+    propsClass: string | undefined,
+    placeholder: string | undefined,
+  ): VNode {
+    const message = this.scope.locale.ImageUploadSceneRequired();
+    return (
+      <div
+        class={classes(
+          'rounded-box border border-base-300 bg-base-100 p-4',
+          (hasValidationError || !!this.errorMessage) && 'border-error',
+          propsClass,
+        )}
+      >
+        <span class="text-sm text-base-content/60">
+          {placeholder ?? this.scope.locale.NoImageSelected()}
+        </span>
+        <p class="mt-3 text-sm text-error">{message}</p>
+      </div>
+    );
+  }
+
+  private _renderUploadContent(
+    state: IImageUploaderRenderState,
+    items: IImagePreviewItem[],
+    maxCount: number,
+    hasValidationError: boolean,
+    propsClass: string | undefined,
+    placeholder: string | undefined,
+    disableNotifyChanged: boolean | undefined,
+  ): VNode {
+    const cardClass = classes(
+      'rounded-box border border-base-300 bg-base-100 p-4',
+      (hasValidationError || !!this.errorMessage || !!state.errorMessage) && 'border-error',
+      propsClass,
+    );
+    return (
+      <div class={cardClass}>
+        <div class="flex flex-wrap items-center gap-3">
+          {items.length < maxCount && (
+            <button
+              type="button"
+              disabled={state.isUploading || state.policy.pending}
+              class={classes(
+                'btn btn-primary',
+                (state.isUploading || state.policy.pending) && 'btn-disabled',
+              )}
+              onClick={state.chooseFiles}
+            >
+              {this._getUploadButtonText(items.length, state.policy.multiple)}
+            </button>
+          )}
+          {state.isUploading && (
+            <span class="inline-flex items-center gap-2 text-sm text-base-content/70">
+              <span class="loading loading-spinner loading-sm text-primary"></span>
+              {this.scope.locale.Uploading()}
+            </span>
+          )}
+          {!items.length && !state.isUploading && (
+            <span class="text-sm text-base-content/60">
+              {placeholder ?? this.scope.locale.NoImageSelected()}
+            </span>
+          )}
+        </div>
+        {!!(this.errorMessage || state.errorMessage) && (
+          <p class="mt-3 text-sm text-error">{this.errorMessage || state.errorMessage}</p>
+        )}
+        {!!items.length && (
+          <div
+            class={classes(
+              'mt-4 grid w-full gap-4',
+              state.policy.multiple
+                ? 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3'
+                : 'grid-cols-1 max-w-xl',
+            )}
+          >
+            {items.map((item, index) =>
+              this._renderPreviewCard(item, index, items, false, disableNotifyChanged),
+            )}
+          </div>
+        )}
+      </div>
+    );
+  }
+
   private _renderReadonlyPreset() {
     return (
       <ZFormField
@@ -203,7 +256,10 @@ export class ControllerFormFieldImage extends BeanControllerBase {
         slotDefault={({ propsBucket, props }) => {
           this.currentValue = propsBucket.value as any;
           this.currentOptions = propsBucket.options ?? {};
-          const items = this._getPreviewItems(propsBucket.value);
+          const items = this._getPreviewItems(
+            propsBucket.value,
+            Array.isArray(propsBucket.value) && this.currentOptions.multiple !== false,
+          );
           return <div class={props.class}>{this._renderReadonlyItems(items)}</div>;
         }}
       ></ZFormField>
@@ -216,8 +272,14 @@ export class ControllerFormFieldImage extends BeanControllerBase {
         <span class="text-sm text-base-content/60">{this.scope.locale.NoImageSelected()}</span>
       );
     }
+    const multiple = Array.isArray(this.currentValue) && this.currentOptions.multiple !== false;
     return (
-      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      <div
+        class={classes(
+          'grid gap-4',
+          multiple ? 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3' : 'grid-cols-1',
+        )}
+      >
         {items.map((item, index) => this._renderPreviewCard(item, index, items, true, false))}
       </div>
     );
@@ -300,143 +362,67 @@ export class ControllerFormFieldImage extends BeanControllerBase {
     return itemCount > 0 ? this.scope.locale.ReplaceImage() : this.scope.locale.SelectImage();
   }
 
-  private _getUploadPolicyQuery(options?: IResourceFormFieldImageOptions) {
-    return this.$$modelImage.getUploadPolicy(options?.imageScene as string | undefined);
-  }
-
-  private _getUploadPolicyState(options?: IResourceFormFieldImageOptions): IUploadPolicyState {
-    const query = this._getUploadPolicyQuery(options);
-    const policy = query?.data;
-    return {
-      acceptAttr: this._getAcceptAttr(options, policy),
-      multiple: this._getEffectiveMultiple(options, policy),
-      pending: query ? query.data === undefined && !!(query.isPending || query.isFetching) : false,
-    };
-  }
-
-  private _getCachedUploadPolicy(options?: IResourceFormFieldImageOptions) {
-    return this._getUploadPolicyQuery(options)?.data;
-  }
-
-  private async _waitForUploadPolicy(options?: IResourceFormFieldImageOptions) {
-    await $QueryEnsureLoaded(() => this._getUploadPolicyQuery(options));
-  }
-
   private _getEffectiveMultiple(
     options?: IResourceFormFieldImageOptions,
-    policy = this._getCachedUploadPolicy(options),
+    policyMultiple = this.effectiveMultiple,
   ) {
-    return !!(options?.multiple ?? policy?.multiple);
+    return policyMultiple && options?.multiple !== false;
   }
 
-  private _applyInputPolicy(uploadPolicyState: IUploadPolicyState) {
-    if (!this.fileInputRef) return;
-    this.fileInputRef.accept = uploadPolicyState.acceptAttr;
-    this.fileInputRef.multiple = uploadPolicyState.multiple;
+  private _getCropOptions(options: IResourceFormFieldImageOptions) {
+    if (!options.enableCrop) return undefined;
+    return {
+      labels: {
+        title: this.scope.locale.CropImage(),
+        adjust: this.scope.locale.AdjustImage(),
+        cancel: this.scope.locale.CancelCrop(),
+        apply: this.scope.locale.ApplyCrop(),
+      },
+      aspectRatio: options.cropAspectRatio,
+      shape: options.cropShape,
+    } as const;
   }
 
-  private async _handleFileChange(event: Event, disableNotifyChanged?: boolean) {
-    const input = event.target as HTMLInputElement;
-    const files = Array.from(input.files ?? []);
-    input.value = '';
-    if (files.length === 0) return;
-    this.errorMessage = undefined;
-    const options = this.currentOptions ?? {};
-    const uploadTarget = this._resolveUploadTarget();
-    this.isUploading = true;
-    try {
-      await this._waitForUploadPolicy(options);
-      const multiple = this._getEffectiveMultiple(options);
-      const currentIds = this._normalizeValueToImageIds(this.currentValue, multiple);
-      const filesToHandle = multiple ? files : files.slice(0, 1);
-      const maxCount = this._getMaxCount(options);
-      const nextCountCandidate = multiple
-        ? currentIds.length + filesToHandle.length
-        : filesToHandle.length;
-      if (nextCountCandidate > maxCount) {
-        this.errorMessage = this.scope.locale.TooManyImages(maxCount);
-        return;
-      }
-      const uploadedItems: IImagePreviewItem[] = [];
-      for (const file of filesToHandle) {
-        const validationMessage = this._validateFile(file, options);
-        if (validationMessage) {
-          this.errorMessage = validationMessage;
-          continue;
-        }
-        const preparedFile = await this._prepareFile(file, options);
-        if (!preparedFile) continue;
-        const uploaded = await this._uploadPreparedFile(
-          preparedFile,
-          file,
-          uploadTarget,
-          !!this._getCachedUploadPolicy(options)?.directUpload,
-        );
-        const item: IImagePreviewItem = {
-          id: uploaded.id,
-          url: uploaded.url,
-          filename: uploaded.filename,
-          width: uploaded.width,
-          height: uploaded.height,
-        };
-        this.uploadedPreviewMap[String(item.id)] = item;
-        uploadedItems.push(item);
-      }
-      if (uploadedItems.length === 0) return;
-      const nextIds = multiple
-        ? [...currentIds, ...uploadedItems.map(item => item.id)]
-        : [uploadedItems[uploadedItems.length - 1].id];
-      this._setFieldValue(nextIds, disableNotifyChanged, multiple);
-      this.errorMessage = undefined;
-    } catch (err: any) {
-      this.errorMessage = err?.message ?? this.scope.locale.ImageUploadFailed();
-    } finally {
-      this.isUploading = false;
-    }
+  private _validateUploadCount(fileCount: number, multiple: boolean) {
+    const currentIds = this._normalizeValueToImageIds(this.currentValue, multiple);
+    const maxCount = this._getMaxCount(this.currentOptions, multiple);
+    const nextCountCandidate = multiple ? currentIds.length + fileCount : Math.min(fileCount, 1);
+    return nextCountCandidate > maxCount ? this.scope.locale.TooManyImages(maxCount) : undefined;
   }
 
-  private async _uploadPreparedFile(
-    preparedFile: File,
-    sourceFile: File,
-    uploadTarget: { imageScene: string },
-    directUpload: boolean,
+  private _handleUploaded(
+    uploaded: IImageUploaderResult[],
+    disableNotifyChanged: boolean | undefined,
+    multiple: boolean,
   ) {
-    if (!directUpload) {
-      return await this.scope.api.image.upload({
-        ...uploadTarget,
-        image: preparedFile,
-      });
+    const currentIds = this._normalizeValueToImageIds(this.currentValue, multiple);
+    const maxCount = this._getMaxCount(this.currentOptions, multiple);
+    const uploadedItems = uploaded.map(item => this._createPreviewItem(item));
+    const nextCountCandidate = multiple
+      ? currentIds.length + uploadedItems.length
+      : uploadedItems.length;
+    if (nextCountCandidate > maxCount) {
+      this.errorMessage = this.scope.locale.TooManyImages(maxCount);
+      return;
     }
-
-    const mimeType = preparedFile.type || sourceFile.type;
-    const directUploadRes = await this.scope.api.image.createDirectUpload({
-      ...uploadTarget,
-      filename: preparedFile.name,
-      size: preparedFile.size,
-      mimeType,
-    });
-    const formData = new FormData();
-    formData.append('file', preparedFile);
-    const providerRes = await fetch(directUploadRes.uploadUrl, {
-      method: 'POST',
-      body: formData,
-    });
-    if (!providerRes.ok) {
-      throw new Error(`image direct upload failed: ${providerRes.status}`);
+    for (const item of uploadedItems) {
+      this.uploadedPreviewMap[String(item.id)] = item;
     }
-    return await this.scope.api.image.finalizeDirectUpload({
-      imageId: directUploadRes.id,
-    });
+    const nextIds = multiple
+      ? [...currentIds, ...uploadedItems.map(item => item.id)]
+      : [uploadedItems[uploadedItems.length - 1].id];
+    this.errorMessage = undefined;
+    this._setFieldValue(nextIds, disableNotifyChanged, multiple);
   }
 
-  private _resolveUploadTarget() {
-    const imageScene = this.currentOptions.imageScene;
-    if (!imageScene) {
-      throw new Error('should specify image upload scene');
-    }
+  private _createPreviewItem(uploaded: IImageUploaderResult): IImagePreviewItem {
     return {
-      imageScene,
-    } as const;
+      id: uploaded.id,
+      url: uploaded.url,
+      filename: uploaded.filename,
+      width: uploaded.width,
+      height: uploaded.height,
+    };
   }
 
   private _removeItem(imageId: TableIdentity, disableNotifyChanged?: boolean) {
@@ -445,7 +431,6 @@ export class ControllerFormFieldImage extends BeanControllerBase {
     const nextIds = currentIds.filter(item => String(item) !== String(imageId));
     delete this.uploadedPreviewMap[String(imageId)];
     this._setFieldValue(nextIds, disableNotifyChanged, multiple);
-    this.errorMessage = undefined;
   }
 
   private _setFieldValue(
@@ -526,306 +511,11 @@ export class ControllerFormFieldImage extends BeanControllerBase {
     return [];
   }
 
-  private _getMaxCount(options: IResourceFormFieldImageOptions) {
-    if (!this._getEffectiveMultiple(options)) return 1;
+  private _getMaxCount(options: IResourceFormFieldImageOptions, multiple = this.effectiveMultiple) {
+    if (!multiple) return 1;
     return Math.max(options.maxCount ?? 1, 1);
   }
 
-  private _getAcceptAttr(
-    options?: IResourceFormFieldImageOptions,
-    policy = this._getCachedUploadPolicy(options),
-  ) {
-    if (!options) return 'image/*';
-    if (typeof options.accept === 'string') return options.accept;
-    if (options.accept?.length) return options.accept.join(',');
-    const parts = [
-      ...(options.mimeTypes ?? policy?.mimeTypes ?? []),
-      ...(options.extensions ?? policy?.extensions ?? []),
-    ];
-    return parts.length > 0 ? parts.join(',') : 'image/*';
-  }
-
-  private _validateFile(file: File, options: IResourceFormFieldImageOptions) {
-    const acceptTokens = this._collectAcceptTokens(options);
-    if (acceptTokens.length > 0 && !this._matchesAccept(file, acceptTokens)) {
-      return this.scope.locale.InvalidImageType();
-    }
-    const maxSize = options.maxSize ?? this._getCachedUploadPolicy(options)?.maxSize;
-    if (typeof maxSize === 'number' && file.size > maxSize) {
-      return this.scope.locale.ImageTooLarge(this._formatBytes(maxSize));
-    }
-    if (options.minSize && file.size < options.minSize) {
-      return this.scope.locale.ImageTooSmall(this._formatBytes(options.minSize));
-    }
-    return undefined;
-  }
-
-  private _collectAcceptTokens(options: IResourceFormFieldImageOptions) {
-    const accept = options.accept
-      ? Array.isArray(options.accept)
-        ? options.accept
-        : options.accept.split(',')
-      : [];
-    const policy = this._getCachedUploadPolicy(options);
-    return [
-      ...accept,
-      ...(options.mimeTypes ?? policy?.mimeTypes ?? []),
-      ...(options.extensions ?? policy?.extensions ?? []),
-    ]
-      .map(item => item.trim().toLowerCase())
-      .filter(item => !!item);
-  }
-
-  private _matchesAccept(file: File, acceptTokens: string[]) {
-    const mimeType = file.type.toLowerCase();
-    const extension = this._getFileExtension(file.name);
-    return acceptTokens.some(token => {
-      if (token === 'image/*') return mimeType.startsWith('image/');
-      if (token.startsWith('.')) return extension === token;
-      if (token.endsWith('/*')) {
-        const prefix = token.slice(0, token.length - 1);
-        return mimeType.startsWith(prefix);
-      }
-      return mimeType === token;
-    });
-  }
-
-  private _getFileExtension(filename: string) {
-    const index = filename.lastIndexOf('.');
-    if (index === -1) return '';
-    return filename.slice(index).toLowerCase();
-  }
-
-  private async _prepareFile(file: File, options: IResourceFormFieldImageOptions) {
-    if (!process.env.CLIENT) return file;
-    let canvas: HTMLCanvasElement | undefined;
-    if (options.enableCrop) {
-      canvas = await this._openCropDialog(file, options);
-      if (!canvas) return undefined;
-    }
-    const resizeOptions = options.resize;
-    if (!canvas && !resizeOptions) {
-      return file;
-    }
-    const sourceCanvas = canvas ?? (await this._createCanvasFromFile(file));
-    const targetCanvas = this._resizeCanvas(sourceCanvas, resizeOptions);
-    return await this._canvasToFile(targetCanvas, file, resizeOptions);
-  }
-
-  private async _openCropDialog(file: File, options: IResourceFormFieldImageOptions) {
-    const src = URL.createObjectURL(file);
-    try {
-      return await new Promise<HTMLCanvasElement | undefined>(resolve => {
-        let settled = false;
-        let cropperRef: { getResult?: () => { canvas?: HTMLCanvasElement } } | undefined;
-        const dialog = this.$appModal.dialog(
-          {
-            title: this.scope.locale.CropImage(),
-            slotDefault: () => {
-              return (
-                <ClientOnly>
-                  <div class="space-y-4">
-                    <div class="h-105 overflow-hidden rounded-box bg-base-200">
-                      <Cropper
-                        ref={ref => {
-                          cropperRef = ref as any;
-                        }}
-                        class="h-full w-full"
-                        src={src}
-                        stencilComponent={
-                          options.cropShape === 'round' ? CircleStencil : RectangleStencil
-                        }
-                        stencilProps={{
-                          aspectRatio: options.cropAspectRatio,
-                        }}
-                        imageRestriction="stencil"
-                      ></Cropper>
-                    </div>
-                    <p class="text-sm text-base-content/70">{this.scope.locale.AdjustImage()}</p>
-                  </div>
-                </ClientOnly>
-              );
-            },
-            slotActions: modal => {
-              return (
-                <>
-                  <button
-                    type="button"
-                    class="btn btn-ghost"
-                    onClick={() => {
-                      if (settled) return;
-                      settled = true;
-                      modal.close();
-                      resolve(undefined);
-                    }}
-                  >
-                    {this.scope.locale.CancelCrop()}
-                  </button>
-                  <button
-                    type="button"
-                    class="btn btn-primary"
-                    onClick={() => {
-                      if (settled) return;
-                      const canvas = cropperRef?.getResult?.()?.canvas;
-                      settled = true;
-                      modal.close();
-                      resolve(canvas);
-                    }}
-                  >
-                    {this.scope.locale.ApplyCrop()}
-                  </button>
-                </>
-              );
-            },
-            onClose: () => {
-              if (settled) return;
-              settled = true;
-              resolve(undefined);
-            },
-          },
-          {
-            maxWidth: 960,
-            showCloseButton: true,
-            closeOnBackdrop: false,
-          },
-        );
-        void dialog;
-      });
-    } finally {
-      URL.revokeObjectURL(src);
-    }
-  }
-
-  private async _createCanvasFromFile(file: File) {
-    const src = URL.createObjectURL(file);
-    try {
-      return await this._createCanvasFromUrl(src);
-    } finally {
-      URL.revokeObjectURL(src);
-    }
-  }
-
-  private async _createCanvasFromUrl(src: string) {
-    const image = await this._loadImage(src);
-    const canvas = document.createElement('canvas');
-    canvas.width = image.naturalWidth || image.width;
-    canvas.height = image.naturalHeight || image.height;
-    const context = canvas.getContext('2d');
-    if (!context) throw new Error(this.scope.locale.ImageUploadFailed());
-    context.drawImage(image, 0, 0, canvas.width, canvas.height);
-    return canvas;
-  }
-
-  private _resizeCanvas(
-    sourceCanvas: HTMLCanvasElement,
-    resizeOptions?: IResourceFormFieldImageResizeOptions,
-  ) {
-    if (!resizeOptions?.width && !resizeOptions?.height) {
-      return sourceCanvas;
-    }
-    const sourceWidth = sourceCanvas.width;
-    const sourceHeight = sourceCanvas.height;
-    const fallbackRatio = sourceWidth / Math.max(sourceHeight, 1);
-    const targetWidth =
-      resizeOptions.width ?? Math.round((resizeOptions.height ?? sourceHeight) * fallbackRatio);
-    const targetHeight =
-      resizeOptions.height ?? Math.round(targetWidth / Math.max(fallbackRatio, 0.0001));
-    const canvas = document.createElement('canvas');
-    canvas.width = targetWidth;
-    canvas.height = targetHeight;
-    const context = canvas.getContext('2d');
-    if (!context) return sourceCanvas;
-    if (resizeOptions.background) {
-      context.fillStyle = resizeOptions.background;
-      context.fillRect(0, 0, targetWidth, targetHeight);
-    }
-    const fit = resizeOptions.fit ?? 'cover';
-    if (fit === 'cover' || fit === 'crop') {
-      const scale = Math.max(targetWidth / sourceWidth, targetHeight / sourceHeight);
-      const width = sourceWidth * scale;
-      const height = sourceHeight * scale;
-      const left = (targetWidth - width) / 2;
-      const top = (targetHeight - height) / 2;
-      context.drawImage(sourceCanvas, left, top, width, height);
-      return canvas;
-    }
-    const scaleContain = Math.min(targetWidth / sourceWidth, targetHeight / sourceHeight);
-    const scale = fit === 'scale-down' ? Math.min(1, scaleContain) : scaleContain;
-    const width = sourceWidth * scale;
-    const height = sourceHeight * scale;
-    const left = (targetWidth - width) / 2;
-    const top = (targetHeight - height) / 2;
-    context.drawImage(sourceCanvas, left, top, width, height);
-    return canvas;
-  }
-
-  private async _canvasToFile(
-    canvas: HTMLCanvasElement,
-    file: File,
-    resizeOptions?: IResourceFormFieldImageResizeOptions,
-  ) {
-    const mimeType = this._resolveMimeType(file.type, resizeOptions?.format);
-    const quality = this._resolveQuality(resizeOptions?.quality);
-    const blob = await new Promise<Blob>((resolve, reject) => {
-      canvas.toBlob(
-        result => {
-          if (!result) {
-            reject(new Error(this.scope.locale.ImageUploadFailed()));
-            return;
-          }
-          resolve(result);
-        },
-        mimeType,
-        quality,
-      );
-    });
-    return new File([blob], this._replaceExtension(file.name, mimeType), {
-      type: mimeType,
-      lastModified: Date.now(),
-    });
-  }
-
-  private _resolveMimeType(
-    fileType: string | undefined,
-    format?: IImageTransformOptions['format'],
-  ) {
-    if (format === 'jpeg') return 'image/jpeg';
-    if (format === 'png') return 'image/png';
-    if (format === 'webp') return 'image/webp';
-    if (format === 'avif') return 'image/avif';
-    if (fileType && fileType.startsWith('image/')) return fileType;
-    return 'image/jpeg';
-  }
-
-  private _resolveQuality(quality?: number) {
-    if (quality === undefined) return 0.92;
-    if (quality > 1) return Math.min(quality / 100, 1);
-    return quality;
-  }
-
-  private _replaceExtension(filename: string, mimeType: string) {
-    const ext =
-      mimeType === 'image/png'
-        ? '.png'
-        : mimeType === 'image/webp'
-          ? '.webp'
-          : mimeType === 'image/avif'
-            ? '.avif'
-            : '.jpg';
-    const index = filename.lastIndexOf('.');
-    if (index === -1) return `${filename}${ext}`;
-    return `${filename.slice(0, index)}${ext}`;
-  }
-
-  private _loadImage(src: string) {
-    return new Promise<HTMLImageElement>((resolve, reject) => {
-      const image = new Image();
-      image.onload = () => resolve(image);
-      image.onerror = () => reject(new Error(this.scope.locale.ImageUploadFailed()));
-      image.src = src;
-    });
-  }
-
   private async _openPreviewDialog(items: IImagePreviewItem[], currentIndex: number) {
     const passportCode = await this._ensureDeliveryPassportCode();
     const previewItems = items
@@ -879,14 +569,4 @@ export class ControllerFormFieldImage extends BeanControllerBase {
   private _resolvePreviewUrl(url: string, passportCode?: string) {
     return resolveImagePreviewUrl(url, this.sys.config.api.baseURL, passportCode);
   }
-
-  private _formatBytes(bytes: number) {
-    if (bytes >= 1024 * 1024) {
-      return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
-    }
-    if (bytes >= 1024) {
-      return `${Math.round(bytes / 1024)} KB`;
-    }
-    return `${bytes} B`;
-  }
 }