compressorjs

import Compressor from 'compressorjs'; // Create a dummy file input for demonstration purposes const inputElement = document.createElement('input'); inputElement.setAttribute('type', 'file'); inputElement.setAttribute('id', 'fileInput'); inputElement.setAttribute('accept', 'image/*'); document.body.appendChild(inputElement); document.getElementById('fileInput')?.addEventListener('change', (e) => { const target = e.target as HTMLInputElement; const file = target.files?.[0]; if (!file) { console.log('No file selected.'); return; } new Compressor(file, { quality: 0.6, maxWidth: 800, maxHeight: 600, // Output the original image instead of the compressed one if the compressed size is larger. strict: true, success(result) { console.log('Compression successful! Compressed file:', result); // The 'result' is a File object (or Blob in older versions). // You can now upload this 'result' to your server. const formData = new FormData(); formData.append('compressedImage', result, result.name); // Example of what you might do next (e.g., using fetch or axios): // fetch('/path/to/upload', { method: 'POST', body: formData }) // .then(response => console.log('Upload success', response)) // .catch(error => console.error('Upload error', error)); const reader = new FileReader(); reader.onload = (event) => { const img = document.createElement('img'); img.src = event.target?.result as string; img.style.maxWidth = '200px'; document.body.appendChild(img); console.log('Displaying compressed image preview.'); }; reader.readAsDataURL(result); }, error(err) { console.error('Compression error:', err.message); }, }); });