# Custom button to store the annotation image using Blob string

**URL:** <https://pdfjs.community/t/custom-button-to-store-the-annotation-image-using-blob-string/3129>\
**Category:** Technical Support\
**Tags:** pdfjs-express\
**Created:** [February 14, 2024, 8:18am UTC](https://pdfjs.community/t/custom-button-to-store-the-annotation-image-using-blob-string/3129 "2024-02-14T08:18:19Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![rajendranvembalagu](https://avatars.discourse-cdn.com/v4/letter/r/a88e4f/32.png) [@rajendranvembalagu](https://pdfjs.community/u/rajendranvembalagu)\
**Post date:** [February 14, 2024, 8:18am UTC](https://pdfjs.community/t/custom-button-to-store-the-annotation-image-using-blob-string/3129/1 "2024-02-14T08:18:19Z")

</div>

Hi,  
I try custom button to store the annotation image using Blob string but it return as null always for each click  
Pls find the sample code as follow

```
      header.push({
            type: 'actionButton',
            img: '../../Images/Rep_Save2.png',
            dataElement: 'alertButton',
            onClick: () => {
                
                const xfdfString = instance.Core.annotationManager.exportAnnotations();
                
              // save the annotations
              // must wait for the document to be loaded before you can save the file
              documentViewer.addEventListener('documentLoaded', async () => {
                const documentStream = await documentViewer.getDocument().getFileData({});
                const documentBlob = new Blob([documentStream], { type: 'application/pdf' });  
                
                })
                
                
            }

```

---

<div class="post-metadata">

**Author:** ![ejohnson](https://avatars.discourse-cdn.com/v4/letter/e/a3d4f5/32.png) [@ejohnson](https://pdfjs.community/u/ejohnson)\
**Post date:** [February 14, 2024, 4:10pm UTC](https://pdfjs.community/t/custom-button-to-store-the-annotation-image-using-blob-string/3129/2 "2024-02-14T16:10:54Z")

</div>

Thank you for posting the incident to our forum. We will provide you with an update as soon as possible.

---

<div class="post-metadata">

**Author:** ![darian.chen](https://avatars.discourse-cdn.com/v4/letter/d/3d9bf3/32.png) [@darian.chen](https://pdfjs.community/u/darian.chen)\
**Post date:** [February 14, 2024, 6:27pm UTC](https://pdfjs.community/t/custom-button-to-store-the-annotation-image-using-blob-string/3129/3 "2024-02-14T18:27:38Z")

</div>

Hi there,

Please see this guide on how to save a blob with annotations.

> **[Open a document, add annotations, download | Documentation](https://pdfjs.express/documentation/use-case/upload-download.8)**

Best Regards,  
Darian

---

<div class="post-metadata">

**Author:** ![rajendranvembalagu](https://avatars.discourse-cdn.com/v4/letter/r/a88e4f/32.png) [@rajendranvembalagu](https://pdfjs.community/u/rajendranvembalagu)\
**Post date:** [February 16, 2024, 4:59am UTC](https://pdfjs.community/t/custom-button-to-store-the-annotation-image-using-blob-string/3129/4 "2024-02-16T04:59:33Z")

</div>

Hi,  
As per yr guide document URL it is mentioned to load/download the pdf file. Here my requirement i need to store output of blob to DB using Custom button.  
Using Button Click , I try to get the output Blob but it is return as null object.

Pls do the needful action.

---

<div class="post-metadata">

**Author:** ![darian.chen](https://avatars.discourse-cdn.com/v4/letter/d/3d9bf3/32.png) [@darian.chen](https://pdfjs.community/u/darian.chen)\
**Post date:** [February 22, 2024, 7:00pm UTC](https://pdfjs.community/t/custom-button-to-store-the-annotation-image-using-blob-string/3129/5 "2024-02-22T19:00:02Z")

</div>

Hi there,

Could you remove the addEventListener with the documentLoaded event? This will only trigger when a new document is loaded.

You can merge or set the XFDF with either the merge or set endpoint.

> **[Set XFDF using the Express REST API | Documentation](https://pdfjs.express/documentation/utils/set#body-params)**

Please try using the following code.

```javascript
          onClick: async () => {
            const xfdfString = await instance.Core.annotationManager.exportAnnotations();
            const documentStream = await documentViewer.getDocument().getFileData({ xfdfString: xfdfString });
            const blob = new Blob([documentStream], { type: 'application/pdf' });

            const data = new FormData();
            data.append('xfdf', xfdfString);
            data.append('file', blob);
            //data.append('license', my_license_key);

            // Process the file
            const response = await fetch('https://api.pdfjs.express/xfdf/set', {
              method: 'post',
              body: data
            }).then(resp => resp.json());

            const { url, key, id } = response;
            const outputBlob = await fetch(url, {
              headers: {
                Authorization: key
              }
            }).then(resp => resp.blob())

            window.open(URL.createObjectURL(outputBlob));
          },

```

Best Regards,  
Darian