Image Input

The ImageInput element provides a file input to upload images.

---

Usage

import { ImageInput } from "@newfold/ui-component-library";

<ImageInput
    id="image-input"
    name="image-input"
/>

---

Variants

The ImageInput has 3 variants: avatar, rounded, and square.

1. Avatar (default)

The avatar variant has a circle-shaped preview/placeholder.

<ImageInput
    id="image-input-avatar"
    name="image-input-avatar"
    variant="avatar"
/>

2. Rounded

The rounded variant has a rounded preview/placeholder.

<ImageInput
    id="image-input-rounded"
    name="image-input-rounded"
    variant="rounded"
/>

3. Square

The square variant has a square preview/placeholder.

<ImageInput
    id="image-input-square"
    name="image-input-square"
    variant="square"
/>

---

Disabled

Use the disabled prop to disable the ImageInput.

<ImageInput
    id="image-input"
    name="image-input"
    disabled
/>

---

isLoading

Use the isLoading prop to show a loading spinner.

<ImageInput
    id="image-input"
    name="image-input"
    isLoading
/>

---

onClick

The onClick prop allows you to pass a function to be called when the ImageInput button is clicked.

<ImageInput
    id="image-input"
    name="image-input"
    onClick={() => alert('ImageInput clicked!')}
/>

caution

The function passed to the onClick will replace the default behavior of the input element and will not open the file dialog.

---

onChange

The onChange prop allows you to pass a function to be called when the ImageInput value changes. The function will receive an object with the event and the inserted file.

<ImageInput
    id="image-input"
    name="image-input"
    onChange={({event, file}) => console.log(event, file)}
/>

---

onReset

The onReset prop allows you to pass a function to be called when the preview image is reset (removed). The function will receive an object of "inputId", "previousPreview" and "event" as an argument.

<ImageInput
    id="image-input"
    name="image-input"
    onReset={({inputId, previousPreview, event}) => console.log(inputId, previousPreview, event)}
/>

---

Props

Attribute	Type	Description	Default
id*	string |	The id of the input element.	-
name*	string |	The name of the input element.	-
variant	avatar | rounded | square |	The image preview/placeholder variant.	avatar
previewImage	string |	The src of the preview image. Can be used as a default preview.	-
previewImageAlt	string |	The alt text of the preview image.	-
buttonText	string |	The text of the button.	Select Image
buttonVariant	primary | secondary |	The button variant.	secondary
accept	string |	The file types that the input should accept.	image/*
onClick	function |	Fires when the button is clicked and will take over the default file input behavior. The function will receive the event object as an argument.	-
onChange	function |	Fires when the file input changes. The function will receive an object of "event" and "file" as an argument.	-
onReset	function |	Fires when preview image is reset. The function will receive an object of "inputId", "previousPreview" and "event" as an argument.	-
className	string |	The class name of the element.	-
disabled	bool |	If true, the input will be disabled.	-
isLoading	bool |	If true, the input will be in a loading state.	-
resetPreviewActionAriaLabel	string |	The aria-label of the reset preview action button.	-