ImagePickerKMP – Kotlin Multiplatform Camera & Gallery Picker

@Composable
fun MyScreen(innerPadding: PaddingValues) {

    // 1. Create the picker with a global config
    val picker = rememberImagePickerKMP(
        config = ImagePickerKMPConfig(
            enableCrop = false,
            galleryConfig = GalleryConfig(
                allowMultiple = true,
                selectionLimit = 10,
                includeExif = true,
                redactGpsData = true,
                mimeTypes = listOf(MimeType.IMAGE_JPEG)
            )
        )
    )

    // 2. Read the reactive result
    val result = picker.result

    Column(
        modifier = Modifier
            .padding(innerPadding)
            .fillMaxSize()
    ) {
        // 3. React to each picker state
        Box(
            modifier = Modifier.fillMaxWidth().weight(1f),
            contentAlignment = Alignment.Center
        ) {
            when (result) {

                is ImagePickerResult.Loading -> {
                    Column(horizontalAlignment = Alignment.CenterHorizontally) {
                        CircularProgressIndicator()
                        Text("Selecting...", color = Color.Gray)
                    }
                }

                is ImagePickerResult.Success -> {
                    val photos = result.photos
                    if (photos.size == 1) {
                        // Single photo (camera or simple gallery)
                        val painter = photos.first().loadPainter()
                        if (painter != null) {
                            Image(painter = painter, contentDescription = "Captured photo")
                        }
                    } else {
                        // Multiple gallery photos
                        LazyVerticalGrid(columns = GridCells.Fixed(2)) {
                            items(photos) { photo ->
                                val painter = photo.loadPainter()
                                if (painter != null) {
                                    Image(painter = painter, contentDescription = null)
                                }
                            }
                        }
                    }
                }

                is ImagePickerResult.Error ->
                    Text("Error: ${result.exception.message}", color = Color.Red)

                is ImagePickerResult.Dismissed,
                is ImagePickerResult.Idle ->
                    Text("No image selected", color = Color.Gray)
            }
        }

        // 4. Buttons that trigger the picker directly
        Row(modifier = Modifier.fillMaxWidth().padding(16.dp)) {
            Button(
                onClick = { picker.launchCamera() },
                modifier = Modifier.weight(1f)
            ) { Text("Camera") }

            Button(
                onClick = { picker.launchGallery() },
                modifier = Modifier.weight(1f)
            ) { Text("Gallery") }
        }
    }
}

// JPEG only, max 5 photos, with EXIF for this launch
picker.launchGallery(
    allowMultiple = true,
    selectionLimit = 5,
    mimeTypes = listOf(MimeType.IMAGE_JPEG),
    includeExif = true,
    redactGpsData = false // GPS included just for this launch
)

// Camera with HIGH compression, only for this tap
// Crop is controlled via ImagePickerKMPConfig(cropConfig = CropConfig(enabled = true))
picker.launchCamera(
    cameraCaptureConfig = CameraCaptureConfig(
        compressionLevel = CompressionLevel.HIGH,
        includeExif = true
    ),
    onDismiss = { /* specific callback on close */ },
    onError = { e -> println("Error: ${e.message}") }
)

when (val result = picker.result) {
    is ImagePickerResult.Idle ->
        Text("No image selected", color = Color.Gray)

    is ImagePickerResult.Loading ->
        CircularProgressIndicator()

    is ImagePickerResult.Success -> {
        // result.photos: List<PhotoResult>
        // result.first: PhotoResult? (first photo, useful for camera)
        result.photos.forEach { photo ->
            val painter = photo.loadPainter()    // Painter for Compose
            val bytes   = photo.loadBytes()      // ByteArray for file operations
            val bitmap  = photo.loadImageBitmap() // ImageBitmap for graphics
            val base64  = photo.loadBase64()     // Base64 for APIs
        }
    }

    is ImagePickerResult.Dismissed ->
        Text("Cancelled by user")

    is ImagePickerResult.Error ->
        Text("Error: ${result.exception.message}", color = Color.Red)
}

var showCamera by remember { mutableStateOf(false) }
var photo by remember { mutableStateOf<PhotoResult?>(null) }

Box(modifier = Modifier.fillMaxSize()) {
    if (showCamera) {
        ImagePickerLauncher(
            config = ImagePickerConfig(
                onPhotoCaptured = { result ->
                    photo = result
                    showCamera = false
                },
                onError = { showCamera = false },
                onDismiss = { showCamera = false }
            )
        )
    }
    Button(onClick = { showCamera = true }) {
        Text("Open Camera")
    }
}

