@akinon/pz-similar-products 1.92.0-rc.16

package/src/utils/image-validation.ts

@@ -0,0 +1,303 @@
+export interface ImageValidationResult {
+  isValid: boolean;
+  error?: string;
+}
+
+const IMAGE_SIGNATURES = {
+  jpeg: [
+    { bytes: 'ffd8', minLength: 2, description: 'JPEG (Generic)' },
+    { bytes: 'ffd8ffe0', minLength: 4, description: 'JPEG/JFIF' },
+    { bytes: 'ffd8ffe1', minLength: 4, description: 'JPEG/EXIF' },
+    { bytes: 'ffd8ffe2', minLength: 4, description: 'JPEG/Canon' },
+    { bytes: 'ffd8ffe3', minLength: 4, description: 'JPEG/Samsung' },
+    { bytes: 'ffd8ffe8', minLength: 4, description: 'JPEG/SPIFF' },
+    { bytes: 'ffd8ffed', minLength: 4, description: 'JPEG/Photoshop' }
+  ],
+
+  png: [{ bytes: '89504e470d0a1a0a', minLength: 8, description: 'PNG' }],
+
+  gif: [
+    { bytes: '474946383761', minLength: 6, description: 'GIF87a' },
+    { bytes: '474946383961', minLength: 6, description: 'GIF89a' }
+  ],
+
+  webp: {
+    riff: '52494646',
+    webp: '57454250',
+    minLength: 12,
+    description: 'WebP'
+  },
+
+  avif: {
+    ftyp: '66747970',
+    avif: '61766966',
+    minLength: 12,
+    description: 'AVIF'
+  },
+
+  heic: [
+    {
+      ftyp: '66747970',
+      brand: '68656963',
+      minLength: 12,
+      description: 'HEIC'
+    },
+    {
+      ftyp: '66747970',
+      brand: '6d696631',
+      minLength: 12,
+      description: 'HEIF'
+    }
+  ],
+
+  bmp: [{ bytes: '424d', minLength: 2, description: 'BMP' }],
+
+  tiff: [
+    { bytes: '49492a00', minLength: 4, description: 'TIFF (Little Endian)' },
+    { bytes: '4d4d002a', minLength: 4, description: 'TIFF (Big Endian)' }
+  ]
+} as const;
+
+const SUPPORTED_MIME_TYPES = {
+  'image/jpeg': 'jpeg',
+  'image/jpg': 'jpeg',
+  'image/png': 'png',
+  'image/gif': 'gif',
+  'image/webp': 'webp',
+  'image/avif': 'avif',
+  'image/heic': 'heic',
+  'image/heif': 'heic',
+  'image/bmp': 'bmp',
+  'image/tiff': 'tiff',
+  'image/tif': 'tiff'
+} as const;
+
+const FORMAT_NAMES = {
+  jpeg: 'JPEG',
+  png: 'PNG',
+  gif: 'GIF',
+  webp: 'WebP',
+  avif: 'AVIF',
+  heic: 'HEIC/HEIF',
+  bmp: 'BMP',
+  tiff: 'TIFF'
+} as const;
+
+export const isValidImage = (file: File): Promise<boolean> => {
+  return new Promise((resolve) => {
+    if (!(file.type in SUPPORTED_MIME_TYPES)) {
+      resolve(false);
+      return;
+    }
+
+    const img = new Image();
+    img.onload = () => resolve(img.width > 0 && img.height > 0);
+    img.onerror = () => resolve(false);
+    img.src = URL.createObjectURL(file);
+  });
+};
+
+export const checkImageSignature = (file: File): Promise<boolean> => {
+  return new Promise((resolve) => {
+    const formatKey =
+      SUPPORTED_MIME_TYPES[file.type as keyof typeof SUPPORTED_MIME_TYPES];
+    if (!formatKey) {
+      resolve(false);
+      return;
+    }
+
+    const reader = new FileReader();
+    reader.onloadend = (e) => {
+      const result = e.target?.result as ArrayBuffer;
+      const arr = new Uint8Array(result);
+      const header = Array.from(arr)
+        .map((b) => b.toString(16).padStart(2, '0'))
+        .join('');
+
+      let isValid = false;
+
+      switch (formatKey) {
+        case 'jpeg':
+        case 'png':
+        case 'gif':
+        case 'bmp':
+        case 'tiff':
+          const signatures = IMAGE_SIGNATURES[formatKey];
+          isValid = signatures.some((sig) => header.startsWith(sig.bytes));
+          break;
+
+        case 'webp':
+          if (header.length >= 24) {
+            const hasRiff = header.startsWith(IMAGE_SIGNATURES.webp.riff);
+            const hasWebp = header.substr(16, 8) === IMAGE_SIGNATURES.webp.webp;
+            isValid = hasRiff && hasWebp;
+          }
+          break;
+
+        case 'avif':
+          if (header.length >= 24) {
+            const hasFtyp = header.substr(8, 8) === IMAGE_SIGNATURES.avif.ftyp;
+            const hasAvif = header.indexOf(IMAGE_SIGNATURES.avif.avif) !== -1;
+            isValid = hasFtyp && hasAvif;
+          }
+          break;
+
+        case 'heic':
+          if (header.length >= 24) {
+            const hasFtyp =
+              header.substr(8, 8) === IMAGE_SIGNATURES.heic[0].ftyp;
+            const hasHeic = IMAGE_SIGNATURES.heic.some(
+              (variant) => header.indexOf(variant.brand) !== -1
+            );
+            isValid = hasFtyp && hasHeic;
+          }
+          break;
+      }
+
+      resolve(isValid);
+    };
+
+    reader.onerror = () => resolve(false);
+
+    const bytesToRead = ['webp', 'avif', 'heic'].includes(formatKey) ? 24 : 8;
+    reader.readAsArrayBuffer(file.slice(0, bytesToRead));
+  });
+};
+
+export const validateImageMetadata = (dataUrl: string): Promise<boolean> => {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.onload = () => {
+      if (img.width > 10000 || img.height > 10000) {
+        resolve(false);
+        return;
+      }
+
+      const ratio = img.width / img.height;
+      if (ratio > 5 || ratio < 0.2) {
+        resolve(false);
+        return;
+      }
+
+      resolve(true);
+    };
+    img.onerror = () => resolve(false);
+    img.src = dataUrl;
+  });
+};
+
+export const validateImageFile = async (
+  file: File,
+  maxSizeInMB: number = 5
+): Promise<ImageValidationResult> => {
+  const supportedFormats = Object.values(FORMAT_NAMES);
+  const supportedTypes = Object.keys(SUPPORTED_MIME_TYPES);
+
+  if (file.size > maxSizeInMB * 1024 * 1024) {
+    return {
+      isValid: false,
+      error: `File size should be less than ${maxSizeInMB}MB. Supported formats: ${supportedFormats.join(
+        ', '
+      )}`
+    };
+  }
+
+  if (!supportedTypes.includes(file.type)) {
+    return {
+      isValid: false,
+      error: `Unsupported file type. Please use: ${supportedFormats.join(', ')}`
+    };
+  }
+
+  const isImage = await isValidImage(file);
+  if (!isImage) {
+    return {
+      isValid: false,
+      error: `The selected file is not a valid image. Supported formats: ${supportedFormats.join(
+        ', '
+      )}`
+    };
+  }
+
+  const validSignature = await checkImageSignature(file);
+  if (!validSignature) {
+    return {
+      isValid: false,
+      error: `Invalid image format detected. Supported formats: ${supportedFormats.join(
+        ', '
+      )}`
+    };
+  }
+
+  return { isValid: true };
+};
+
+export const validateImageFromDataUrl = async (
+  dataUrl: string
+): Promise<ImageValidationResult> => {
+  const validMetadata = await validateImageMetadata(dataUrl);
+  if (!validMetadata) {
+    return {
+      isValid: false,
+      error: 'Invalid image properties detected (dimensions or aspect ratio)'
+    };
+  }
+
+  return { isValid: true };
+};
+
+export const debugImageSignature = async (
+  file: File
+): Promise<{
+  mimeType: string;
+  format: string;
+  expectedSignatures: string[];
+  actualHeader: string;
+  isValid: boolean;
+}> => {
+  const formatKey =
+    SUPPORTED_MIME_TYPES[file.type as keyof typeof SUPPORTED_MIME_TYPES];
+
+  return new Promise((resolve) => {
+    const reader = new FileReader();
+    reader.onloadend = (e) => {
+      const result = e.target?.result as ArrayBuffer;
+      const arr = new Uint8Array(result);
+      const header = Array.from(arr.slice(0, 24))
+        .map((b) => b.toString(16).padStart(2, '0'))
+        .join('');
+
+      let expectedSignatures: string[] = [];
+
+      if (formatKey && formatKey in IMAGE_SIGNATURES) {
+        const sigs = IMAGE_SIGNATURES[formatKey];
+        if (Array.isArray(sigs)) {
+          expectedSignatures = sigs.map((s) => s.bytes);
+        } else if ('riff' in sigs) {
+          expectedSignatures = [sigs.riff + 'XXXXXXXX' + sigs.webp];
+        } else if ('ftyp' in sigs) {
+          expectedSignatures = [sigs.ftyp];
+        }
+      }
+
+      resolve({
+        mimeType: file.type,
+        format: formatKey || 'unknown',
+        expectedSignatures,
+        actualHeader: header,
+        isValid: formatKey ? true : false
+      });
+    };
+
+    reader.onerror = () =>
+      resolve({
+        mimeType: file.type,
+        format: 'error',
+        expectedSignatures: [],
+        actualHeader: '',
+        isValid: false
+      });
+
+    reader.readAsArrayBuffer(file.slice(0, 24));
+  });
+};

