Skip to main content

Utility Functions

Overview​

Kumpulan utility functions yang reusable untuk mempermudah development aplikasi frontend. Functions ini mencakup image processing, data transformation, dan common utilities.

Available Utilities​

ImageCompressor​

Utility untuk kompresi gambar secara client-side sebelum upload.

Features:

  • Automatic image compression
  • Configurable quality settings
  • Maximum width/height constraints
  • File size target compression
  • Multiple format support (JPEG, PNG, WebP)
  • Batch compression support

Use Cases:

  • Optimize images before upload
  • Reduce bandwidth usage
  • Improve upload performance
  • Client-side image optimization
import { compressImage } from '@/utils/ImageCompressor'

const compressedFile = await compressImage(file, {
  maxWidth: 1920,
  maxHeight: 1080,
  quality: 0.8,
  maxSizeKB: 500
})

CommonUtilsClean​

Common utility functions untuk berbagai keperluan aplikasi.

Features:

  • Data formatting utilities
  • String manipulation helpers
  • Date/time utilities
  • Array/object helpers
  • Validation functions

Use Cases:

  • Format currency, numbers, dates
  • String operations (capitalize, truncate, etc)
  • Data validation
  • Common transformations
import { formatCurrency, truncateText } from '@/utils/CommonUtilsClean'

const price = formatCurrency(150000) // "Rp 150.000"
const excerpt = truncateText(longText, 100) // "First 100 chars..."

Common Patterns​

Image Upload with Compression​

import { useState } from 'react'
import { compressImage } from '@/utils/ImageCompressor'
import { FieldDropzoneNew } from '@/components/Field/FieldDropzoneNew'

function ImageUploadForm() {
  const [files, setFiles] = useState([])

  const handleFilesChange = async (newFiles) => {
    // Compress images before upload
    const compressed = await Promise.all(
      newFiles.map(file => 
        compressImage(file, {
          maxWidth: 1920,
          maxHeight: 1080,
          quality: 0.8,
          maxSizeKB: 500
        })
      )
    )
    
    setFiles(compressed)
  }

  return (
    <FieldDropzoneNew
      label="Upload Photos"
      value={files}
      onFilesChange={handleFilesChange}
      enableImageCompression={true}
    />
  )
}

Data Formatting​

import { 
  formatCurrency, 
  formatDate, 
  truncateText 
} from '@/utils/CommonUtilsClean'

function ProductCard({ product }) {
  return (
    <div>
      <h3>{truncateText(product.name, 50)}</h3>
      <p className="price">{formatCurrency(product.price)}</p>
      <p className="date">Added: {formatDate(product.createdAt)}</p>
    </div>
  )
}

Best Practices​

1. Image Compression Settings​

Choose appropriate compression settings based on use case:

// High quality for portfolio/gallery
const portfolioSettings = {
  maxWidth: 2560,
  maxHeight: 1440,
  quality: 0.95,
  maxSizeKB: 2000
}

// Balanced for general use
const generalSettings = {
  maxWidth: 1920,
  maxHeight: 1080,
  quality: 0.8,
  maxSizeKB: 500
}

// Aggressive for thumbnails
const thumbnailSettings = {
  maxWidth: 400,
  maxHeight: 400,
  quality: 0.7,
  maxSizeKB: 50
}

2. Error Handling​

Always handle compression errors:

try {
  const compressed = await compressImage(file, settings)
  // Use compressed file
} catch (error) {
  console.error('Compression failed:', error)
  // Fallback to original file
}

3. Performance​

Compress in batches for better UX:

const compressFiles = async (files) => {
  const results = []
  
  for (const file of files) {
    try {
      const compressed = await compressImage(file)
      results.push(compressed)
      
      // Update progress
      setProgress((results.length / files.length) * 100)
    } catch (error) {
      results.push(file) // Use original on error
    }
  }
  
  return results
}

Integration Examples​

With React Hook Form​

import { useForm } from 'react-hook-form'
import { compressImage } from '@/utils/ImageCompressor'

function ProfileForm() {
  const { register, setValue, watch } = useForm()
  
  const handleImageUpload = async (e) => {
    const file = e.target.files[0]
    const compressed = await compressImage(file)
    setValue('avatar', compressed)
  }
  
  return (
    <form>
      <input 
        type="file" 
        onChange={handleImageUpload}
        accept="image/*"
      />
    </form>
  )
}

With API Upload​

import { compressImage } from '@/utils/ImageCompressor'

async function uploadImage(file) {
  // Compress before upload
  const compressed = await compressImage(file, {
    maxWidth: 1920,
    quality: 0.8
  })
  
  const formData = new FormData()
  formData.append('file', compressed)
  
  const response = await fetch('/api/upload', {
    method: 'POST',
    body: formData
  })
  
  return response.json()
}

Technology Stack: JavaScript, TypeScript, Canvas API, File API
Use Case: Image optimization, Data formatting, Common utilities
Last Updated: November 2025