@pagamio/frontend-commons-lib/lib/shared/hooks/useImageUpload.js

Pagamio library for Frontend reusable components like the form engine and table container

import { useCallback, useState } from 'react';
import { generateSecureRandomString, uploadFileWithXHR } from '../utils/functionHelper';
export const useImageUpload = ({ project, env, endpoint }) => {
    const resolvedEndpoint = endpoint ?? process.env.NEXT_PUBLIC_UPLOAD_URL_ENDPOINT;
    if (!resolvedEndpoint) {
        throw new Error('NEXT_PUBLIC_UPLOAD_URL_ENDPOINT is not configured.');
    }
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState(null);
    const getPresignedUrl = useCallback(async (fileName, contentType) => {
        setIsLoading(true);
        setError(null);
        try {
            const response = await fetch(resolvedEndpoint, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    project,
                    env,
                    fileName,
                    contentType,
                }),
            });
            if (!response.ok) {
                throw new Error(`Failed to get upload URL: ${response.statusText}`);
            }
            // --- FIX: unwrap .data if present ---
            const json = await response.json();
            const data = json.data || json;
            return {
                uploadURL: data.uploadURL,
                publicURL: data.publicURL,
            };
        }
        catch (err) {
            const error = err instanceof Error ? err : new Error('Failed to get upload URL');
            setError(error);
            throw error;
        }
        finally {
            setIsLoading(false);
        }
    }, [project, env, resolvedEndpoint]);
    const uploadFile = useCallback(async (file) => {
        const timestamp = Date.now();
        const randomString = generateSecureRandomString();
        const extension = file.name.split('.').pop() || 'jpg';
        const fileName = `${timestamp}_${randomString}.${extension}`;
        try {
            const { uploadURL, publicURL } = await getPresignedUrl(fileName, file.type);
            // Use shared helper for XHR upload
            await uploadFileWithXHR(uploadURL, file);
            return publicURL;
        }
        catch (err) {
            const error = err instanceof Error ? err : new Error('Upload failed');
            setError(error);
            throw error;
        }
    }, [getPresignedUrl, generateSecureRandomString]);
    return {
        getPresignedUrl,
        uploadFile,
        isLoading,
        error,
    };
};