@salla.sa/twilight-components 2.14.540 → 2.14.541

package/dist/collection/components/salla-file-upload/salla-file-upload.js

@@ -2,6 +2,10 @@
  * Crafted with ❤ by Salla
  */
 import { h, Host } from "@stencil/core";
+import { formatDuration, formatBytesAsSize, getFilePondMaxFileSize, getMaxImagesCount, getMaxVideosCount, getTotalMaxFiles, getUploadErrorMessage, isImageMimeType, isVideoMimeType, parseSizeToBytes, shouldCountGalleryFile, shouldCountGalleryLimit, usesSplitCountLimits, } from "./upload-limits";
+import CancelIcon from "../../assets/svg/cancel.svg";
+import PlayIcon from "../../assets/svg/play-circle.svg";
+const VIDEO_METADATA_TIMEOUT_MS = 10000;
 export class SallaFileUpload {
     /**
      * Lazy load FilePond and all plugins
@@ -34,10 +38,29 @@ export class SallaFileUpload {
     constructor() {
         this.filePondLoaded = false;
         this.max_images_count = (count) => salla.lang.get('common.uploader.max_images_count', { count });
+        this.max_videos_count = (count) => salla.lang.get('common.uploader.max_videos_count', { count });
         this.max_count_hint = (count) => salla.lang.get('common.uploader.max_count_hint', { count });
+        this.video_too_large = (size) => salla.lang.get('common.uploader.video_too_large', { size });
+        this.video_too_long = (duration) => salla.lang.get('common.uploader.video_too_long', { duration });
         this.uploadedFiles = [];
         this.isListScrollerListenerAdded = false;
         this.showMaxCountHint = false;
+        this.previewFiles = [];
+        this.maxFilesNotified = false;
+        this.validationRejectedFileIds = new Set();
+        this.previewFilesSyncRaf = null;
+        /**
+         * Transient reservations for files currently passing add-validation, keyed by
+         * FilePond file id. FilePond runs beforeAddFile async and only inserts a file
+         * into `getFiles()` after validation resolves, so a batch of parallel picks
+         * would race if we counted the pond alone. We reserve a slot here synchronously
+         * for the in-flight window and always release it in `onaddfile` (once the file
+         * is committed to the pond and counted from there). Because committed files are
+         * always counted from `getFiles()` — never from this map — it cannot drift and
+         * "stick" the uploader at its limit across delete/re-upload cycles.
+         */
+        this.inFlightFiles = new Map();
+        this.previewObjectUrls = new Map();
         /**
          * Set the component to be profile image uploader with a preview and a circular shape
          */
@@ -66,6 +89,10 @@ export class SallaFileUpload {
          * Enable or disable file browser
          */
         this.allowBrowse = true;
+        /**
+         * Enable the custom gallery preview instead of FilePond thumbnails.
+         */
+        this.enableGallery = false;
         /**
          * Allow drop to replace a file, only works when allowMultiple is false
          */
@@ -83,7 +110,8 @@ export class SallaFileUpload {
          */
         this.allowImagePreview = true;
         /**
-         * Fixed image preview height, overrides min and max preview height
+         * Fixed image preview height, overrides min and max preview height.
+         * Also sets the gallery thumbnail size when using the swiper preview (default: 75px).
          */
         this.imagePreviewHeight = null;
         /**
@@ -151,8 +179,9 @@ export class SallaFileUpload {
          */
         this.iconUndo = '<svg>...</svg>';
         this.openFileBrowser = () => {
-            this.filepond.browse();
+            this.filepond?.browse();
         };
+        this.usesGalleryPreview = () => this.enableGallery;
         //if cartItemIdIsPassed, we need to set the url
         if (!this.url && this.cartItemId) {
             this.url = salla.cart.getUploadImageEndpoint();
@@ -192,13 +221,22 @@ export class SallaFileUpload {
                 });
             };
             const setTranslations = async () => {
-                await setNestedAsync('ar.trans', 'common.uploader.max_images_count', '.أضف :count صور كحد أقصى');
+                await setNestedAsync('ar.trans', 'common.uploader.max_images_count', 'أضف :count صور كحد أقصى');
                 await setNestedAsync('en.trans', 'common.uploader.max_images_count', 'Add up to :count images maximum.');
                 await setNestedAsync('ar.trans', 'common.uploader.max_count_hint', 'يمكنك رفع حتى :count صور');
                 await setNestedAsync('en.trans', 'common.uploader.max_count_hint', 'You can upload up to :count images.');
+                await setNestedAsync('ar.trans', 'common.uploader.max_videos_count', 'أضف :count فيديوهات كحد أقصى');
+                await setNestedAsync('en.trans', 'common.uploader.max_videos_count', 'Add up to :count videos maximum.');
+                await setNestedAsync('ar.trans', 'common.uploader.video_too_large', 'حجم الفيديو يتجاوز الحد المسموح (:size)');
+                await setNestedAsync('en.trans', 'common.uploader.video_too_large', 'Video size exceeds the allowed limit (:size)');
+                await setNestedAsync('ar.trans', 'common.uploader.video_too_long', 'مدة الفيديو تتجاوز الحد المسموح (:duration)');
+                await setNestedAsync('en.trans', 'common.uploader.video_too_long', 'Video duration exceeds the allowed limit (:duration)');
             };
             this.max_count_hint = (count) => salla.lang.get('common.uploader.max_count_hint', { count });
             this.max_images_count = (count) => salla.lang.get('common.uploader.max_images_count', { count });
+            this.max_videos_count = (count) => salla.lang.get('common.uploader.max_videos_count', { count });
+            this.video_too_large = (size) => salla.lang.get('common.uploader.video_too_large', { size });
+            this.video_too_long = (duration) => salla.lang.get('common.uploader.video_too_long', { duration });
             setTranslations();
         });
     }
