Section:

Create file attachment annotation using JavaScript

Here is an example of creating a file attachment annotation using JavaScript, but creating other types of annotations are similar.

1WebViewer(...)
2  .then(instance => {
3    const { Annotations, annotationManager, documentViewer } = instance.Core;
4
5    documentViewer.addEventListener('documentLoaded', async() => {
6      const fileAttachmentAnnot = new Annotations.FileAttachmentAnnotation();
7      fileAttachmentAnnot.PageNumber = 1;
8      fileAttachmentAnnot.X = 100;
9      fileAttachmentAnnot.Y = 150;
10      fileAttachmentAnnot.Author = annotationManager.getCurrentUser();
11
12      const { data, mimeType, filename } = await getFileData(filePath);
13      await fileAttachmentAnnot.setFileData(data, mimeType, filename);
14
15      annotationManager.addAnnotation(fileAttachmentAnnot);
16      annotationManager.redrawAnnotation(fileAttachmentAnnot);
17    });
18  });
19
20
21const getFileData = async(filePath) => {
22  const response = await fetch(filePath);
23  const blob = await response.blob();
24
25  return new Promise((resolve) => {
26    const reader = new FileReader();
27
28    reader.addEventListener('load', (e) => {
29      const data = e.target.result;
30
31      resolve({
32        data,
33        mimeType: response.headers.get('Content-Type'),
34        filename: 'download.pdf',
35      });
36    });
37
38    reader.readAsArrayBuffer(blob);
39  });
40};

Related Links

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales