@eui/components 18.2.15 → 18.2.16-snapshot-1756489547144

package/fesm2022/eui-components-eui-file-upload.mjs

@@ -83,6 +83,7 @@ class EuiFilePreviewComponent {
         };
         this.removeFromList = new EventEmitter();
         this.isLoading = false;
+        this.typeFromFileExtension = null;
         // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.itemClick = new EventEmitter();
@@ -108,6 +109,9 @@ class EuiFilePreviewComponent {
                 this.url = event.target.result;
                 this.fileExtension = this.getFileExtension(this.file.name);
                 this.icon = this.getIconForMime(this.fileExtension);
+                if (this.fileExtension === 'msg') {
+                    this.typeFromFileExtension = 'application/vnd.ms-outlook';
+                }
                 const blob = new Blob([reader.result], { type: this.file.type });
                 const imageUrl = URL.createObjectURL(blob);
                 this.previewData = this.getPreviewForMime(this.fileExtension, imageUrl);
@@ -159,11 +163,11 @@ class EuiFilePreviewComponent {
         return !this.previewAsIconConfig[f] ? 'eui-file-empty-o' : this.previewAsIconConfig[f];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EuiFilePreviewComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: EuiFilePreviewComponent, selector: "eui-file-preview", inputs: { file: "file", uploadedFileTemplate: "uploadedFileTemplate", index: "index", previewAsIconConfig: "previewAsIconConfig", hasPreview: ["hasPreview", "hasPreview", booleanAttribute], isFilenameDisplayed: ["isFilenameDisplayed", "isFilenameDisplayed", booleanAttribute], isFilesizeDisplayed: ["isFilesizeDisplayed", "isFilesizeDisplayed", booleanAttribute], isFiletypeDisplayed: ["isFiletypeDisplayed", "isFiletypeDisplayed", booleanAttribute], hasPreviewAsImage: ["hasPreviewAsImage", "hasPreviewAsImage", booleanAttribute], hasPreviewAsIcon: ["hasPreviewAsIcon", "hasPreviewAsIcon", booleanAttribute], isItemsClickable: ["isItemsClickable", "isItemsClickable", booleanAttribute], isFileObject: ["isFileObject", "isFileObject", booleanAttribute] }, outputs: { removeFromList: "removeFromList", itemClick: "itemClick" }, queries: [{ propertyName: "templates", predicate: EuiTemplateDirective }], ngImport: i0, template: "@if (uploadedFileTemplate) {\n    <ng-template\n        [ngTemplateOutlet]=\"uploadedFileTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: { file: { id: file.id, name: file.name, url: file.url || previewData?.display, size: file.size, type: file.type }, index, isFileObject } }\">\n    </ng-template>\n} @else {\n    <div class=\"eui-file-upload__preview\">\n        <div class=\"eui-file-upload__preview--left\">\n            <div class=\"eui-file-upload__preview--left__image\" *ngIf=\"hasPreview && hasPreviewAsImage\">\n                <img [src]=\"previewData.display\" *ngIf=\"url && previewData.image\" />\n                <eui-icon-svg *ngIf=\"previewData && !previewData.image\" icon=\"{{ previewData.display }}\" size=\"l\" fillColor=\"info-100\" class=\"eui-u-mr-s\"></eui-icon-svg>\n                <div *ngIf=\"isLoading\" class=\"loading-container\">\n                    <eui-icon-svg isLoading size=\"2xl\"></eui-icon-svg>\n                </div>\n            </div>\n            <div *ngIf=\"hasPreview && hasPreviewAsIcon\">\n                <eui-icon-svg icon=\"{{ icon }}\" size=\"l\" fillColor=\"info-100\" class=\"eui-u-mr-s\"></eui-icon-svg>\n            </div>\n            <div class=\"eui-file-upload__preview--left__filename eui-u-text-truncate\" *ngIf=\"isFilenameDisplayed\">\n                <ng-container *ngIf=\"!isItemsClickable\">\n                    {{ file.name }}\n                </ng-container>\n                <ng-container *ngIf=\"isItemsClickable\">\n                    <a href=\"#\" (click)=\"onItemClick($event)\" class=\"eui-u-text-link eui-u-text-truncate\">{{ file.name }}</a>\n                </ng-container>\n            </div>\n        </div>\n        <div class=\"eui-file-upload__preview--right\">\n            <div class=\"eui-u-text-no-wrap eui-u-ml-m\" *ngIf=\"isFilesizeDisplayed\">{{ file.size | filesize }}</div>\n            <div class=\"eui-u-ml-m\" *ngIf=\"isFiletypeDisplayed\"><span euiLabel>{{ file.type }}</span></div>\n            <div class=\"eui-u-ml-m\">\n                <button euiButton euiDanger euiRounded euiIconButton euiBasicButton type=\"button\" (click)=\"onRemoveFromList()\">\n                    <eui-icon-svg icon=\"eui-ecl-trash\"></eui-icon-svg>\n                </button>\n            </div>\n        </div>\n    </div>\n}\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i3.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "pipe", type: EuiFileSizePipe, name: "filesize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: EuiFilePreviewComponent, selector: "eui-file-preview", inputs: { file: "file", uploadedFileTemplate: "uploadedFileTemplate", index: "index", previewAsIconConfig: "previewAsIconConfig", hasPreview: ["hasPreview", "hasPreview", booleanAttribute], isFilenameDisplayed: ["isFilenameDisplayed", "isFilenameDisplayed", booleanAttribute], isFilesizeDisplayed: ["isFilesizeDisplayed", "isFilesizeDisplayed", booleanAttribute], isFiletypeDisplayed: ["isFiletypeDisplayed", "isFiletypeDisplayed", booleanAttribute], hasPreviewAsImage: ["hasPreviewAsImage", "hasPreviewAsImage", booleanAttribute], hasPreviewAsIcon: ["hasPreviewAsIcon", "hasPreviewAsIcon", booleanAttribute], isItemsClickable: ["isItemsClickable", "isItemsClickable", booleanAttribute], isFileObject: ["isFileObject", "isFileObject", booleanAttribute] }, outputs: { removeFromList: "removeFromList", itemClick: "itemClick" }, queries: [{ propertyName: "templates", predicate: EuiTemplateDirective }], ngImport: i0, template: "@if (uploadedFileTemplate) {\n    <ng-template\n        [ngTemplateOutlet]=\"uploadedFileTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: { file: { id: file.id, name: file.name, url: file.url || previewData?.display, size: file.size, type: file.type }, index, isFileObject } }\">\n    </ng-template>\n} @else {\n    <div class=\"eui-file-upload__preview\">\n        <div class=\"eui-file-upload__preview--left\">\n            <div class=\"eui-file-upload__preview--left__image\" *ngIf=\"hasPreview && hasPreviewAsImage\">\n                <img [src]=\"previewData.display\" *ngIf=\"url && previewData.image\" />\n                <eui-icon-svg *ngIf=\"previewData && !previewData.image\" icon=\"{{ previewData.display }}\" size=\"l\" fillColor=\"info-100\" class=\"eui-u-mr-s\"></eui-icon-svg>\n                <div *ngIf=\"isLoading\" class=\"loading-container\">\n                    <eui-icon-svg isLoading size=\"2xl\"></eui-icon-svg>\n                </div>\n            </div>\n            <div *ngIf=\"hasPreview && hasPreviewAsIcon\">\n                <eui-icon-svg icon=\"{{ icon }}\" size=\"l\" fillColor=\"info-100\" class=\"eui-u-mr-s\"></eui-icon-svg>\n            </div>\n            <div class=\"eui-file-upload__preview--left__filename eui-u-text-truncate\" *ngIf=\"isFilenameDisplayed\">\n                <ng-container *ngIf=\"!isItemsClickable\">\n                    {{ file.name }}\n                </ng-container>\n                <ng-container *ngIf=\"isItemsClickable\">\n                    <a href=\"#\" (click)=\"onItemClick($event)\" class=\"eui-u-text-link eui-u-text-truncate\">{{ file.name }}</a>\n                </ng-container>\n            </div>\n        </div>\n        <div class=\"eui-file-upload__preview--right\">\n            <div class=\"eui-u-text-no-wrap eui-u-ml-m\" *ngIf=\"isFilesizeDisplayed\">{{ file.size | filesize }}</div>\n            <div class=\"eui-u-ml-m\" *ngIf=\"isFiletypeDisplayed\"><span euiLabel>{{ file.type.length > 0 ? file.type : typeFromFileExtension }}</span></div>\n            <div class=\"eui-u-ml-m\">\n                <button euiButton euiDanger euiRounded euiIconButton euiBasicButton type=\"button\" (click)=\"onRemoveFromList()\">\n                    <eui-icon-svg icon=\"eui-ecl-trash\"></eui-icon-svg>\n                </button>\n            </div>\n        </div>\n    </div>\n}\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i3.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "pipe", type: EuiFileSizePipe, name: "filesize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EuiFilePreviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'eui-file-preview', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (uploadedFileTemplate) {\n    <ng-template\n        [ngTemplateOutlet]=\"uploadedFileTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: { file: { id: file.id, name: file.name, url: file.url || previewData?.display, size: file.size, type: file.type }, index, isFileObject } }\">\n    </ng-template>\n} @else {\n    <div class=\"eui-file-upload__preview\">\n        <div class=\"eui-file-upload__preview--left\">\n            <div class=\"eui-file-upload__preview--left__image\" *ngIf=\"hasPreview && hasPreviewAsImage\">\n                <img [src]=\"previewData.display\" *ngIf=\"url && previewData.image\" />\n                <eui-icon-svg *ngIf=\"previewData && !previewData.image\" icon=\"{{ previewData.display }}\" size=\"l\" fillColor=\"info-100\" class=\"eui-u-mr-s\"></eui-icon-svg>\n                <div *ngIf=\"isLoading\" class=\"loading-container\">\n                    <eui-icon-svg isLoading size=\"2xl\"></eui-icon-svg>\n                </div>\n            </div>\n            <div *ngIf=\"hasPreview && hasPreviewAsIcon\">\n                <eui-icon-svg icon=\"{{ icon }}\" size=\"l\" fillColor=\"info-100\" class=\"eui-u-mr-s\"></eui-icon-svg>\n            </div>\n            <div class=\"eui-file-upload__preview--left__filename eui-u-text-truncate\" *ngIf=\"isFilenameDisplayed\">\n                <ng-container *ngIf=\"!isItemsClickable\">\n                    {{ file.name }}\n                </ng-container>\n                <ng-container *ngIf=\"isItemsClickable\">\n                    <a href=\"#\" (click)=\"onItemClick($event)\" class=\"eui-u-text-link eui-u-text-truncate\">{{ file.name }}</a>\n                </ng-container>\n            </div>\n        </div>\n        <div class=\"eui-file-upload__preview--right\">\n            <div class=\"eui-u-text-no-wrap eui-u-ml-m\" *ngIf=\"isFilesizeDisplayed\">{{ file.size | filesize }}</div>\n            <div class=\"eui-u-ml-m\" *ngIf=\"isFiletypeDisplayed\"><span euiLabel>{{ file.type }}</span></div>\n            <div class=\"eui-u-ml-m\">\n                <button euiButton euiDanger euiRounded euiIconButton euiBasicButton type=\"button\" (click)=\"onRemoveFromList()\">\n                    <eui-icon-svg icon=\"eui-ecl-trash\"></eui-icon-svg>\n                </button>\n            </div>\n        </div>\n    </div>\n}\n" }]
+            args: [{ selector: 'eui-file-preview', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (uploadedFileTemplate) {\n    <ng-template\n        [ngTemplateOutlet]=\"uploadedFileTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: { file: { id: file.id, name: file.name, url: file.url || previewData?.display, size: file.size, type: file.type }, index, isFileObject } }\">\n    </ng-template>\n} @else {\n    <div class=\"eui-file-upload__preview\">\n        <div class=\"eui-file-upload__preview--left\">\n            <div class=\"eui-file-upload__preview--left__image\" *ngIf=\"hasPreview && hasPreviewAsImage\">\n                <img [src]=\"previewData.display\" *ngIf=\"url && previewData.image\" />\n                <eui-icon-svg *ngIf=\"previewData && !previewData.image\" icon=\"{{ previewData.display }}\" size=\"l\" fillColor=\"info-100\" class=\"eui-u-mr-s\"></eui-icon-svg>\n                <div *ngIf=\"isLoading\" class=\"loading-container\">\n                    <eui-icon-svg isLoading size=\"2xl\"></eui-icon-svg>\n                </div>\n            </div>\n            <div *ngIf=\"hasPreview && hasPreviewAsIcon\">\n                <eui-icon-svg icon=\"{{ icon }}\" size=\"l\" fillColor=\"info-100\" class=\"eui-u-mr-s\"></eui-icon-svg>\n            </div>\n            <div class=\"eui-file-upload__preview--left__filename eui-u-text-truncate\" *ngIf=\"isFilenameDisplayed\">\n                <ng-container *ngIf=\"!isItemsClickable\">\n                    {{ file.name }}\n                </ng-container>\n                <ng-container *ngIf=\"isItemsClickable\">\n                    <a href=\"#\" (click)=\"onItemClick($event)\" class=\"eui-u-text-link eui-u-text-truncate\">{{ file.name }}</a>\n                </ng-container>\n            </div>\n        </div>\n        <div class=\"eui-file-upload__preview--right\">\n            <div class=\"eui-u-text-no-wrap eui-u-ml-m\" *ngIf=\"isFilesizeDisplayed\">{{ file.size | filesize }}</div>\n            <div class=\"eui-u-ml-m\" *ngIf=\"isFiletypeDisplayed\"><span euiLabel>{{ file.type.length > 0 ? file.type : typeFromFileExtension }}</span></div>\n            <div class=\"eui-u-ml-m\">\n                <button euiButton euiDanger euiRounded euiIconButton euiBasicButton type=\"button\" (click)=\"onRemoveFromList()\">\n                    <eui-icon-svg icon=\"eui-ecl-trash\"></eui-icon-svg>\n                </button>\n            </div>\n        </div>\n    </div>\n}\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { file: [{
                 type: Input
             }], uploadedFileTemplate: [{
@@ -611,7 +615,7 @@ const getMimeType = (header) => {
     // convert Uint8Array to hex string
     const hex = uint8ArrayToHexString(header);
     // map hex string to mime type
-    if (hex.startsWith('ffd8ffe000104a46'))
+    if (hex.startsWith('ffd8ff'))
         return 'image/jpeg';
     if (hex.startsWith('89504e47'))
         return 'image/png';
@@ -635,24 +639,10 @@ const getMimeType = (header) => {
         return 'image/vnd.adobe.photoshop';
     if (hex.startsWith('06054b50'))
         return 'application/x-indesign';
-    if (hex.startsWith('504b0304'))
-        return 'application/epub+zip';
-    if (hex.startsWith('504b0304'))
-        return 'application/x-xpinstall';
-    if (hex.startsWith('504b0304'))
-        return 'application/vnd.oasis.opendocument.text';
-    if (hex.startsWith('504b0304'))
-        return 'application/vnd.oasis.opendocument.spreadsheet';
-    if (hex.startsWith('504b0304'))
-        return 'application/vnd.oasis.opendocument.presentation';
-    if (hex.startsWith('504b0304'))
-        return 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
-    if (hex.startsWith('504b0304'))
-        return 'application/vnd.openxmlformats-officedocument.presentationml.presentation';
-    if (hex.startsWith('504b0304'))
-        return 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
-    if (hex.startsWith('504b0304'))
-        return 'application/zip';
+    // Handle ZIP-based formats by examining content
+    if (hex.startsWith('504b0304')) {
+        return identifyZipBasedFormat(header);
+    }
     if (hex.startsWith('7b2274797065223a226a736f6e227d'))
         return 'application/json';
     if (hex.startsWith('7573746172'))
@@ -684,11 +674,7 @@ const getMimeType = (header) => {
     if (hex.startsWith('0a010301'))
         return 'audio/qcelp';
     if (hex.startsWith('3026b2758e66cf11'))
-        return 'audio/x-ms-asf';
-    if (hex.startsWith('3026b2758e66cf11'))
-        return 'video/x-ms-asf';
-    if (hex.startsWith('3026b2758e66cf11'))
-        return 'application/vnd.ms-asf';
+        return identifyAsfFormat(header);
     if (hex.startsWith('000001ba'))
         return 'video/mpeg';
     if (hex.startsWith('00000020667479703367'))
@@ -700,11 +686,7 @@ const getMimeType = (header) => {
     if (hex.startsWith('4f707573'))
         return 'audio/opus';
     if (hex.startsWith('4f676753'))
-        return 'video/ogg';
-    if (hex.startsWith('4f676753'))
-        return 'audio/ogg';
-    if (hex.startsWith('4f676753'))
-        return 'application/ogg';
+        return identifyOggFormat(header);
     if (hex.startsWith('664c6143'))
         return 'audio/x-flac';
     if (hex.startsWith('4d414320'))
@@ -749,8 +731,6 @@ const getMimeType = (header) => {
         return 'application/x-sqlite3';
     if (hex.startsWith('4e45531a00000001'))
         return 'application/x-nintendo-nes-rom';
-    if (hex.startsWith('504b0304'))
-        return 'application/x-google-chrome-extension';
     if (hex.startsWith('4d534346'))
         return 'application/vnd.ms-cab-compressed';
     if (hex.startsWith('213c617263683e0a'))
@@ -794,13 +774,7 @@ const getMimeType = (header) => {
     if (hex.startsWith('424f4f4b4d4f4249'))
         return 'application/x-mobipocket-ebook';
     if (hex.startsWith('667479706174'))
-        return 'image/heif';
-    if (hex.startsWith('667479706174'))
-        return 'image/heif-sequence';
-    if (hex.startsWith('667479706174'))
-        return 'image/heic';
-    if (hex.startsWith('667479706174'))
-        return 'image/heic-sequence';
+        return identifyHeifFormat(header);
     if (hex.startsWith('4b545820'))
         return 'image/ktx';
     if (hex.startsWith('4449434d'))
@@ -821,9 +795,292 @@ const getMimeType = (header) => {
         return 'audio/vnd.dolby.dd-raw';
     return null;
 };
+const identifyZipBasedFormat = (data) => {
+    try {
+        const fileEntries = extractZipFileList(data);
+        // Chrome extension
+        if (fileEntries.includes('manifest.json')) {
+            return 'application/x-google-chrome-extension';
+        }
+        // EPUB
+        if (fileEntries.includes('META-INF/container.xml') || fileEntries.includes('mimetype')) {
+            return 'application/epub+zip';
+        }
+        // OpenDocument formats
+        if (fileEntries.includes('META-INF/manifest.xml')) {
+            if (fileEntries.some(f => f.endsWith('.odp')))
+                return 'application/vnd.oasis.opendocument.presentation';
+            if (fileEntries.some(f => f.endsWith('.ods')))
+                return 'application/vnd.oasis.opendocument.spreadsheet';
+            if (fileEntries.some(f => f.endsWith('.odt')))
+                return 'application/vnd.oasis.opendocument.text';
+        }
+        // Microsoft Office formats
+        if (fileEntries.includes('[Content_Types].xml')) {
+            if (fileEntries.includes('ppt/presentation.xml'))
+                return 'application/vnd.openxmlformats-officedocument.presentationml.presentation';
+            if (fileEntries.includes('xl/workbook.xml'))
+                return 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
+            if (fileEntries.includes('word/document.xml'))
+                return 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
+        }
+        // Default to generic ZIP
+        return 'application/zip';
+    }
+    catch {
+        return 'application/zip';
+    }
+};
+const extractZipFileList = (data) => {
+    // Simplified ZIP parsing - looks for central directory entries
+    const files = [];
+    let offset = 0;
+    while (offset < data.length - 4) {
+        // Look for local file header signature (0x04034b50)
+        if (data[offset] === 0x50 && data[offset + 1] === 0x4b &&
+            data[offset + 2] === 0x03 && data[offset + 3] === 0x04) {
+            const filenameLength = data[offset + 26] | (data[offset + 27] << 8);
+            const extraFieldLength = data[offset + 28] | (data[offset + 29] << 8);
+            if (filenameLength > 0 && offset + 30 + filenameLength <= data.length) {
+                const filename = new TextDecoder().decode(data.slice(offset + 30, offset + 30 + filenameLength));
+                files.push(filename);
+            }
+            offset += 30 + filenameLength + extraFieldLength;
+        }
+        else {
+            offset++;
+        }
+    }
+    return files;
+};
 const uint8ArrayToHexString = (uint8Array) => {
     return Array.prototype.map.call(uint8Array, (byte) => ('00' + byte.toString(16)).slice(-2)).join('');
 };
+const identifyAsfFormat = (data) => {
+    // ASF files all start with the same GUID: 3026b2758e66cf11a6d900aa0062ce6c
+    // To distinguish between audio, video, and application ASF, we need to examine
+    // the stream properties in the ASF header
+    try {
+        // Look for stream properties object GUID starting at offset 30
+        // Audio stream properties: b7dc0791a9b711cf8ee600c00c205365
+        // Video stream properties: bc19efc05b4d11cf9b1100aa00bbcb8b
+        if (data.length < 100) {
+            // Not enough data to analyze, default to application
+            return 'application/vnd.ms-asf';
+        }
+        const hex = uint8ArrayToHexString(data);
+        // Look for video stream properties GUID (indicates video content)
+        if (hex.includes('bc19efc05b4d11cf9b1100aa00bbcb8b')) {
+            return 'video/x-ms-asf';
+        }
+        // Look for audio stream properties GUID (indicates audio content)
+        if (hex.includes('b7dc0791a9b711cf8ee600c00c205365')) {
+            return 'audio/x-ms-asf';
+        }
+        // Check for Windows Media Audio/Video codec identifiers
+        // WMA codec: 161 (0xa1) or 162 (0xa2) or 163 (0xa3)
+        // WMV codec: Common values include various Windows Media Video identifiers
+        // Scan through the header for codec information
+        for (let i = 0; i < Math.min(data.length - 4, 1000); i++) {
+            // Look for audio codec indicators
+            if (data[i] === 0xa1 || data[i] === 0xa2 || data[i] === 0xa3) {
+                // Found WMA codec indicator
+                return 'audio/x-ms-asf';
+            }
+        }
+        // Look for common video indicators in the first 1KB
+        const textContent = new TextDecoder('utf-8', { fatal: false }).decode(data.slice(0, Math.min(1000, data.length)));
+        // Check for video-related strings
+        if (textContent.toLowerCase().includes('video') ||
+            textContent.toLowerCase().includes('wmv') ||
+            textContent.toLowerCase().includes('mpeg')) {
+            return 'video/x-ms-asf';
+        }
+        // Check for audio-related strings
+        if (textContent.toLowerCase().includes('audio') ||
+            textContent.toLowerCase().includes('wma') ||
+            textContent.toLowerCase().includes('music')) {
+            return 'audio/x-ms-asf';
+        }
+        // Default to application/vnd.ms-asf if we can't determine the specific type
+        return 'application/vnd.ms-asf';
+    }
+    catch {
+        // If any error occurs during analysis, default to application type
+        return 'application/vnd.ms-asf';
+    }
+};
+const identifyHeifFormat = (data) => {
+    // HEIF/HEIC files all start with the same ftyp box signature: 667479706174
+    // To distinguish between formats, we need to examine the brand and compatible brands
+    // in the ftyp (file type) box
+    try {
+        if (data.length < 20) {
+            // Not enough data to analyze, default to HEIF
+            return 'image/heif';
+        }
+        const hex = uint8ArrayToHexString(data);
+        // The ftyp box structure:
+        // Bytes 0-3: Box size (4 bytes)
+        // Bytes 4-7: Box type "ftyp" (4 bytes) - 667479706174
+        // Bytes 8-11: Major brand (4 bytes)
+        // Bytes 12-15: Minor version (4 bytes)
+        // Bytes 16+: Compatible brands (4 bytes each)
+        // Extract major brand (4 bytes starting at offset 8)
+        // Convert to ASCII string for easier comparison
+        const majorBrand = String.fromCharCode(data[8], data[9], data[10], data[11]);
+        // Look for compatible brands in the first 100 bytes
+        const compatibleBrandsHex = hex.substring(32, Math.min(200, hex.length)); // Start after major brand + minor version
+        // HEIC brands: 'heic', 'heix', 'hevc', 'hevx'
+        if (majorBrand === 'heic' ||
+            compatibleBrandsHex.includes('68656963') || // 'heic'
+            compatibleBrandsHex.includes('68656978') || // 'heix'
+            compatibleBrandsHex.includes('68657663') || // 'hevc'
+            compatibleBrandsHex.includes('68657678')) { // 'hevx'
+            // Check for sequence/animation indicators
+            if (compatibleBrandsHex.includes('68657673') || // 'hevs' - HEIC sequence
+                compatibleBrandsHex.includes('6d736631') || // 'msf1' - sequence
+                majorBrand === 'hevs') {
+                return 'image/heic-sequence';
+            }
+            return 'image/heic';
+        }
+        // HEIF brands: 'mif1', 'msf1'
+        if (majorBrand === 'mif1' || majorBrand === 'msf1' ||
+            compatibleBrandsHex.includes('6d696631') || // 'mif1'
+            compatibleBrandsHex.includes('6d736631')) { // 'msf1'
+            // Check for sequence/animation indicators
+            if (majorBrand === 'msf1' ||
+                compatibleBrandsHex.includes('6d736631')) { // 'msf1' - sequence
+                return 'image/heif-sequence';
+            }
+            return 'image/heif';
+        }
+        // Check for specific sequence indicators in the data
+        if (hex.includes('6d736631') || // 'msf1' - multi-image sequence
+            hex.includes('68657673')) { // 'hevs' - HEIC sequence
+            // If we find HEIC-related brands, it's HEIC sequence
+            if (hex.includes('68656963') || hex.includes('68657663')) {
+                return 'image/heic-sequence';
+            }
+            return 'image/heif-sequence';
+        }
+        // If we find HEIC indicators but no sequence, it's single HEIC
+        if (hex.includes('68656963') || // 'heic'
+            hex.includes('68657663') || // 'hevc'
+            hex.includes('68656978') || // 'heix'
+            hex.includes('68657678')) { // 'hevx'
+            return 'image/heic';
+        }
+        // Default to HEIF for any other case
+        return 'image/heif';
+    }
+    catch {
+        // If any error occurs during analysis, default to HEIF
+        return 'image/heif';
+    }
+};
+const identifyOggFormat = (data) => {
+    // OGG files all start with "OggS" (4f676753) but can contain different codecs
+    // To distinguish between audio, video, and application OGG, we need to examine
+    // the codec information in the OGG page headers
+    try {
+        if (data.length < 64) {
+            // Not enough data to analyze, default to audio
+            return 'audio/ogg';
+        }
+        const hex = uint8ArrayToHexString(data);
+        // Look for codec identification patterns in the first few hundred bytes
+        // Common video codecs in OGG:
+        // - Theora: "theora" or "\x80theora"
+        // - VP8/VP9: various signatures
+        // - Dirac: "BBCD"
+        // Common audio codecs in OGG:
+        // - Vorbis: "vorbis" or "\x01vorbis"
+        // - Opus: "OpusHead"
+        // - FLAC: "fLaC"
+        // - Speex: "Speex"
+        // Convert some bytes to text for string matching
+        const textContent = new TextDecoder('utf-8', { fatal: false }).decode(data.slice(0, Math.min(512, data.length)));
+        const lowerContent = textContent.toLowerCase();
+        // Check for video codec indicators first (as they're more specific)
+        if (lowerContent.includes('theora') ||
+            hex.includes('8074686f726120') || // "\x80theora "
+            hex.includes('7468656f7261') || // "theora"
+            lowerContent.includes('dirac') ||
+            hex.includes('42424344') || // "BBCD" - Dirac
+            lowerContent.includes('vp8') ||
+            lowerContent.includes('vp9')) {
+            return 'video/ogg';
+        }
+        // Check for audio codec indicators
+        if (lowerContent.includes('vorbis') ||
+            hex.includes('01766f72626973') || // "\x01vorbis"
+            hex.includes('766f72626973') || // "vorbis"
+            lowerContent.includes('opushead') ||
+            hex.includes('4f7075734865616420') || // "OpusHead "
+            lowerContent.includes('speex') ||
+            hex.includes('53706565782020') || // "Speex  "
+            lowerContent.includes('flac') ||
+            hex.includes('664c6143')) { // "fLaC"
+            return 'audio/ogg';
+        }
+        // Look for OGG stream structure patterns
+        // OGG pages have a specific structure, look for multiple "OggS" signatures
+        // which might indicate a complex multimedia container
+        let oggSCount = 0;
+        for (let i = 0; i < Math.min(data.length - 4, 1000); i += 4) {
+            if (data[i] === 0x4f && data[i + 1] === 0x67 &&
+                data[i + 2] === 0x67 && data[i + 3] === 0x53) {
+                oggSCount++;
+            }
+        }
+        // Multiple OGG pages might indicate a more complex application format
+        if (oggSCount > 3) {
+            // Check if it's likely a multimedia container vs pure audio/video
+            if (lowerContent.includes('application') ||
+                lowerContent.includes('metadata') ||
+                lowerContent.includes('index') ||
+                (!lowerContent.includes('audio') && !lowerContent.includes('video') &&
+                    !lowerContent.includes('vorbis') && !lowerContent.includes('theora'))) {
+                return 'application/ogg';
+            }
+        }
+        // Look for file extension hints in metadata (if present)
+        if (lowerContent.includes('.ogv') || lowerContent.includes('video')) {
+            return 'video/ogg';
+        }
+        if (lowerContent.includes('.oga') || lowerContent.includes('audio') || lowerContent.includes('music')) {
+            return 'audio/ogg';
+        }
+        // Check the OGG page header flags
+        // Byte 5 in OGG page header contains flags
+        // If we have enough data, check the stream type
+        if (data.length > 26) {
+            const pageHeaderType = data[5];
+            // Fresh packet start (0x02) often indicates beginning of codec data
+            if ((pageHeaderType & 0x02) === 0x02) {
+                // Look at the packet data starting around byte 27
+                const packetStart = data.slice(27, Math.min(data.length, 50));
+                const packetHex = uint8ArrayToHexString(packetStart);
+                // Check for Vorbis identification header
+                if (packetHex.startsWith('01766f72626973')) {
+                    return 'audio/ogg';
+                }
+                // Check for Theora identification header
+                if (packetHex.startsWith('8074686f726120')) {
+                    return 'video/ogg';
+                }
+            }
+        }
+        // Default to audio/ogg as it's the most common OGG format
+        return 'audio/ogg';
+    }
+    catch {
+        // If any error occurs during analysis, default to audio
+        return 'audio/ogg';
+    }
+};
 
 /**
  * @description
@@ -953,7 +1210,8 @@ const validateFileMimeType = (file, mimeTypes) => {
         const reader = new FileReader();
         reader.onloadend = () => {
             const buffer = reader.result;
-            const headerBytes = new Uint8Array(buffer).slice(0, 8);
+            // Read more bytes to support complex MIME type detection (e.g., ASF format analysis)
+            const headerBytes = new Uint8Array(buffer).slice(0, Math.min(1024, buffer.byteLength));
             const mime = getMimeType(headerBytes);
             if (mimeTypes.includes(mime)) {
                 subscriber.next(null);