useImage.ts - master - F1lya/Modal_Window

useImage.ts
97 строк2 KB
F1lya
upload files
20 окт 2025, 14:17
20 окт 2025, 14:17f9aac0b
import { useState, useCallback } from 'react';
import { ImageState, ImageFormat } from '../types';

export const useImage = () => {
  const [imageState, setImageState] = useState<ImageState>({
    image: null,
    imageUrl: '',
    naturalSize: { width: 0, height: 0 },
    isLoading: false,
    error: null
  });

  const loadImage = useCallback((file: File): Promise<void> => {
    return new Promise((resolve, reject) => {
      const url = URL.createObjectURL(file);
      const img = new Image();

      setImageState(prev => ({ ...prev, isLoading: true, error: null }));

      img.onload = () => {
        setImageState({
          image: img,
          imageUrl: url,
          naturalSize: {
            width: img.naturalWidth,
            height: img.naturalHeight
          },
          isLoading: false,
          error: null
        });
        resolve();
      };

      img.onerror = () => {
        URL.revokeObjectURL(url);
        setImageState(prev => ({
          ...prev,
          isLoading: false,
          error: 'Failed to load image. The file may be corrupted or unsupported.'
        }));
        reject(new Error('Failed to load image'));
      };

      img.src = url;
    });
  }, []);

  const getImageFormat = useCallback((fileName: string): ImageFormat => {
    const ext = fileName.toLowerCase().split('.').pop();
    switch (ext) {
      case 'jpg':
      case 'jpeg':
        return 'jpeg';
      case 'gif':
        return 'gif';
      case 'webp':
        return 'webp';
      default:
        return 'png';
    }
  }, []);

  const validateImageFile = useCallback((file: File): { isValid: boolean; error?: string } => {
    const validTypes = ['image/png', 'image/jpeg', 'image/gif', 'image/webp'];
    const maxSize = 50 * 1024 * 1024; // 50MB

    if (!validTypes.includes(file.type)) {
      return {
        isValid: false,
        error: 'Please select a valid image format (PNG, JPEG, GIF, or WebP).'
      };
    }

    if (file.size > maxSize) {
      return {
        isValid: false,
        error: 'Image size must be less than 50MB.'
      };
    }

    return { isValid: true };
  }, []);

  const cleanup = useCallback(() => {
    if (imageState.imageUrl) {
      URL.revokeObjectURL(imageState.imageUrl);
    }
  }, [imageState.imageUrl]);

  return {
    imageState,
    loadImage,
    getImageFormat,
    validateImageFile,
    cleanup
  };
};