@@ -220,13 +258,23 @@ export class SallaFileUpload {
     }
     uploadedHandler() {
         let fileInput = this.getFormDataFileInput();
+        const hiddenValue = this.getHiddenInputValue();
         fileInput.type = 'hidden';
-        fileInput.value = this.value;
-        this.hiddenInput.value = this.value;
+        fileInput.value = hiddenValue;
+        this.hiddenInput.value = hiddenValue;
         fileInput.dispatchEvent(new window.Event('change', { bubbles: true }));
         return this.uploaded.emit(this.value);
     }
-    removedHandler(deletedFile) {
+    emitRemovedFile(deletedFile) {
+        const removedId = deletedFile.getMetadata('id') ||
+            deletedFile.getMetadata('url') ||
+            deletedFile.serverId ||
+            deletedFile.id;
+        return this.removed.emit(removedId);
+    }
+    removedHandler(deletedFile, options = {}) {
+        this.releaseAcceptedFile(deletedFile.id);
+        this.releasePreviewObjectUrl(deletedFile.id);
         let fileInput = this.getFormDataFileInput();
         fileInput.type = 'hidden';
         fileInput.value = '';
@@ -237,10 +285,13 @@ export class SallaFileUpload {
         if (this.height) {
             setTimeout(() => this.host.querySelector('.filepond--root').style.height = this.height, 1000);
         }
-        this.hiddenInput.value = '';
+        if (!this.usesGalleryPreview()) {
+            this.hiddenInput.value = '';
+        }
         fileInput.dispatchEvent(new window.Event('change', { bubbles: true }));
-        let toDelete = this.allowMultiple ? deletedFile.getMetadata('id') : deletedFile;
-        return this.removed.emit(toDelete);
+        if (!options.skipEmit) {
+            this.emitRemovedFile(deletedFile);
+        }
     }
     /**
      *  Method to set option for filepond
@@ -248,6 +299,12 @@ export class SallaFileUpload {
     async setOption(key, value) {
         this.filepond[key] = value;
     }
+    generateUploadFileId() {
+        if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+            return `${this.host.id}-${crypto.randomUUID()}`;
+        }
+        return `${this.host.id}-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
+    }
     getLabel() {
         if (this.labelIdle) {
             //some times we are passing label before translations is loaded, so here we will make sure that all translations are translated
@@ -270,6 +327,514 @@ export class SallaFileUpload {
     getFormDataFileInput() {
         return this.host.querySelector('.filepond--data input');
     }
+    isValidPreviewUrl(url) {
+        return typeof url === 'string' && (url.startsWith('http') ||
+            url.startsWith('blob:') ||
+            url.startsWith('data:') ||
+            url.startsWith('/'));
+    }
+    getHiddenInputValue() {
+        if (this.usesGalleryPreview()) {
+            return this.previewFiles.map(file => file.url).join(',');
+        }
+        if (typeof this.value === 'object' && this.value?.url) {
+            return this.value.url;
+        }
+        return this.value || '';
+    }
+    usesSplitCountLimits() {
+        return usesSplitCountLimits(this.maxImagesCount, this.maxVideosCount);
+    }
+    hasImageLimit() {
+        return this.maxImagesCount != null;
+    }
+    hasVideoLimit() {
+        return this.maxVideosCount != null;
+    }
+    getMaxImagesCount() {
+        return getMaxImagesCount(this.maxImagesCount);
+    }
+    getMaxVideosCount() {
+        return getMaxVideosCount(this.maxVideosCount);
+    }
+    getTotalMaxFiles() {
+        return getTotalMaxFiles(this.maxFilesCount, this.maxImagesCount, this.maxVideosCount);
+    }
+    getImageMaxFileSizeString() {
+        const storeSize = salla.config.get('store.settings.upload_size');
+        if (storeSize)
+            return `${storeSize}KB`;
+        return this.maxFileSize;
+    }
+    getImageMaxFileSizeBytes() {
+        const size = this.getImageMaxFileSizeString();
+        return size ? parseSizeToBytes(size) : null;
+    }
+    getVideoMaxFileSizeBytes() {
+        if (this.maxVideoFileSize)
+            return parseSizeToBytes(this.maxVideoFileSize);
+        return this.getImageMaxFileSizeBytes();
+    }
+    getFilePondMaxFileSizeValue() {
+        return getFilePondMaxFileSize(this.maxFileSize, salla.config.get('store.settings.upload_size'), this.maxVideoFileSize);
+    }
+    getFileMimeType(file) {
+        if (file instanceof File) {
+            return file.type;
+        }
+        return file.mimeType;
+    }
+    getFileUrlOrName(file) {
+        if (file instanceof File) {
+            return file.name;
+        }
+        return file.url;
+    }
+    isVideoFile(file) {
+        return isVideoMimeType(this.getFileMimeType(file), this.getFileUrlOrName(file));
+    }
+    getPondItemNameOrUrl(item) {
+        const file = item.file;
+        // Pre-loaded (local) files may not have a populated File object yet, so fall
+        // back to metadata url/name for reliable type detection.
+        return (file?.name ||
+            item.getMetadata?.('url') ||
+            item.getMetadata?.('name') ||
+            item.getMetadata?.('poster'));
+    }
+    isVideoFileFromPond(item) {
+        const file = item.file;
+        return isVideoMimeType(file?.type || item.fileType, this.getPondItemNameOrUrl(item));
+    }
+    isImageFileFromPond(item) {
+        const file = item.file;
+        return isImageMimeType(file?.type || item.fileType, this.getPondItemNameOrUrl(item));
+    }
+    getFileTypeCategory(item) {
+        if (this.isVideoFileFromPond(item))
+            return 'video';
+        if (this.isImageFileFromPond(item))
+            return 'image';
+        return 'other';
+    }
+    /**
+     * Effective count for a type = files committed to the pond + still-in-flight
+     * reservations that are not yet in the pond. Committed files come straight from
+     * `getFiles()` (the source of truth), so this self-heals after deletes and can
+     * never leave the uploader stuck at its limit.
+     */
+    countAcceptedByType(type, excludeId) {
+        const pondItems = this.getCountableGalleryItems();
+        const pondIds = new Set(pondItems.map(item => item.id));
+        let count = pondItems.filter(item => item.id !== excludeId && this.getFileTypeCategory(item) === type).length;
+        this.inFlightFiles.forEach((value, id) => {
+            if (value === type && id !== excludeId && !pondIds.has(id))
+                count += 1;
+        });
+        return count;
+    }
+    /** Effective total across all types (committed pond files + in-flight reservations). */
+    countAcceptedTotal(excludeId) {
+        const pondItems = this.getCountableGalleryItems().filter(item => item.id !== excludeId);
+        const pondIds = new Set(pondItems.map(item => item.id));
+        let count = pondItems.length;
+        this.inFlightFiles.forEach((_value, id) => {
+            if (id !== excludeId && !pondIds.has(id))
+                count += 1;
+        });
+        return count;
+    }
+    reserveAcceptedFile(id, type) {
+        this.inFlightFiles.set(id, type);
+    }
+    releaseAcceptedFile(id) {
+        this.inFlightFiles.delete(id);
+    }
+    getVideoDuration(file) {
+        return new Promise((resolve, reject) => {
+            const video = document.createElement('video');
+            video.preload = 'metadata';
+            const url = URL.createObjectURL(file);
+            let settled = false;
+            const cleanup = () => {
+                clearTimeout(timeoutId);
+                video.onloadedmetadata = null;
+                video.onerror = null;
+                video.removeAttribute('src');
+                video.load();
+                URL.revokeObjectURL(url);
+            };
+            const finish = (duration, error) => {
+                if (settled) {
+                    return;
+                }
+                settled = true;
+                cleanup();
+                if (error) {
+                    reject(error);
+                    return;
+                }
+                resolve(duration ?? 0);
+            };
+            const timeoutId = window.setTimeout(() => {
+                finish(undefined, new Error('Timed out loading video metadata'));
+            }, VIDEO_METADATA_TIMEOUT_MS);
+            video.onloadedmetadata = () => {
+                finish(video.duration);
+            };
+            video.onerror = () => {
+                finish(undefined, new Error('Failed to load video metadata'));
+            };
+            video.src = url;
+        });
+    }
+    notifyMaxImagesLimit() {
+        if (this.maxFilesNotified)
+            return;
+        this.maxFilesNotified = true;
+        salla.notify.error(this.max_images_count(this.getMaxImagesCount()));
+        setTimeout(() => {
+            this.maxFilesNotified = false;
+        }, 500);
+    }
+    notifyMaxVideosLimit() {
+        if (this.maxFilesNotified)
+            return;
+        this.maxFilesNotified = true;
+        salla.notify.error(this.max_videos_count(this.getMaxVideosCount()));
+        setTimeout(() => {
+            this.maxFilesNotified = false;
+        }, 500);
+    }
+    notifyMaxFilesLimit() {
+        if (this.maxFilesNotified)
+            return;
+        this.maxFilesNotified = true;
+        if (this.usesSplitCountLimits() && this.hasImageLimit()) {
+            salla.notify.error(this.max_images_count(this.getMaxImagesCount()));
+        }
+        else {
+            salla.notify.error(this.max_images_count(this.maxFilesCount));
+        }
+        setTimeout(() => {
+            this.maxFilesNotified = false;
+        }, 500);
+    }
+    markValidationRejected(fileId) {
+        this.validationRejectedFileIds.add(fileId);
+        window.setTimeout(() => this.validationRejectedFileIds.delete(fileId), 1000);
+    }
+    getUploadErrorMessageForFile(error, file) {
+        const fileType = file ? this.getFileTypeCategory(file) : 'other';
+        const maxVideoBytes = this.getVideoMaxFileSizeBytes();
+        return getUploadErrorMessage(error, {
+            isVideo: fileType === 'video',
+            maxVideoFileSizeLabel: this.maxVideoFileSize,
+            maxVideoBytes: maxVideoBytes,
+            tooLargeLabel: salla.lang.get('common.uploader.too_large'),
+            invalidTypeLabel: salla.lang.get('common.uploader.invalid_type'),
+            genericErrorLabel: salla.lang.get('common.errors.error_occurred'),
+            videoTooLarge: (size) => this.video_too_large(size || formatBytesAsSize(maxVideoBytes || 0)),
+        });
+    }
+    notifyUploadError(error, file) {
+        salla.notify?.error?.(this.getUploadErrorMessageForFile(error, file));
+    }
+    removeFailedFile(file) {
+        if (!this.filepond?.getFiles().some(pondFile => pondFile.id === file.id)) {
+            return;
+        }
+        this.filepond.removeFile(file.id, { revert: false });
+    }
+    async validateBeforeAddFile(item) {
+        const file = item.file instanceof Blob ? item.file : undefined;
+        const fileType = this.getFileTypeCategory(item);
+        if (this.usesSplitCountLimits()) {
+            if (fileType === 'other') {
+                salla.notify.error(salla.lang.get('common.uploader.invalid_type'));
+                this.markValidationRejected(item.id);
+                return false;
+            }
+            if (fileType === 'image' && !this.hasImageLimit()) {
+                salla.notify.error(salla.lang.get('common.uploader.invalid_type'));
+                this.markValidationRejected(item.id);
+                return false;
+            }
+            if (fileType === 'video' && !this.hasVideoLimit()) {
+                salla.notify.error(salla.lang.get('common.uploader.invalid_type'));
+                this.markValidationRejected(item.id);
+                return false;
+            }
+            const maxForType = fileType === 'video' ? this.getMaxVideosCount() : this.getMaxImagesCount();
+            if (this.countAcceptedByType(fileType, item.id) >= maxForType) {
+                if (fileType === 'video') {
+                    this.notifyMaxVideosLimit();
+                }
+                else {
+                    this.notifyMaxImagesLimit();
+                }
+                this.markValidationRejected(item.id);
+                return false;
+            }
+        }
+        else {
+            if (this.countAcceptedTotal(item.id) >= this.maxFilesCount) {
+                this.notifyMaxFilesLimit();
+                this.markValidationRejected(item.id);
+                return false;
+            }
+        }
+        // Reserve the slot synchronously so parallel batch adds can't exceed the limit.
+        this.reserveAcceptedFile(item.id, fileType);
+        // Pre-loaded local files (edit mode) may not have a Blob yet; metadata is enough.
+        if (!file) {
+            return true;
+        }
+        if (fileType === 'video') {
+            const maxSize = this.getVideoMaxFileSizeBytes();
+            if (maxSize && file.size > maxSize) {
+                salla.notify.error(this.video_too_large(this.maxVideoFileSize || formatBytesAsSize(maxSize)));
+                this.releaseAcceptedFile(item.id);
+                this.markValidationRejected(item.id);
+                return false;
+            }
+            if (this.maxVideoDuration) {
+                try {
+                    const duration = await this.getVideoDuration(file);
+                    if (duration > this.maxVideoDuration) {
+                        salla.notify.error(this.video_too_long(formatDuration(this.maxVideoDuration)));
+                        this.releaseAcceptedFile(item.id);
+                        this.markValidationRejected(item.id);
+                        return false;
+                    }
+                }
+                catch {
+                    salla.notify.error(salla.lang.get('common.uploader.failed_to_load'));
+                    this.releaseAcceptedFile(item.id);
+                    this.markValidationRejected(item.id);
+                    return false;
+                }
+            }
+        }
+        else if (fileType === 'image') {
+            const maxSize = this.getImageMaxFileSizeBytes();
+            if (maxSize && file.size > maxSize) {
+                salla.notify.error(salla.lang.get('common.uploader.too_large'));
+                this.releaseAcceptedFile(item.id);
+                this.markValidationRejected(item.id);
+                return false;
+            }
+        }
+        else if (this.usesSplitCountLimits()) {
+            salla.notify.error(salla.lang.get('common.uploader.invalid_type'));
+            this.releaseAcceptedFile(item.id);
+            this.markValidationRejected(item.id);
+            return false;
+        }
+        return true;
+    }
+    renderGalleryThumb(file) {
+        if (this.isVideoFile(file)) {
+            return [
+                h("video", { class: "s-file-upload-gallery-video-thumb", src: file.url, muted: true, playsInline: true, preload: "metadata" }),
+                h("span", { class: "s-file-upload-gallery-video-icon", innerHTML: PlayIcon }),
+            ];
+        }
+        return h("img", { src: file.url, alt: "", loading: "lazy" });
+    }
+    releasePreviewObjectUrl(fileId) {
+        const url = this.previewObjectUrls.get(fileId);
+        if (!url)
+            return;
+        URL.revokeObjectURL(url);
+        this.previewObjectUrls.delete(fileId);
+    }
+    prunePreviewObjectUrls(activeFileIds) {
+        [...this.previewObjectUrls.keys()].forEach(id => {
+            if (!activeFileIds.has(id)) {
+                this.releasePreviewObjectUrl(id);
+            }
+        });
+    }
+    revokeAllPreviewObjectUrls() {
+        [...this.previewObjectUrls.keys()].forEach(id => this.releasePreviewObjectUrl(id));
+    }
+    getFilePreviewUrl(item) {
+        const fromMeta = item.getMetadata('url') || item.getMetadata('poster');
+        if (this.isValidPreviewUrl(fromMeta)) {
+            this.releasePreviewObjectUrl(item.id);
+            return fromMeta;
+        }
+        const uploaded = this.uploadedFiles.find(file => file.id === item.serverId || file.id === item.getMetadata('id'));
+        if (uploaded?.url) {
+            this.releasePreviewObjectUrl(item.id);
+            return uploaded.url;
+        }
+        const file = item.file;
+        if (file instanceof Blob) {
+            const existing = this.previewObjectUrls.get(item.id);
+            if (existing)
+                return existing;
+            const url = URL.createObjectURL(file);
+            this.previewObjectUrls.set(item.id, url);
+            return url;
+        }
+        return '';
+    }
+    isFileUploading(item) {
+        return item.status === 3 || item.status === 7 || item.status === 9;
+    }
+    getPreviewGalleryItems() {
+        return (this.filepond?.getFiles() || []).filter(item => shouldCountGalleryFile(item.status));
+    }
+    getCountableGalleryItems() {
+        return (this.filepond?.getFiles() || []).filter(item => shouldCountGalleryLimit(item.status));
+    }
+    schedulePreviewFilesSync() {
+        if (!this.usesGalleryPreview())
+            return;
+        if (this.previewFilesSyncRaf != null) {
+            cancelAnimationFrame(this.previewFilesSyncRaf);
+        }
+        this.previewFilesSyncRaf = requestAnimationFrame(() => {
+            this.previewFilesSyncRaf = requestAnimationFrame(() => {
+                this.previewFilesSyncRaf = null;
+                this.syncPreviewFiles();
+            });
+        });
+    }
+    mapItemsToPreviewFiles(items) {
+        return items.map(item => ({
+            id: String(item.getMetadata('id') || item.serverId || item.id),
+            url: this.getFilePreviewUrl(item),
+            mimeType: item.file?.type || item.fileType,
+            processing: this.isFileUploading(item),
+        })).filter(file => file.url);
+    }
+    emitGalleryCounts(items) {
+        // Derive display counts from the settled pond items. This runs deferred
+        // (schedulePreviewFilesSync), so batch-rejected/over-limit files are already
+        // gone and the numbers always match what is actually on screen. Admission is
+        // guarded synchronously by the in-flight reservations in validateBeforeAddFile,
+        // so the pond never exceeds the configured limits — counting it here always
+        // reflects the real state (e.g. after deletes) instead of a stale number.
+        let imageCount = 0;
+        let videoCount = 0;
+        items.forEach(item => {
+            const type = this.getFileTypeCategory(item);
+            if (type === 'video')
+                videoCount += 1;
+            else if (type === 'image')
+                imageCount += 1;
+        });
+        let count = items.length;
+        if (this.hasImageLimit()) {
+            imageCount = Math.min(imageCount, this.getMaxImagesCount());
+        }
+        if (this.hasVideoLimit()) {
+            videoCount = Math.min(videoCount, this.getMaxVideosCount());
+        }
+        if (this.usesSplitCountLimits()) {
+            count = Math.min(count, this.getTotalMaxFiles());
+        }
+        const uploading = items.some(item => this.isFileUploading(item));
+        this.galleryUpdated.emit({
+            count,
+            imageCount,
+            videoCount,
+            uploading,
+        });
+    }
+    syncPreviewFiles() {
+        if (!this.usesGalleryPreview())
+            return;
+        const previewItems = this.getPreviewGalleryItems();
+        this.previewFiles = this.mapItemsToPreviewFiles(previewItems);
+        this.prunePreviewObjectUrls(new Set(previewItems.map(item => item.id)));
+        this.emitGalleryCounts(this.getCountableGalleryItems());
+        if (this.hiddenInput) {
+            this.hiddenInput.value = this.getHiddenInputValue();
+        }
+    }
+    enforceDropLabelVisibility(fileCount) {
+        if (!this.usesGalleryPreview())
+            return;
+        const dropLabel = this.host.querySelector('.filepond--drop-label');
+        if (!dropLabel)
+            return;
+        const imageCount = this.countAcceptedByType('image');
+        const videoCount = this.countAcceptedByType('video');
+        let isMaxReached = false;
+        if (this.usesSplitCountLimits()) {
+            const imagesBlocked = this.hasImageLimit() && imageCount >= this.getMaxImagesCount();
+            const videosBlocked = this.hasVideoLimit() && videoCount >= this.getMaxVideosCount();
+            if (this.hasImageLimit() && this.hasVideoLimit()) {
+                isMaxReached = imagesBlocked && videosBlocked;
+            }
+            else if (this.hasImageLimit()) {
+                isMaxReached = imagesBlocked;
+            }
+            else if (this.hasVideoLimit()) {
+                isMaxReached = videosBlocked;
+            }
+        }
+        else {
+            isMaxReached = (fileCount ?? this.countAcceptedTotal()) >= this.maxFilesCount;
+        }
+        this.host.classList.toggle('s-file-upload-at-max', isMaxReached);
+        dropLabel.classList.toggle('s-file-upload-drop-label-disabled', isMaxReached);
+        dropLabel.classList.remove('s-hidden');
+        if (isMaxReached) {
+            dropLabel.style.setProperty('opacity', '0.55', 'important');
+            dropLabel.style.setProperty('visibility', 'visible', 'important');
+            dropLabel.style.setProperty('transform', 'none', 'important');
+            dropLabel.style.setProperty('height', 'auto', 'important');
+            dropLabel.style.setProperty('min-height', '4.75em', 'important');
+            return;
+        }
+        ['opacity', 'visibility', 'transform', 'height', 'min-height'].forEach(prop => {
+            dropLabel.style.removeProperty(prop);
+        });
+    }
+    scheduleDropLabelVisibilityEnforcement(fileCount) {
+        this.enforceDropLabelVisibility(fileCount);
+        requestAnimationFrame(() => this.enforceDropLabelVisibility(fileCount));
+        setTimeout(() => this.enforceDropLabelVisibility(fileCount), 200);
+    }
+    removePreviewFile(event, fileId) {
+        event.stopPropagation();
+        const pondFile = this.filepond?.getFiles().find(file => String(file.getMetadata('id')) === String(fileId) || file.id === fileId);
+        if (pondFile) {
+            this.filepond.removeFile(pondFile.id);
+        }
+    }
+    openPreview(index) {
+        const file = this.previewFiles[index];
+        if (!file || file.processing)
+            return;
+        this.attachmentView?.open(index);
+    }
+    getGalleryThumbSize() {
+        return this.imagePreviewHeight || 75;
+    }
+    getGalleryStyles() {
+        const size = this.getGalleryThumbSize();
+        return {
+            '--s-file-upload-preview-size': `${size}px`,
+            '--s-file-upload-remove-size': `${Math.max(18, Math.round(size * 0.24))}px`,
+            '--s-file-upload-remove-icon-size': `${Math.max(10, Math.round(size * 0.13))}px`,
+        };
+    }
+    renderPreviewGallery() {
+        if (!this.usesGalleryPreview() || !this.previewFiles.length)
+            return null;
+        const galleryThumbSize = this.getGalleryThumbSize();
+        return (h("div", { class: "s-file-upload-gallery", style: this.getGalleryStyles() }, h("div", { class: "s-file-upload-gallery-track s-scrollbar ps-2" }, this.previewFiles.map((file, index) => (h("div", { class: "s-file-upload-gallery-item", key: file.id }, this.allowRemove && (h("button", { type: "button", class: "s-file-upload-gallery-remove", "aria-label": salla.lang.get('common.elements.remove'), onClick: (event) => this.removePreviewFile(event, file.id) }, h("span", { innerHTML: CancelIcon }))), h("div", { class: {
+                's-file-upload-gallery-thumb': true,
+                'is-processing': file.processing,
+                'is-video': this.isVideoFile(file),
+            }, onClick: () => this.openPreview(index) }, this.renderGalleryThumb(file), file.processing && h("salla-loading", { size: Math.max(16, Math.round(galleryThumbSize * 0.22)) })))))), this.previewFiles.length > 0 && (h("salla-attachment-view", { ref: el => (this.attachmentView = el), attachments: this.previewFiles }))));
+    }
     getFiles() {
         if (!this.value && !this.files) {
             return [];
@@ -306,12 +871,20 @@ export class SallaFileUpload {
             this.host.innerHTML = '';
         }
     }
+    disconnectedCallback() {
+        if (this.previewFilesSyncRaf != null) {
+            cancelAnimationFrame(this.previewFilesSyncRaf);
+            this.previewFilesSyncRaf = null;
+        }
+        this.revokeAllPreviewObjectUrls();
+    }
     render() {
-        return (h(Host, { key: '518fef1a108d79f9aeb9efdbce74e4e721a145dc', class: {
+        return (h(Host, { key: '9c9bb99746270f2511bd86344a135d05f9b3cf29', class: {
                 "s-file-upload": true,
                 "s-file-upload-profile-image": this.profileImage,
                 "s-file-upload-multiple": this.allowMultiple,
-            } }, h("input", { key: '0c01117f1e59577833b106d5825a08dd2ca51bd0', type: "file", name: this.name, value: this.value, ref: ele => this.fileUploader = ele, required: this.required, class: "s-file-upload-wrapper s-file-upload-input", accept: this.accept }), this.allowMultiple && this.showMaxCountHint ? h("div", { class: "s-file-upload-hint s-hidden" }, this.max_count_hint(this.maxFilesCount)) : '', h("input", { key: '69276b5e95c8bc35f42c3f1f307abea8c1761621', class: "s-hidden", name: 'hidden-' + this.name, required: this.required, value: this.value, ref: input => this.hiddenInput = input })));
+                "s-file-upload-has-gallery": this.usesGalleryPreview(),
+            } }, h("input", { key: 'd033124b1829ee4b9f0c4d44041a525e73769b77', type: "file", name: this.name, ref: ele => this.fileUploader = ele, required: this.required, class: "s-file-upload-wrapper s-file-upload-input", accept: this.accept }), this.allowMultiple && this.showMaxCountHint ? h("div", { class: "s-file-upload-hint s-hidden" }, this.max_count_hint(this.getTotalMaxFiles())) : '', h("input", { key: '95608637f6b52dabbad4a7374d329549cb6d3862', class: "s-hidden", name: 'hidden-' + this.name, required: this.required, value: this.getHiddenInputValue(), ref: input => this.hiddenInput = input }), this.renderPreviewGallery()));
     }
     async componentDidLoad() {
         await Salla.onReady();
@@ -320,6 +893,7 @@ export class SallaFileUpload {
             this.value = Salla.config.get('user.avatar');
         }
         let files = this.getFiles();
+        const filePondMaxFileSize = this.getFilePondMaxFileSizeValue();
         this.filepond = this.FilePond.create(this.fileUploader, {
             name: this.payloadName || this.name,
             //@ts-ignore
@@ -336,10 +910,13 @@ export class SallaFileUpload {
             allowReorder: this.allowReorder,
             storeAsFile: this.storeAsFile,
             forceRevert: this.forceRevert,
-            maxFiles: this.maxFilesCount,
+            // FilePond hides the drop label (opacity 0 + height 0) when maxFiles is reached.
+            // In gallery mode we enforce the limit ourselves so labels stay visible, dimmed at max.
+            maxFiles: this.usesGalleryPreview() ? null : this.getTotalMaxFiles(),
+            beforeAddFile: (item) => this.validateBeforeAddFile(item),
             imagePreviewHeight: this.imagePreviewHeight,
             filePosterHeight: this.filePosterHeight,
-            allowImagePreview: this.allowImagePreview,
+            allowImagePreview: this.usesGalleryPreview() ? false : this.allowImagePreview,
             maxParallelUploads: this.maxParallelUploads,
             checkValidity: this.checkValidity,
             itemInsertLocation: this.itemInsertLocation,
@@ -349,36 +926,80 @@ export class SallaFileUpload {
             dropOnElement: this.dropOnElement,
             dropValidation: this.dropValidation,
             ignoredFiles: this.ignoredFiles,
-            onaddfile: (error, file) => this.addedHandler(error, file),
+            onaddfile: (error, file) => {
+                // The file is now committed to the pond (or errored out), so it is
+                // counted from getFiles() from here on — drop the in-flight reservation
+                // either way to keep the map transient and drift-free.
+                this.releaseAcceptedFile(file.id);
+                if (error) {
+                    if (!this.validationRejectedFileIds.has(file.id)) {
+                        this.notifyUploadError(error, file);
+                    }
+                    this.validationRejectedFileIds.delete(file.id);
+                }
+                this.addedHandler(error, file);
+                if (this.usesGalleryPreview()) {
+                    this.schedulePreviewFilesSync();
+                }
+            },
             onwarning: (error, _file, _status) => {
                 if (error.body === "Max files") {
-                    salla.notify.error(this.max_images_count(this.maxFilesCount));
+                    this.notifyMaxFilesLimit();
                 }
             },
             onprocessfile: (error, file) => {
+                if (error) {
+                    this.notifyUploadError(error, file);
+                    this.removeFailedFile(file);
+                    if (this.usesGalleryPreview()) {
+                        this.schedulePreviewFilesSync();
+                    }
+                    return;
+                }
+                let syncedGallery = false;
                 if (this.allowMultiple && !error) {
                     // Find the uploaded file data using the serverId returned from onload
                     const serverId = file.serverId;
                     const uploadedFile = this.uploadedFiles.find(f => f.id === serverId);
                     if (uploadedFile) {
-                        // Set metadata on the file
                         file.setMetadata('id', uploadedFile.id, true);
                         file.setMetadata('url', uploadedFile.url, true);
                         this.value = {
                             id: uploadedFile.id,
                             url: uploadedFile.url
                         };
+                        if (this.usesGalleryPreview()) {
+                            this.syncPreviewFiles();
+                            syncedGallery = true;
+                        }
                         this.uploadedHandler();
                     }
                 }
+                if (this.usesGalleryPreview() && !syncedGallery) {
+                    this.schedulePreviewFilesSync();
+                }
+            },
+            onremovefile: (_error, file) => {
+                if (this.usesGalleryPreview()) {
+                    if (file) {
+                        this.emitRemovedFile(file);
+                    }
+                    this.schedulePreviewFilesSync();
+                }
             },
             onupdatefiles: (fileItems) => {
                 const dropLabel = this.host.querySelector('.filepond--drop-label');
                 const listScroller = this.host.querySelector('.filepond--list-scroller');
+                if (this.usesGalleryPreview()) {
+                    listScroller?.classList.add('s-hidden');
+                    this.scheduleDropLabelVisibilityEnforcement();
+                    this.schedulePreviewFilesSync();
+                    return;
+                }
                 if (this.allowMultiple) {
                     if (fileItems.length > 0) {
                         dropLabel.classList.add('s-hidden');
-                        if (!this.isListScrollerListenerAdded && fileItems.length < this.maxFilesCount) {
+                        if (!this.isListScrollerListenerAdded && fileItems.length < this.getTotalMaxFiles()) {
                             this.showMaxCountHint = true;
                             listScroller.addEventListener('click', this.openFileBrowser);
                             this.isListScrollerListenerAdded = true;
@@ -391,8 +1012,7 @@ export class SallaFileUpload {
                             this.isListScrollerListenerAdded = false;
                         }
                     }
-                    // Check if fileItems length equals maxFilesCount and remove event listener
-                    if (fileItems.length === this.maxFilesCount && this.isListScrollerListenerAdded) {
+                    if (fileItems.length === this.getTotalMaxFiles() && this.isListScrollerListenerAdded) {
                         listScroller.removeEventListener('click', this.openFileBrowser);
                         this.isListScrollerListenerAdded = false;
                         this.showMaxCountHint = false;
@@ -408,21 +1028,28 @@ export class SallaFileUpload {
                     onload: (response) => {
                         let responseData = JSON.parse(response).data;
                         if ((this.instantUpload || this.allowMultiple) && Array.isArray(responseData) && responseData.length > 0) {
-                            const fileId = `${this.host.id}-${Math.floor(100 + Math.random() * 900)}`;
-                            const fileUrl = responseData[0];
+                            const item = responseData[0];
+                            const fileUrl = typeof item === 'object' && item !== null ? item.filePath || item.url : item;
+                            const fileId = this.generateUploadFileId();
                             // Store the upload result to be picked up by onprocessfile
-                            this.uploadedFiles.push({
-                                id: fileId,
-                                url: fileUrl
-                            });
+                            this.uploadedFiles = [
+                                ...this.uploadedFiles,
+                                { id: fileId, url: fileUrl }
+                            ];
                             // Return the serverId that FilePond will use to identify this file
                             // We'll use the fileId as the serverId
                             return fileId;
                         }
                         else {
-                            this.value = responseData.filePath || responseData.url;
+                            const fileUrl = typeof responseData === 'object' && responseData !== null
+                                ? responseData.filePath || responseData.url
+                                : responseData;
+                            const fileId = typeof responseData === 'object' && responseData !== null && responseData.id
+                                ? responseData.id
+                                : this.generateUploadFileId();
+                            this.value = { id: fileId, url: fileUrl };
                             this.uploadedHandler();
-                            return this.value;
+                            return fileUrl;
                         }
                     },
                     headers: salla.api.getHeaders(),
@@ -487,13 +1114,19 @@ export class SallaFileUpload {
             fileValidateTypeLabelExpectedTypes: '{allButLastType}, {lastType}',
             labelMaxFileSizeExceeded: salla.lang.get('common.uploader.too_large'),
             labelMaxFileSize: '{filesize}',
-            maxFileSize: `${salla.config.get('store.settings.upload_size')}KB` || this.maxFileSize,
+            ...(filePondMaxFileSize ? { maxFileSize: filePondMaxFileSize } : {}),
             beforeRemoveFile: (deletedFile) => new Promise((resolve) => {
-                this.removedHandler(deletedFile);
+                this.removedHandler(deletedFile, { skipEmit: this.usesGalleryPreview() });
                 resolve(true);
             }),
         });
-        ``;
+        this.syncPreviewFiles();
+        if (this.usesGalleryPreview()) {
+            this.filepond.on('updatefiles', () => {
+                this.scheduleDropLabelVisibilityEnforcement();
+            });
+            this.scheduleDropLabelVisibilityEnforcement();
+        }
         this.hiddenInput.addEventListener('invalid', e => {
             this.invalidInput.emit(e);
         });
@@ -925,6 +1558,26 @@ export class SallaFileUpload {
                 "setter": false,
                 "reflect": false
             },
+            "enableGallery": {
+                "type": "boolean",
+                "attribute": "enable-gallery",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable the custom gallery preview instead of FilePond thumbnails."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
             "allowReplace": {
                 "type": "boolean",
                 "attribute": "allow-replace",
@@ -1056,7 +1709,7 @@ export class SallaFileUpload {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Fixed image preview height, overrides min and max preview height"
+                    "text": "Fixed image preview height, overrides min and max preview height.\nAlso sets the gallery thumbnail size when using the swiper preview (default: 75px)."
                 },
                 "getter": false,
                 "setter": false,
@@ -1161,6 +1814,82 @@ export class SallaFileUpload {
                 "reflect": false,
                 "defaultValue": "3"
             },
+            "maxImagesCount": {
+                "type": "number",
+                "attribute": "max-images-count",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Primary: maximum number of image files (split count mode).\nWhen set with or without maxVideosCount, maxFilesCount is ignored for count limits."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "maxVideosCount": {
+                "type": "number",
+                "attribute": "max-videos-count",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Primary: maximum number of video files (split count mode).\nWhen set with or without maxImagesCount, maxFilesCount is ignored for count limits."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "maxVideoFileSize": {
+                "type": "string",
+                "attribute": "max-video-file-size",
+                "mutable": false,
+                "complexType": {
+                    "original": "`${number}MB` | `${number}KB`",
+                    "resolved": "`${number}KB` | `${number}MB`",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum size for video files only, e.g. 50MB or 750KB"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "maxVideoDuration": {
+                "type": "number",
+                "attribute": "max-video-duration",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum video duration in seconds"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "checkValidity": {
                 "type": "boolean",
                 "attribute": "check-validity",
@@ -1575,10 +2304,14 @@ export class SallaFileUpload {
     static get states() {
         return {
             "max_images_count": {},
+            "max_videos_count": {},
             "max_count_hint": {},
+            "video_too_large": {},
+            "video_too_long": {},
             "uploadedFiles": {},
             "isListScrollerListenerAdded": {},
-            "showMaxCountHint": {}
+            "showMaxCountHint": {},
+            "previewFiles": {}
         };
     }
     static get events() {
@@ -1646,18 +2379,27 @@ export class SallaFileUpload {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event emitted when the file is about to be removed. Returns boolean value."
+                    "text": "Event emitted when the file is about to be removed. Returns the removed file id when available."
                 },
                 "complexType": {
-                    "original": "FilePondFile",
-                    "resolved": "FilePondFile",
-                    "references": {
-                        "FilePondFile": {
-                            "location": "import",
-                            "path": "./interfaces",
-                            "id": "src/components/salla-file-upload/interfaces.ts::FilePondFile"
-                        }
-                    }
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                }
+            }, {
+                "method": "galleryUpdated",
+                "name": "galleryUpdated",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the gallery preview list changes (upload/remove)."
+                },
+                "complexType": {
+                    "original": "{\n    count: number;\n    imageCount?: number;\n    videoCount?: number;\n    uploading?: boolean;\n  }",
+                    "resolved": "{ count: number; imageCount?: number; videoCount?: number; uploading?: boolean; }",
+                    "references": {}
                 }
             }];
     }