---
title: "Add or extract image in PDF form using JavaScript | Nutrient"
canonical_url: "https://www.nutrient.io/guides/web/forms/fill-form-fields/add-image/"
md_url: "https://www.nutrient.io/guides/web/forms/fill-form-fields/add-image.md"
last_updated: "2026-06-09T10:24:43.359Z"
description: "Learn how to create and manage image annotations using our intuitive UI. Attach PNG, JPEG, or PDF files and customize them effortlessly."
---

# Adding an image to a PDF form using JavaScript

It’s possible to create [image annotations](https://www.nutrient.io/api/web/NutrientViewer.Annotations.ImageAnnotation.html) using the UI using the corresponding toolbar button:

Pressing the button will open a file select dialog which will allow you to choose a PNG, JPEG or PDF file to use as attachment for the annotation.

Once the image is picked, the image annotation will be created in the current page with the selected image. When selected, you can use the UI to move it, resize it, or change its opacity:

The attachment is included along with the image annotation when changes are persisted to the document.

Images included using the UI can also be programmatically extracted if needed by passing the attachment ID to [`instance#getAttachment`](https://www.nutrient.io/api/web/NutrientViewer.Instance.html#getAttachment), which will resolve to a `Blob` containing the image file.

```js

const attachmentBlob = await instance.getAttachment(imageAnnotation.imageAttachmentId);

```

## Adding a button for importing image or PDF files

When in standalone mode, it's possible to configure [button form fields](https://www.nutrient.io/api/web/NutrientViewer.FormFields.ButtonFormField.html) to open a dialog where the user can import a JPG, PNG, or PDF file from their device. The imported file is then added to a PDF, replacing the appearance of the button.

It's possible to add this feature to your own buttons by setting the corresponding `action` property:

```js

const widget = new NutrientViewer.Annotations.WidgetAnnotation({
  id: NutrientViewer.generateInstantId(),
  pageIndex: 0,
  formFieldName: "buttonIcon",
  boundingBox: new NutrientViewer.Geometry.Rect({
    left: 100,
    top: 200,
    width: 100,
    height: 100,
  }),
  action: new NutrientViewer.Actions.JavaScriptAction({
    script: "event.target.buttonImportIcon()",
  }),
  borderWidth: 0,
});
const formField = new NutrientViewer.FormFields.ButtonFormField({
  name: "buttonIcon",
  annotationIds: NutrientViewer.Immutable.List([widget.id]),
});
instance.create([widget, formField]);

```

Notice the `event.target.buttonImportIcon()` call in the [JavaScript action](https://www.nutrient.io/api/web/NutrientViewer.Actions.JavaScriptAction.html). This is the method that triggers the image import dialog.
---

## Related pages

- [Detecting user inputs in PDF forms](/guides/web/forms/fill-form-fields/detect-user-input.md)
- [Attach a file to a PDF form using JavaScript](/guides/web/forms/fill-form-fields/attach-a-file.md)
- [Dynamic font loading in PDF forms using Nutrient Web SDK](/guides/web/forms/fill-form-fields/dynamic-font-loading.md)
- [Headless form fill](/guides/web/forms/fill-form-fields/headless.md)
- [Import data into PDFs from a database](/guides/web/forms/fill-form-fields/import-from-database.md)
- [Import data into PDF forms using Instant JSON](/guides/web/forms/fill-form-fields/import-from-instant-json.md)
- [Import data into PDF form using Web SDK with Document Engine](/guides/web/forms/fill-form-fields/import-from-server-backed.md)
- [Customizing PDF form permissions](/guides/web/forms/fill-form-fields/permissions.md)
- [Import data into PDF forms using XFDF](/guides/web/forms/fill-form-fields/import-from-xfdf.md)
- [Fill PDF form fields using our JavaScript viewer UI](/guides/web/forms/fill-form-fields/using-the-ui.md)
- [Fill PDF forms programmatically using JavaScript](/guides/web/forms/form-filling.md)