Image field

Upload an image to a SharePoint Image column with preview, crop, and replace.

The Image field uploads and previews an image stored in a SharePoint Image column. By default it renders a drop zone, drag a file onto it or click to browse. Authors who prefer the compact chrome can switch it to a standard Choose button via the imageInputStyle property. Upload happens in the post-save phase (the item is created first, then the image is attached).

Common properties

PropertyDescription
label
string
Visible label.
description
string
Helper text.
required
boolean
default: false
Marks the field required, an image must be uploaded before save.
readOnly
boolean
default: false
Disables upload/replace, the existing image is still shown.

Type-specific properties

PropertyDescription
imageInputStyle
'dropzone' | 'button'
default: dropzone
Upload chrome. dropzone (default) renders a drag-and-drop target that also accepts a click to browse; button renders the compact "Choose / Replace image" button row.
accept
string (MIME)
default: image/*
Accepted file MIME types passed to the file picker, e.g. image/png,image/jpeg.
imageMaxSizeMb
number
Maximum upload size in MB. Files larger than this are rejected before upload.

JavaScript recipes

React to image upload / clear

f365.field('Photo').on('change', (value) => {
  // value is the stored Image-column JSON metadata, or null when cleared.
  f365.field('HasPhoto').value = value ? 'Yes' : 'No';
});

Require an image before saving

f365.events.onValidate((errs) => {
  if (!f365.field('Photo').value) {
    errs.add('Photo', 'Please upload a photo before submitting.');
  }
});

Clear the image from code

f365.events.onChange((e) => {
  if (e.fieldKey === 'UseDefaultAvatar' && e.newValue === true) {
    f365.field('Photo').clear();
    f365.ui.showToast('Reverted to the default avatar.', 'info');
  }
});

Related articles

  • Image markup field

    Draw, annotate, and mark up on top of a static image, useful for inspections, sketches, incident reports.

  • Signature field

    Canvas-based signature capture, finger, stylus, or mouse. Saves as a PNG image to a SharePoint Image column or the item's Attachments.