/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React from "https://esm.sh/react@18.2.0"; import ReactDOM from "https://esm.sh/react-dom@18.2.0/client"; import JSZip from "https://esm.sh/jszip@3.10.0"; interface CompressedFile { original: File; compressed: File | null; progress: number; originalPreview?: string; compressedPreview?: string; error?: string; } function ErrorFallback({ error }: { error: Error }) { return (

🚨 Something Went Wrong

An unexpected error occurred. Please try again.

Error: {error.message}

); } function App() { const [files, setFiles] = React.useState([]); const [isDragging, setIsDragging] = React.useState(false); const [isDownloadingAll, setIsDownloadingAll] = React.useState(false); const [totalCompressedPhotos, setTotalCompressedPhotos] = React.useState(0); const [error, setError] = React.useState(null); React.useEffect(() => { // Cleanup preview URLs when component unmounts return () => { files.forEach(file => { if (file.originalPreview) URL.revokeObjectURL(file.originalPreview); if (file.compressedPreview) URL.revokeObjectURL(file.compressedPreview); }); }; }, [files]); const createPreview = (file: File): Promise => { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = (event) => { const preview = event.target?.result as string; console.log('Preview generated:', { fileName: file.name, fileType: file.type, previewLength: preview.length }); resolve(preview); }; reader.onerror = (error) => { console.error('Preview generation error:', error); reject(new Error('Preview generation failed')); }; reader.readAsDataURL(file); }); }; const handleFileUpload = async (uploadedFiles: FileList | File[]) => { try { const newFiles: CompressedFile[] = await Promise.all( Array.from(uploadedFiles) .filter(file => file.type.startsWith('image/')) .map(async (file) => { try { const originalPreview = await createPreview(file); console.log('File upload preview:', { name: file.name, type: file.type, size: file.size, previewType: typeof originalPreview }); return { original: file, originalPreview, compressed: null, compressedPreview: undefined, progress: 0 }; } catch (previewError) { console.error('Preview generation failed for file:', file.name, previewError); return { original: file, compressed: null, progress: 0, error: 'Preview generation failed' }; } }) ); setFiles(prevFiles => [...prevFiles, ...newFiles]); compressFiles(newFiles); } catch (err) { console.error('File upload failed', err); setError(err instanceof Error ? err : new Error('File upload failed')); } }; // Rest of the code remains the same as in the previous implementation return (

🖼️ Multi-Image Compressor

Simple to Use Tool to Reduce the File Size of Photos

{ console.log('Files selected:', e.target.files); handleFileUpload(e.target.files || []); }} style={{ margin: '20px 0', backgroundColor: '#0f3460', color: '#e0e0e0', padding: '10px', borderRadius: '5px' }} />

Drag and drop images here or click to select

{files.map((file, index) => (

{file.originalPreview && (

{ console.error('Image load error:', { src: file.originalPreview, event: e }); }} style={{ maxWidth: '100%', maxHeight: '200px', objectFit: 'contain', marginBottom: '10px' }} /> )}

Original: {file.original.name}

Original Size: {(file.original.size / 1024).toFixed(2)} kB

{file.progress > 0 && file.progress < 100 && (

Compressing... {file.progress}%

)} {file.compressed && ( <> {file.compressedPreview && (

{ console.error('Compressed image load error:', { src: file.compressedPreview, event: e }); }} style={{ maxWidth: '100%', maxHeight: '200px', objectFit: 'contain', marginBottom: '10px' }} /> )}

Compressed Size: {(file.compressed.size / 1024).toFixed(2)} kB

)} {file.error && (

{file.error}

)}

))}

); } export default async function server(request: Request): Promise { return new Response(` Multi-Image Compressor

`, { headers: { "content-type": "text/html" } }); }

MultiImageCompressor