ImagePickerLauncher(
    config = ImagePickerConfig(
        onPhotoCaptured = { result -> /* handle result */ },
        onDismiss = { showCamera = false },
        cameraCaptureConfig = CameraCaptureConfig(
            compressionLevel = CompressionLevel.MEDIUM,
            skipConfirmation = false,
            includeExif = true,
            cropConfig = CropConfig(
                enabled = true,
                circularCrop = true,
                squareCrop = true,
                freeformCrop = true
            )
        )
    )
)

var showGallery by remember { mutableStateOf(false) }

if (showGallery) {
    GalleryPickerLauncher(
        config = GalleryPickerConfig(includeExif = true),
        onPhotosSelected = { photos ->
            showGallery = false
        },
        onError = { showGallery = false },
        onDismiss = { showGallery = false },
        allowMultiple = false
    )
}

GalleryPickerLauncher(
    onPhotosSelected = { photos ->
        photos.forEach { photo ->
            println("Camera: ${photo.exif?.camera}")
            println("GPS: ${photo.exif?.latitude}, ${photo.exif?.longitude}")
            println("Size: ${photo.fileSize} bytes")
        }
    },
    onError = { error -> mimeTypeMismatchMessage = error.message },
    onDismiss = { showGallery = false },
    allowMultiple = true,
    mimeTypes = listOf(
        MimeType.IMAGE_JPEG,
        MimeType.IMAGE_PNG,
        MimeType.IMAGE_WEBP
    ),
    mimeTypeMismatchMessage = "Only JPEG, PNG and WebP images are allowed"
)

GalleryPickerLauncher(
    allowMultiple = true,
    mimeTypes = listOf(
        MimeType.IMAGE_JPEG,
        MimeType.IMAGE_PNG,
        MimeType.APPLICATION_PDF
    ),
    onPhotosSelected = { files -> /* handle mixed files */ },
    onError = { },
    onDismiss = { showGallery = false }
)

val picker = rememberImagePickerKMP(
    config = ImagePickerKMPConfig(
        cropConfig = CropConfig(
            enabled = true,
            circularCrop = true,
            squareCrop = true,
            freeformCrop = true
        )
    )
)

// isCropActive = true while the crop UI is shown
if (picker.isCropActive) {
    CircularProgressIndicator()
}

Button(onClick = { picker.launchCamera() }) { Text("Camera + Crop") }
Button(onClick = { picker.launchGallery() }) { Text("Gallery + Crop") }

ImagePickerLauncher(
    config = ImagePickerConfig(
        onPhotoCaptured = { result -> photo = result },
        onDismiss = { showCamera = false },
        cameraCaptureConfig = CameraCaptureConfig(
            cropConfig = CropConfig(
                enabled = true,
                circularCrop = true,  // show circle crop button
                squareCrop = true,    // show square crop button
                freeformCrop = true   // show free-form crop button
            )
        )
    )
)

// Camera with compression
ImagePickerLauncher(
    config = ImagePickerConfig(
        cameraCaptureConfig = CameraCaptureConfig(
            compressionLevel = CompressionLevel.HIGH
        )
    )
)

// Gallery with compression
GalleryPickerLauncher(
    compressionLevel = CompressionLevel.MEDIUM,
    onPhotosSelected = { /* compressed photos */ },
    onError = { },
    onDismiss = { }
)

ImagePickerLauncher(
    config = ImagePickerConfig(
        onPhotoCaptured = { result ->
            result.exif?.let { exif ->
                println("GPS: ${exif.latitude}, ${exif.longitude}")
                println("Camera: ${exif.cameraModel}")
                println("Date: ${exif.dateTaken}")
                println("Flash: ${exif.flash}")
                println("ISO: ${exif.iso}")
                println("Exposure: ${exif.exposureTime}")
                println("Size: ${exif.imageWidth} x ${exif.imageHeight} px")
            }
        },
        cameraCaptureConfig = CameraCaptureConfig(includeExif = true)
    )
)

// Gallery EXIF (iOS requires photo library permission)
GalleryPickerLauncher(
    config = GalleryPickerConfig(includeExif = true),
    onPhotosSelected = { photos ->
        photos.forEach { photo ->
            val gps = "${photo.exif?.latitude}, ${photo.exif?.longitude}"
        }
    },
    onError = { },
    onDismiss = { }
)