package/src/utils/index.ts

@@ -0,0 +1,161 @@
+import { SimilarProductsSettings } from '../types';
+
+export const defaultSettings: Required<SimilarProductsSettings> = {
+  maxFileSize: 5,
+  imageFormats: ['jpg', 'jpeg', 'png', 'webp'],
+  cropAspectRatio: undefined,
+  resultsPerPage: 20,
+  enableCropping: true,
+  enableFileUpload: true,
+  customStyles: {
+    modal: '',
+    filterSidebar: '',
+    resultsGrid: '',
+    imageSearchModal: '',
+    productItem: '',
+    pagination: '',
+    filterGroup: '',
+    imageSection: ''
+  },
+  customRenderers: {
+    render: {}
+  },
+  theme: {},
+  cssVariables: {}
+};
+
+export function mergeSettings(
+  userSettings?: Partial<SimilarProductsSettings>
+): Required<SimilarProductsSettings> {
+  if (!userSettings) {
+    return defaultSettings;
+  }
+
+  return {
+    ...defaultSettings,
+    ...userSettings,
+    customStyles: {
+      ...defaultSettings.customStyles,
+      ...userSettings.customStyles
+    },
+    customRenderers: {
+      ...defaultSettings.customRenderers,
+      ...userSettings.customRenderers,
+      render: {
+        ...defaultSettings.customRenderers.render,
+        ...userSettings.customRenderers?.render
+      }
+    },
+    theme: {
+      ...defaultSettings.theme,
+      ...userSettings.theme
+    },
+    cssVariables: {
+      ...defaultSettings.cssVariables,
+      ...userSettings.cssVariables
+    }
+  };
+}
+
+export function validateImageFile(
+  file: File,
+  settings: Required<SimilarProductsSettings>
+): { isValid: boolean; error?: string } {
+  const maxSizeBytes = settings.maxFileSize * 1024 * 1024;
+  if (file.size > maxSizeBytes) {
+    return {
+      isValid: false,
+      error: `File size exceeds ${settings.maxFileSize}MB limit`
+    };
+  }
+
+  const fileExtension = file.name.split('.').pop()?.toLowerCase();
+  if (!fileExtension || !settings.imageFormats.includes(fileExtension)) {
+    return {
+      isValid: false,
+      error: `File format not supported. Allowed formats: ${settings.imageFormats.join(
+        ', '
+      )}`
+    };
+  }
+
+  const validMimeTypes = settings.imageFormats.map(
+    (format) => `image/${format === 'jpg' ? 'jpeg' : format}`
+  );
+  if (!validMimeTypes.includes(file.type)) {
+    return {
+      isValid: false,
+      error: 'Invalid file type'
+    };
+  }
+
+  return { isValid: true };
+}
+
+export function debounce<T extends (...args: any[]) => any>(
+  func: T,
+  wait: number
+): (...args: Parameters<T>) => void {
+  let timeout: NodeJS.Timeout;
+
+  return (...args: Parameters<T>) => {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func(...args), wait);
+  };
+}
+
+export function dataURLToBlob(dataURL: string): Blob {
+  const arr = dataURL.split(',');
+  const mime = arr[0].match(/:(.*?);/)?.[1];
+  const bstr = atob(arr[1]);
+  let n = bstr.length;
+  const u8arr = new Uint8Array(n);
+
+  while (n--) {
+    u8arr[n] = bstr.charCodeAt(n);
+  }
+
+  return new Blob([u8arr], { type: mime });
+}
+
+export function formatFileSize(bytes: number): string {
+  if (bytes === 0) return '0 Bytes';
+
+  const k = 1024;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}
+
+export function supportsFileAPI(): boolean {
+  return !!(window.File && window.FileReader && window.FileList && window.Blob);
+}
+
+export function getDevicePixelRatio(): number {
+  return window.devicePixelRatio || 1;
+}
+
+export function calculateOptimalDimensions(
+  originalWidth: number,
+  originalHeight: number,
+  maxWidth: number,
+  maxHeight: number
+): { width: number; height: number } {
+  const aspectRatio = originalWidth / originalHeight;
+
+  let width = originalWidth;
+  let height = originalHeight;
+
+  if (width > maxWidth) {
+    width = maxWidth;
+    height = width / aspectRatio;
+  }
+
+  if (height > maxHeight) {
+    height = maxHeight;
+    width = height * aspectRatio;
+  }
+
+  return { width: Math.round(width), height: Math.round(height) };
+}