Some test text!

Search
Hamburger Icon

Web / Guides

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.

WebViewer(...)
  .then(instance => {
    const { Annotations, annotationManager, documentViewer } = instance.Core;

    documentViewer.addEventListener('documentLoaded', async() => {
      const fileAttachmentAnnot = new Annotations.FileAttachmentAnnotation();
      fileAttachmentAnnot.PageNumber = 1;
      fileAttachmentAnnot.X = 100;
      fileAttachmentAnnot.Y = 150;
      fileAttachmentAnnot.Author = annotationManager.getCurrentUser();

      const { data, mimeType, filename } = await getFileData(filePath);
      await fileAttachmentAnnot.setFileData(data, mimeType, filename);

      annotationManager.addAnnotation(fileAttachmentAnnot);
      annotationManager.redrawAnnotation(fileAttachmentAnnot);
    });
  });


const getFileData = async(filePath) => {
  const response = await fetch(filePath);
  const blob = await response.blob();

  return new Promise((resolve) => {
    const reader = new FileReader();

    reader.addEventListener('load', (e) => {
      const data = e.target.result;

      resolve({
        data,
        mimeType: response.headers.get('Content-Type'),
        filename: 'download.pdf',
      });
    });

    reader.readAsArrayBuffer(blob);
  });
};

Get the answers you need: Chat with us