@sd-angular/core 19.0.46 → 19.0.47

package/components/upload-file/src/upload-file.component.d.ts

@@ -66,8 +66,34 @@ export declare class SdUploadFile<TArgs = any> {
      */
     getFiles: () => Promise<File[]>;
     /**
-     * Thực hiện upload các file và gán giá trị, output trả ra mảng idOrKeys.
-     * HÀM NÀY BẮT BUỘC PHẢI GỌI TRƯỚC KHI GỌI VỀ SERVER.
+     * Upload the local files referenced by the model, then replace their temporary
+     * keys with server IDs. Call and await this method before submitting the model.
+     *
+     * Files are read from the model and local snapshots/cache, so pending or failed metadata
+     * requests do not omit files. Each distinct local key is uploaded once per
+     * batch; duplicate occurrences retain their positions and share the returned ID.
+     * Server IDs and URLs are preserved even when they have no preview metadata.
+     *
+     * Concurrent calls share the active batch. Changes made while it is pending
+     * are preserved: removed keys stay removed, reordering is retained, and newly
+     * added local keys remain pending for a subsequent call. After destruction, no
+     * new upload starts and an in-flight upload cannot update the model.
+     *
+     * @returns A promise resolving to void after the batch finishes. The preview
+     * metadata refresh may still be pending. With no local files this is a no-op.
+     * A missing upload handler displays the configuration error and resolves
+     * without changing the model or cache.
+     * @throws The upload handler's error, without changing the model or cache.
+     * @throws Error if the handler does not return exactly one non-empty string ID
+     * per distinct local key; the model and cache are retained in that case.
+     *
+     * @example
+     * import { SdUploadFile } from '@sd-angular/core/components/upload-file';
+     *
+     * async function submit(control: SdUploadFile) {
+     *   await control.upload();
+     *   return control.model(); // Server IDs/URLs for the uploaded batch.
+     * }
      */
     upload: () => Promise<void>;
     /**

package/fesm2022/sd-angular-core-components-upload-file.mjs

@@ -199,6 +199,9 @@ class SdUploadFile {
     #canvas2 = `C${Utilities.generateUuid()}`;
     #name = Utilities.generateUuid();
     #formGroup;
+    #uploadPromise;
+    #destroyed = false;
+    #localFiles = new Map();
     formControl = new SdFormControl();
     // why: component là OnPush nhưng template đọc formControl.touched/errors như thuộc tính
     // THƯỜNG (không reactive). Khi cha submit (markAllAsTouched) hoặc validator gắn lỗi, không
@@ -324,19 +327,34 @@ class SdUploadFile {
             }
         });
         // Reactive sync for model changes
-        effect(() => {
-            const values = this.model() || [];
+        effect(onCleanup => {
+            const modelValue = this.model();
+            const values = modelValue || [];
+            let active = true;
+            let cancelReaders;
+            // why: model có thể đổi trước lần effect kế tiếp; cleanup thôi chưa chặn được
+            // Promise cũ resolve trong khoảng đó. Destroy cũng phải chặn mọi emit/ghi state.
+            const isCurrent = () => active && !this.#destroyed && this.model() === modelValue;
+            onCleanup(() => {
+                active = false;
+                cancelReaders?.();
+            });
             this.formControl.setValue(values);
             if (Array.isArray(values)) {
                 this.#details(values).then(previewFiles => {
+                    if (!isCurrent())
+                        return;
                     this.previewFiles.set(previewFiles);
                     this.filesChanged.emit(this.previewFiles()
                         .map(e => e.file || e.idOrKey || e.src)
                         .filter(val => !!val));
-                    this.#preview();
+                    // why: consumer của filesChanged có thể đổi model hoặc destroy đồng bộ.
+                    if (isCurrent())
+                        cancelReaders = this.#preview(isCurrent);
                 });
             }
             else {
+                this.#localFiles.clear();
                 this.previewFiles.set([]);
             }
         });
@@ -364,6 +382,8 @@ class SdUploadFile {
         });
         // Cleanup on destroy
         this.#destroyRef.onDestroy(() => {
+            this.#destroyed = true;
+            this.#localFiles.clear();
             this.#revokePreviewBlobURLs();
             this.#formGroup?.removeControl(this.#name);
         });
@@ -495,17 +515,28 @@ class SdUploadFile {
         }
         return null;
     };
-    #preview = () => {
+    #preview = (isCurrent) => {
+        const readers = [];
         for (const previewFile of this.previewFiles().filter(e => e.file)) {
             const reader = new FileReader();
             reader.onload = evt => {
+                if (!isCurrent())
+                    return;
                 previewFile.previewSrc = evt.target.result;
                 previewFile.isPreviewImage = previewFile.file?.type.split('/')[0] === 'image' && previewFile.file?.type !== 'image/tiff';
                 // trigger signal update
                 this.previewFiles.set([...this.previewFiles()]);
             };
+            readers.push(reader);
             reader.readAsDataURL(previewFile.file);
         }
+        return () => {
+            for (const reader of readers) {
+                reader.onload = null;
+                if (reader.readyState === FileReader.LOADING)
+                    reader.abort();
+            }
+        };
     };
     // ─── Public Event Handlers ────────────────────────────────────────────
     onUpload = () => {
@@ -535,6 +566,7 @@ class SdUploadFile {
     };
     #uploadFile = async (originFiles) => {
         const currentModel = [...(this.model() || [])];
+        const pickedFiles = new Map();
         if (originFiles.length + currentModel.length > this.max()) {
             this.#notifyService.warning(this.#i18n.t('core.component.upload-file.too-many-files'));
             return;
@@ -551,9 +583,15 @@ class SdUploadFile {
             }
             const hashedKey = this.#uploadFileService.add(file);
             if (hashedKey) {
+                pickedFiles.set(hashedKey, file);
                 currentModel.push(hashedKey);
             }
         }
+        // why: giữ batch riêng qua từng await validate/resize; cache chung và effect của
+        // model cũ có thể mất hash trước khi picker hoàn tất. Chỉ nhận ownership khi commit.
+        for (const [key, file] of pickedFiles)
+            this.#localFiles.set(key, file);
+        this.#snapshotFiles(currentModel);
         this.model.set(currentModel);
         this.#touch();
     };
@@ -685,50 +723,81 @@ class SdUploadFile {
         return items.map(e => e?.file).filter(file => !!file);
     };
     /**
-     * Thực hiện upload các file và gán giá trị, output trả ra mảng idOrKeys.
-     * HÀM NÀY BẮT BUỘC PHẢI GỌI TRƯỚC KHI GỌI VỀ SERVER.
+     * Upload the local files referenced by the model, then replace their temporary
+     * keys with server IDs. Call and await this method before submitting the model.
+     *
+     * Files are read from the model and local snapshots/cache, so pending or failed metadata
+     * requests do not omit files. Each distinct local key is uploaded once per
+     * batch; duplicate occurrences retain their positions and share the returned ID.
+     * Server IDs and URLs are preserved even when they have no preview metadata.
+     *
+     * Concurrent calls share the active batch. Changes made while it is pending
+     * are preserved: removed keys stay removed, reordering is retained, and newly
+     * added local keys remain pending for a subsequent call. After destruction, no
+     * new upload starts and an in-flight upload cannot update the model.
+     *
+     * @returns A promise resolving to void after the batch finishes. The preview
+     * metadata refresh may still be pending. With no local files this is a no-op.
+     * A missing upload handler displays the configuration error and resolves
+     * without changing the model or cache.
+     * @throws The upload handler's error, without changing the model or cache.
+     * @throws Error if the handler does not return exactly one non-empty string ID
+     * per distinct local key; the model and cache are retained in that case.
+     *
+     * @example
+     * import { SdUploadFile } from '@sd-angular/core/components/upload-file';
+     *
+     * async function submit(control: SdUploadFile) {
+     *   await control.upload();
+     *   return control.model(); // Server IDs/URLs for the uploaded batch.
+     * }
      */
-    upload = async () => {
-        const items = this.previewFiles()?.filter(val => !!val) || [];
-        if (!Array.isArray(items)) {
-            this.model.set([]);
+    upload = () => {
+        if (this.#destroyed)
+            return Promise.resolve();
+        if (!this.#uploadPromise) {
+            // why: hai lần submit đồng thời phải dùng chung batch, tránh upload trùng File.
+            this.#uploadPromise = this.#uploadPendingFiles().finally(() => {
+                this.#uploadPromise = undefined;
+            });
+        }
+        return this.#uploadPromise;
+    };
+    #uploadPendingFiles = async () => {
+        const pending = [
+            ...new Map(this.#snapshotFiles(this.model())
+                .filter(entry => entry.file)
+                .map(entry => [entry.key, entry])).values(),
+        ];
+        if (!pending.length)
+            return;
+        const uploadHandler = this.#getUploadHandler();
+        if (!uploadHandler) {
+            const key = this.key();
+            this.#notifyService.error(key === undefined
+                ? this.#i18n.t('core.component.upload-file.no-configuration')
+                : this.#i18n.t('core.component.upload-file.no-configuration-key', { key }));
             return;
         }
-        const results = [];
-        const uploadedFiles = items.map(e => e?.file).filter(file => !!file);
-        let idOrKeys = [];
-        if (uploadedFiles.length) {
-            const uploadHandler = this.#getUploadHandler();
-            if (uploadHandler) {
-                idOrKeys = await uploadHandler(uploadedFiles, this.args()).then(results => {
-                    for (const uploadedFile of uploadedFiles) {
-                        this.#uploadFileService.remove(uploadedFile);
-                    }
-                    return results;
-                });
-            }
-            else {
-                const key = this.key();
-                this.#notifyService.error(key === undefined
-                    ? this.#i18n.t('core.component.upload-file.no-configuration')
-                    : this.#i18n.t('core.component.upload-file.no-configuration-key', { key }));
-            }
+        const idOrKeys = await uploadHandler(pending.map(entry => entry.file), this.args());
+        if (!Array.isArray(idOrKeys) ||
+            idOrKeys.length !== pending.length ||
+            pending.some((_, index) => typeof idOrKeys[index] !== 'string' || !idOrKeys[index])) {
+            throw new Error('[sd-upload-file] Upload must return one non-empty string ID per file.');
         }
-        let idx = 0;
-        for (const item of items) {
-            if (!item.file) {
-                if (item.idOrKey) {
-                    results.push(item.idOrKey);
-                }
-            }
-            else {
-                if (idOrKeys?.[idx]) {
-                    results.push(idOrKeys[idx]);
-                    idx++;
-                }
-            }
+        const replacements = new Map(pending.map((entry, index) => [entry.key, idOrKeys[index]]));
+        for (const entry of pending) {
+            this.#uploadFileService.remove(entry.key.toString());
+            this.#localFiles.delete(entry.key.toString());
+        }
+        if (this.#destroyed)
+            return;
+        // why: thay đúng hash trên model MỚI NHẤT, không phục hồi file đã xoá hoặc
+        // ghi đè các thao tác thêm/sắp xếp trong lúc upload đang chờ.
+        const values = this.model();
+        if (Array.isArray(values)) {
+            this.model.set(values.map(key => replacements.get(key) ?? key));
         }
-        this.model.set(results);
     };
     /**
      * Mở popup preview ảnh.
@@ -771,20 +840,23 @@ class SdUploadFile {
      * cần render ra ảnh/tệp tương ứng.
      */
     #details = async (keys) => {
-        if (!Array.isArray(keys) || !keys.length) {
+        const entries = this.#snapshotFiles(keys);
+        if (!entries.length) {
             return [];
         }
-        const idOrKeys = keys.filter(key => !!key && !this.#isCdn(key) && !this.#isHashedKey(key));
+        const idOrKeys = entries.filter(entry => !this.#isCdn(entry.key) && !entry.file).map(entry => entry.key);
         let detailsList = [];
         const detailsHandler = this.#getDetailsHandler();
         if (idOrKeys.length && detailsHandler) {
-            detailsList = await detailsHandler(idOrKeys, this.args()).catch(error => {
+            try {
+                detailsList = await detailsHandler(idOrKeys, this.args());
+            }
+            catch (error) {
                 console.error(error);
-                return [];
-            });
+            }
         }
         const results = [];
-        for (const key of keys.filter(val => !!val)) {
+        for (const { key, file } of entries) {
             if (this.#isCdn(key)) {
                 const cdn = key?.toString();
                 const extension = this.#getExtension(cdn);
@@ -799,9 +871,7 @@ class SdUploadFile {
                     extension,
                 });
             }
-            else if (this.#isHashedKey(key)) {
-                const hashedKey = key?.toString();
-                const file = this.#uploadFileService.get(hashedKey);
+            else if (file) {
                 const lastDot = file.name.lastIndexOf('.');
                 const extension = file.name.substring(lastDot + 1);
                 const isPreviewImage = (file.type.split('/')[0] === 'image' && file.type !== 'image/tiff') || IsImage(extension);
@@ -842,10 +912,26 @@ class SdUploadFile {
             return false;
         return idOrKey.startsWith('http');
     };
-    #isHashedKey = (idOrKey) => {
-        if (typeof idOrKey !== 'string')
-            return false;
-        return this.#uploadFileService.isHashedKey(idOrKey);
+    #snapshotFiles = (keys) => {
+        const values = Array.isArray(keys) ? keys : [];
+        const activeKeys = new Set(values);
+        for (const key of this.#localFiles.keys()) {
+            if (!activeKeys.has(key))
+                this.#localFiles.delete(key);
+        }
+        // why: cache có thể bị upload xoá trong lúc chờ details; giữ File theo snapshot
+        // của từng ô và request, kể cả khi ô khác upload cùng hash rồi xoá cache chung.
+        return values
+            .filter(key => !!key)
+            .map(key => {
+            let file = null;
+            if (typeof key === 'string' && !this.#isCdn(key)) {
+                file = this.#localFiles.get(key) ?? this.#uploadFileService.get(key);
+                if (file)
+                    this.#localFiles.set(key, file);
+            }
+            return { key, file };
+        });
     };
     #getExtension = (cdn) => {
         if (!cdn)