File Attachment Annotations

File attachment annotations are annotations that represent an attached file in the document. Users can annotate their documents with files that can also be downloaded.

File attachment are created with NoZoom and NoRotate set to true by default. This means they will remain the same size at all zoom levels and will not rotate with the view/page. Stroke color is also used as the primary color of the icons as opposed to fill color.

In the PDF specification, there are no specifications for file restrictions or attachment size limits. WebViewer has provided options to tweaks these from the tool that creates file attachment annotations.

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

    documentViewer.addEventListener('annotationsLoaded', async () => {
      const annot = new Annotations.FileAttachmentAnnotation({
        PageNumber: 1,
        X: 100,
        Y: 50,
        Icon: 'Paperclip',
        StrokeColor: new Annotations.Color(0, 255, 0, 1),
      });
      
      const res = await fetch('https://myserver.com/files/test.pdf');
      const buffer = await res.arrayBuffer();
      await annot.setFileData(buffer, 'application/pdf', 'test.pdf');

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

Element name: fileattachment

<fileattachment page="0" rect="302.410,609.110,316.410,643.110" color="#000000" flags="print,nozoom,norotate" name="c93af20d-a823-b04b-6cae-de26e3202304" title="Guest" subject="File Attachment" date="D:20220721151359-07'00'" creationdate="D:20220721151349-07'00'" icon="Paperclip" mimetype="application/pdf" file="test.pdf">
  <data mode="raw" filter="FlateDecode" encoding="hex" length="4561">...</data>
</fileattachment>

For the full list of properties, please visit the annotation's API docs.

The name of the icon to use for this file attachment annotation. Possible default icon types:

• Graph
• PushPin
• Paperclip
• Tag

To get the file data from an attachment annotation, you can use getFileData which will asynchronously return the data as a blob. This can be used to trigger an automatic download of an attachment.

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

    documentViewer.addEventListener('annotationsLoaded', () => {
      const annotList = annotationManager.getAnnotationsList();
      annotList.forEach(async annot => {
        if (annot instanceof Annotations.FileAttachmentAnnotation) {
          const fileData = await annot.getFileData();
          const url = URL.createObjectURL(fileData);
          window.open(url);
        }
      });
    });
  });

Setting the file data on a file attachment annotation is recommended after construction using setFileData. This requires slightly more information other than just the file data, as you will need to provide the web mimetype of the attachment and filename. The filename can be different and will be used when downloaded.

If you need to understand the type of file that is stored in the attachment, you use getFileMetadata to get the mimetype and name of the file from when it was originally attached.

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

    documentViewer.addEventListener('annotationsLoaded', () => {
      const annotList = annotationManager.getAnnotationsList();
      annotList.forEach(async annot => {
        if (annot instanceof Annotations.FileAttachmentAnnotation) {
          const metadata = annot.getFileMetadata();
          console.log(metadata.filename, metadata.mimeType);
        }
      });
    });
  });