ImagePickerLauncher(
    config = ImagePickerConfig(
        onPhotoCaptured = { result ->
            // For Compose UI
            val painter: Painter = result.loadPainter()

            // For file operations / upload
            val bytes: ByteArray = result.loadBytes()

            // For canvas / graphics
            val bitmap: ImageBitmap = result.loadImageBitmap()

            // For REST APIs
            val base64: String = result.loadBase64()

            // File info
            println("Name: ${result.fileName}")
            println("Size: ${result.fileSize} bytes")
            println("MIME: ${result.mimeType}")

            // Convert to KB
            val sizeKB = (result.fileSize ?: 0) / 1024.0
        }
    )
)

// Convert to string list
val strings = MimeType.toMimeTypeStrings(
    MimeType.IMAGE_JPEG,
    MimeType.IMAGE_PNG
)
// → ["image/jpeg", "image/png"]

// Parse from string
val mt = MimeType.fromString("image/webp")
// → MimeType.IMAGE_WEBP

// Predefined groups
MimeType.COMMON_IMAGE_TYPES   // JPEG, PNG, GIF, WebP
MimeType.ALL_SUPPORTED_TYPES  // all enum entries

ImagePickerLauncher(
    config = ImagePickerConfig(
        onPhotoCaptured = { /* ... */ },
        cameraCaptureConfig = CameraCaptureConfig(
            captureButtonSize = 80.dp,
            uiConfig = UiConfig(
                buttonColor = Color(0xFF0EA5E9),   // capture button color
                iconColor = Color.White,          // flash / switch icons color
                buttonSize = 80.dp,
                flashIcon = Icons.Default.FlashOn,
                switchCameraIcon = Icons.Default.Cameraswitch
            )
        )
    )
)

CameraCaptureConfig(
    cameraCallbacks = CameraCallbacks(
        onCameraReady = {
            // Camera preview is ready — hide loading indicator
            isLoading = false
        },
        onCameraSwitch = {
            // User switched between front/back camera
        },
        onPermissionError = { exception ->
            // Permission denied or unavailable
            showError(exception.message)
        },
        onGalleryOpened = {
            // User navigated to gallery from camera
        }
    )
)

ImagePickerLauncher(
    config = ImagePickerConfig(
        onPhotoCaptured = { result -> // called immediately after capture },
        onError = { },
        cameraCaptureConfig = CameraCaptureConfig(
            permissionAndConfirmationConfig = PermissionAndConfirmationConfig(
                skipConfirmation = true   // no review screen shown
            )
        )
    )
)

CameraCaptureConfig(
    permissionAndConfirmationConfig = PermissionAndConfirmationConfig(
        customConfirmationView = { photoResult, onConfirm, onRetry ->
            MyConfirmationView(
                result = photoResult,
                onConfirm = onConfirm,
                onRetry = onRetry
            )
        }
    )
)

// Example implementation:
@Composable
fun MyConfirmationView(
    result: PhotoResult,
    onConfirm: (PhotoResult) -> Unit,
    onRetry: () -> Unit
) {
    Column(modifier = Modifier.fillMaxSize().padding(16.dp)) {
        // Show preview using result.uri
        AsyncImage(
            model = result.uri,          // ✅ correct — use .uri not .image
            contentDescription = "Preview",
            modifier = Modifier.fillMaxWidth().weight(1f)
                .clip(RoundedCornerShape(16.dp)),
            contentScale = ContentScale.Crop
        )
        // Show file info using correct fields
        Text("Size: ${(result.fileSize ?: 0) / 1024} KB")  // ✅ fileSize in bytes
        Text("Format: ${result.mimeType ?: "unknown"}")         // ✅ mimeType (not .format)
        Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.spacedBy(12.dp)) {
            OutlinedButton(onClick = onRetry, modifier = Modifier.weight(1f)) {
                Text("Retry")
            }
            Button(onClick = { onConfirm(result) }, modifier = Modifier.weight(1f)) {
                Text("Use Photo")
            }
        }
    }
}

PermissionAndConfirmationConfig(
    customDeniedDialog = { onRetry ->
        Dialog(onDismissRequest = {}) {
            Card(shape = RoundedCornerShape(16.dp)) {
                Column(modifier = Modifier.padding(24.dp), horizontalAlignment = Alignment.CenterHorizontally) {
                    Text("Camera permission needed", fontWeight = FontWeight.Bold)
                    Spacer(Modifier.height(12.dp))
                    Text("We need camera access to take photos.", color = Color.Gray)
                    Spacer(Modifier.height(20.dp))
                    Button(onClick = onRetry, modifier = Modifier.fillMaxWidth()) {
                        Text("Grant Permission")
                    }
                }
            }
        }
    }
)

