---
title: "Attach a file to PDF form using JavaScript | Nutrient SDK"
canonical_url: "https://www.nutrient.io/guides/web/forms/fill-form-fields/attach-a-file/"
md_url: "https://www.nutrient.io/guides/web/forms/fill-form-fields/attach-a-file.md"
last_updated: "2026-05-25T18:42:17.819Z"
description: "Learn how to create image annotations in Nutrient using attachments. Follow our guide to easily add PNG images to your documents with code examples."
---

# Attach a file to a PDF form using JavaScript

[Image annotations](https://www.nutrient.io/api/web/NutrientViewer.Annotations.ImageAnnotation.html) include the image as an attachment. In order to create an image annotation, the attachment has to be created first.

Attachments can be created by passing the `Blob` of the file to be attached to [`instance#createAttachment`](https://www.nutrient.io/api/web/NutrientViewer.Instance.html#createAttachment), which returns a `Promise` resolving to the attachment ID, which can then be used to create the image annotation:

```js

NutrientViewer.load(configuration).then(async (instance) => {
	// attachmentBlob contains a PNG image file
	const imageAttachmentId = await instance.createAttachment(attachmentBlob);
	const imageAnnotation = new NutrientViewer.Annotations.ImageAnnotation({
		imageAttachmentId,
		contentType: 'image/png',
		pageIndex: 0,
		boundingBox: new NutrientViewer.Geometry.Rect({
			width: 100,
			height: 100,
			top: 100,
			left: 100
		})
	});
	const [createdAnnotation] = await instance.create(imageAnnotation);
});

```
---

## Related pages

- [Adding an image to a PDF form using JavaScript](/guides/web/forms/fill-form-fields/add-image.md)
- [Detecting user inputs in PDF forms](/guides/web/forms/fill-form-fields/detect-user-input.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)
- [Import data into PDF forms using XFDF](/guides/web/forms/fill-form-fields/import-from-xfdf.md)
- [Customizing PDF form permissions](/guides/web/forms/fill-form-fields/permissions.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)