Image Picker

Overview

ImagePicker is a very-much wanted component that brings you blob data from input file.

It is what been called purpose-only component, which means that it does not have UI design but rather composed of just functionality.

It's up to you to design it thanks to slot, and examples below will show you how to do it.

Single ImagePicker

Like an input file, the basic ImagePicker lets you select an image after clicking on the trigger element.

When designing your ui component, pass alpinejs x-bind attribute"trigger" to your trigger component and grab your image with alpinejs imagePickerData "selectedImages" property.

Check example below.

P.S: As a reminder, returned value from input file is an array of file, even if only one has been choosen.

Copied !

import { Button } from "$components/button.component";
import { ImagePicker } from "$components/imagepicker.component";
import { Image } from "$components/image.component";

export function SingleImagePickerExample() {
	return (
		<ImagePicker>
			<div class="flex flex-col gap-y-4">
				<Button
					class="place-self-center"
					text="Choose a file"
					x-bind="trigger"
				/>
				<div class="flex flex-wrap gap-x-2" x-show="selectedImages.length">
					<template x-for="image in selectedImages">
						<Image x-bind:src="image.src" x-bind:alt="image.alt" />
					</template>
				</div>
			</div>
		</ImagePicker>
	);
}

Multiple Files ImagePicker

It also possible to select multiple files. Just pass multiple props and you good :)

Example below is a combination with RestGallery component.

Copied !

import { SecondaryButton } from "$components/button.component";
import { RestGallery } from "$components/gallery.component";
import { ImagePicker } from "$components/imagepicker.component";

export function MultipleImagePickerExample() {
	return (
		<ImagePicker
			multiple
			x-on:selected-images={`
                console.log($event.detail);
                $manage("#multi-images-preview").images = $event.detail.selectedImages
            `}
		>
			<div class="flex flex-col gap-y-4">
				<SecondaryButton
					variant="inversed"
					text="Choose files"
					x-bind="trigger"
					class="place-self-center"
				/>
				<RestGallery
					x-show="selectedImages.length"
					id="multi-images-preview"
					class="grid grid-cols-2"
					nbDisplayedImages={2}
					zoom
				/>
			</div>
		</ImagePicker>
	);
}