PermissionAndConfirmationConfig(
    customSettingsDialog = { onOpenSettings ->
        Dialog(onDismissRequest = {}) {
            Card(shape = RoundedCornerShape(16.dp)) {
                Column(modifier = Modifier.padding(24.dp), horizontalAlignment = Alignment.CenterHorizontally) {
                    Text("Permission Permanently Denied", fontWeight = FontWeight.Bold)
                    Spacer(Modifier.height(12.dp))
                    Text("Go to Settings > Permissions > Camera to enable access.", color = Color.Gray)
                    Spacer(Modifier.height(20.dp))
                    Button(onClick = onOpenSettings, modifier = Modifier.fillMaxWidth()) {
                        Text("Open Settings")
                    }
                }
            }
        }
    }
)

ImagePickerLauncher(
    config = ImagePickerConfig(
        onPhotoCaptured = { result ->
            // result.uri, result.fileSize (bytes), result.mimeType, result.width, result.height
        },
        onError = { exception -> showError(exception.message) },
        onDismiss = { navigateBack() },
        cameraCaptureConfig = CameraCaptureConfig(
            compressionLevel = CompressionLevel.HIGH,
            preference = CapturePhotoPreference.QUALITY,
            uiConfig = UiConfig(
                buttonColor = Color(0xFF0EA5E9),
                iconColor = Color.White
            ),
            cameraCallbacks = CameraCallbacks(
                onCameraReady = { isLoading = false },
                onPermissionError = { showPermissionBanner() }
            ),
            permissionAndConfirmationConfig = PermissionAndConfirmationConfig(
                skipConfirmation = false,
                customConfirmationView = { photoResult, onConfirm, onRetry ->
                    MyConfirmationView(photoResult, onConfirm, onRetry)
                },
                customDeniedDialog = { onRetry ->
                    MyDeniedDialog(onRetry = onRetry)
                },
                customSettingsDialog = { onOpenSettings ->
                    MySettingsDialog(onOpenSettings = onOpenSettings)
                }
            )
        ),
        enableCrop = false
    )
)

GalleryPickerLauncher(
    config = GalleryConfig(
        allowMultiple = true,
        selectionLimit = 10,         // iOS only — max 10 items
        includeExif = true,
        redactGpsData = false,       // expose GPS (inform user!)
        mimeTypes = listOf(MimeType.IMAGE_JPEG, MimeType.IMAGE_PNG)
    ),
    onPhotosSelected = { photos -> /* ... */ },
    onError = { },
    onDismiss = { }
)

npm install imagepickerkmp

import { useImagePicker } from 'imagepickerkmp';

function PhotoUploader() {
  const { openCamera, openGallery, result } = useImagePicker({
    onPhotoCaptured: (photo) => {
      console.log('Photo:', photo.fileName, photo.fileSize);
    },
    onError: (err) => console.error(err)
  });

  return (
    <div>
      <button onClick={openCamera}>Open Camera</button>
      <button onClick={openGallery}>Open Gallery</button>
      {result && <img src={result.uri} alt="captured" />}
    </div>
  );
}

var isOCRActive by remember { mutableStateOf(false) }
var ocrResult by remember { mutableStateOf<OCRResult?>(null) }

@OptIn(ExperimentalOCRApi::class)
if (isOCRActive) {
    ImagePickerLauncherOCR(
        config = ImagePickerOCRConfig(
            scanMode = ScanMode.Cloud(
                provider = CloudOCRProvider.Gemini("YOUR_GEMINI_API_KEY")
            ),
            onOCRCompleted = { result ->
                ocrResult = result
                isOCRActive = false
            },
            onError = { isOCRActive = false },
            onCancel = { isOCRActive = false },
            allowedMimeTypes = listOf(MimeType.APPLICATION_PDF, MimeType.IMAGE_ALL),
            directCameraLaunch = false
        )
    )
}

CloudOCRProvider.Custom(
    name = "My OCR Service",
    baseUrl = "https://api.mycompany.com/ocr/analyze",
    apiKey = "abc123",
    headers = mapOf(
        "X-API-Version" to "2.1",
        "X-Client-ID" to "mobile-app",
        "Authorization" to "Bearer $token"
    ),
    requestFormat = RequestFormat.MULTIPART_FORM,
    model = "enterprise-model-v3"
)

GalleryPickerLauncher(
    allowMultiple = true,
    mimeTypes = listOf(
        MimeType.IMAGE_ALL,
        MimeType.APPLICATION_PDF
    ),
    onPhotosSelected = { files ->
        files.forEach { file ->
            when (file.mimeType) {
                "application/pdf" -> handlePDF(file)
                else -> handleImage(file)
            }
        }
    },
    onError = { },
    onDismiss = { showGallery = false }
)