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.

Default 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 has been choosen.

Copied !

---
import ImagePicker from "$components/imagepicker/ImagePicker.astro";
import Button from "$components/button/Button.astro";
import Image from "$components/image/Image.astro";
---

<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 :src="image.src" :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 ImagePicker from "$components/imagepicker/ImagePicker.astro";
import SecondaryButton from "$components/button/secondary/SecondaryButton.astro";
import RestGallery from "$components/gallery/rest/RestGallery.astro";
---

<ImagePicker
  multiple
  @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>