ImagePicker

ImagePicker renders a SharePoint image field: it previews the current image value and lets the user select a new file to replace it. It's a controlled file selection — you receive the chosen File via onFileSelected and handle the upload/save.

SPFx component

Imported from @spartanfx/react/spfx; takes a PnPjs SPFI instance and a SharePoint image field value.

When to use

• Edit a SharePoint Image column (thumbnail/banner) with preview and replace.

Import

import { ImagePicker } from '@spartanfx/react';

Basic usage

Pass the current imageFieldValue, the sp instance, and an onFileSelected handler.

<ImagePicker
  sp={sp}
  imageFieldValue={item.Banner}
  label="Banner image"
  onFileSelected={(file) => uploadBanner(file)}
/>

Inline / loading

<ImagePicker
  sp={sp}
  imageFieldValue={item.Banner}
  onFileSelected={setPending}
  inline
  loading={isUploading}
/>

Key props

Prop	Type	Notes
sp (required)	SPFI	PnPjs instance.
imageFieldValue (required)	any	Current SharePoint image field value (rendered as the preview).
onFileSelected (required)	(file: File) => void	Fires when the user picks a file.
label	string	Field label.
inline	boolean	Inline layout.
loading	boolean	Show a loading state.

See the full generated reference: ImagePicker API ↗.

See also

• DropFileArea
• Components overview