Image Import

The ImageImport component is used to as an interface for uploading image files using a drag and drop area and file input.

The ImageImport component is a wrapper for the ImageInput and DropZone components with basic logic to tie the two together.

Select an image or drag and drop

---

Usage

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

<ImageImport
    id="image-import"
    name="image-import"
/>

---

Disabled

Use the disabled prop to disable the ImageImport.

Select an image or drag and drop

<ImageImport
    id="image-import"
    name="image-import"
    disabled
/>

---

isLoading

Use the isLoading prop to show a loading spinner.

Select an image or drag and drop

<ImageImport
    id="image-import"
    name="image-import"
    isLoading
/>

---

Drop Label

Use the dropLabel prop to set the text displayed in the DropZone area.

Drop an image here

<ImageImport
    id="image-import"
    name="image-import"
    dropLabel="Drop an image here"
/>

---

onClick

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

Select an image or drag and drop

<ImageImport
    id="image-import"
    name="image-import"
    onClick={() => alert('ImageImport 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

Use 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.

Select an image or drag and drop

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

---

onDrop

Use the onDrop prop allows you to pass a function to be called when a file is dropped into the DropZone. The function will receive an object of the event.

Select an image or drag and drop

<ImageImport
    id="image-import"
    name="image-import"
    onDrop={(event) => console.log(event)}
/>

caution

The function passed to the onDrop will replace the default behavior of the drop zone element and will not process any of the component's default logic to replace the image preveiw.

---

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.

Select an image or drag and drop

<ImageImport
    id="image-import"
    name="image-import"
    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.	-
previewImageVariant	avatar | rounded | square |	The variant of the preview/placeholder image.	-
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
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.	-
onDrop	function |	Fires when a file is dropped and will take over the default behavior of the drop zone. The function will receive the event object as an argument.	-
onError	function |	Fires when an error occurs. The function will receive an object of "error" as an argument.	-
dropLabel	string |	The label to be displayed in the drop zone.	Select an image or drag and drop
disabled	boolean |	If true, the input will be disabled.	-
isLoading	boolean |	If true, the input will be in a loading state.	-
resetPreviewActionAriaLabel	string |	The aria label of the reset preview action.	-
className	string |	The class name of the element.	-