# Import Annotation not working

**URL:** https://pdfjs.community/t/import-annotation-not-working/1512
**Category:** Technical Support
**Created:** [March 29, 2022, 3:19pm UTC](https://pdfjs.community/t/import-annotation-not-working/1512 "2022-03-29T15:19:33Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![Abhiramsa3](https://avatars.discourse-cdn.com/v4/letter/a/43a26b/32.png) [@Abhiramsa3](https://pdfjs.community/u/Abhiramsa3)
#### Post date: [March 29, 2022, 3:19pm UTC](https://pdfjs.community/t/import-annotation-not-working/1512/1 "2022-03-29T15:19:33Z")

</div>

**Which product are you using?**  
Am using PDF.js Express Plus

**Detailed description of issue**  
Am working on pdf xxpress js plus for annotations, am abl to export annotations(underline and comment), by using “instance.Core.annotationManager.exportAnnotations”, it is successfully exporting into xfdf format and am locally storing it. when am importing by using instance.Core.annotationManager.importAnnotations(xfdfString); back the annotation it is loading a fresh file not the annotated part ie my annotation text is not coming

**Expected behaviour**  
once annotation is done and exported am saving to local storage, and when i try to import the annotated paragraph ie retriving the locally stored xfdf format, am not finding any annotations, document is loading freshly  
**Does your issue happen with every document, or just one?**  
Yes Every Document

**Link to document**  
{Provide a link to the document in question if possible}

**Code snippet**

```javascript
useEffect(() => {
        WebViewer(
            {
                path: '/webviewer/lib',
                          },
            viewer.current,
        ).then(async instance => {
           
            var myAnnotations = localStorage.getItem("Annotations");
                        const {Core} = instance;
                     instance.UI.loadDocument('https://www.corenet.gov.sg/media/2268607/dc19-07.pdf');
            Core.documentViewer.addEventListener('documentLoaded', async () => {
                               const xfdfString = await myAnnotations
                               instance.Core.annotationManager.importAnnotations(xfdfString);
               
            });
             //For Pop Up
            instance.UI.contextMenuPopup.add({
                type: 'actionButton',
                label: 'Export',
                onClick: async () => await saveToDatabase(xfdfString, instance),
            });
        });

    }, []);
    
    function saveToDatabase(x, y) {
        //Saving Annotations to Local Storage as on now
        //Here x is the xfdfString(Annotated string)
        //Here y is the instance
        localStorage.setItem("Annotations", x);
    }

```

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/ffbcd25c7d423db8d5acd5db201c272f4db306dd.png) [@system](https://pdfjs.community/u/system)
#### Post date: [March 29, 2022, 3:19pm UTC](https://pdfjs.community/t/import-annotation-not-working/1512/3 "2022-03-29T15:19:39Z")

</div>

**Hello, I’m Ron, an automated tech support bot 🤖**

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:
- [XFDF format - In PDF.js Express Web Viewer](https://pdfjs.express/documentation/annotation/xfdf#in-pdf.js-express-web-viewer)
- [PDF.js Express Documentation - Annotation](https://pdfjs.express/documentation#annotation-<span-class='plus'></span>)
- [Real-time collaboration client](https://pdfjs.express/documentation/collaboration/realtime-collaboration-client.8)

APIs:
- [ExpressUtils(optionsopt) - # async set() → {Promise.}](https://pdfjs.express/api/utils/ExpressUtils.html#set__anchor)
- [Core.Tools.StampCreateTool - mouseLeftUp(e)](https://pdfjs.express/api/Core.Tools.StampCreateTool.html#mouseLeftUp__anchor)
- [Core.Annotations - setCustomSerializeHandler(annotationClass, serializeHandler)](https://pdfjs.express/api/Core.Annotations.html#.setCustomSerializeHandler__anchor)

Forums:
- [Importing XFDF has failed](https://pdfjs.community/t/importing-xfdf-has-failed/1006/1)
- [Do you have any example from PDF to database](https://pdfjs.community/t/do-you-have-any-example-from-pdf-to-database/196/2)
- [AnnotationManager.exportAnnotations does not export all visible annotations](https://pdfjs.community/t/annotationmanager-exportannotations-does-not-export-all-visible-annotations/1010/6)

---

<div class="post-metadata">

### Author: ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)
#### Post date: [March 30, 2022, 2:53pm UTC](https://pdfjs.community/t/import-annotation-not-working/1512/4 "2022-03-30T14:53:26Z")

</div>

Hi there,

There is a bunch of errors in your code:

1. When you are calling `saveToDatabase`, `xfdfString` is not defined which means you are saving undefined into local storage. This is what’s causing your issue.

2. You are calling `await myAnnotations` but `myAnnotations` is not a promise

3. `saveToDatabase` is not asynchronous but you are still awaiting it in your onClick handler

I have rewritten your code here to clean it up and get it working:

```javascript
  const { Core } = instance;

  instance.UI.loadDocument('https://www.corenet.gov.sg/media/2268607/dc19-07.pdf');

  Core.documentViewer.addEventListener('documentLoaded', async () => {
    const xfdfString = localStorage.getItem("Annotations");
    instance.Core.annotationManager.importAnnotations(xfdfString);
  });

  // For Pop Up
  instance.UI.contextMenuPopup.add({
    type: 'actionButton',
    label: 'Export',
    onClick: async () => {
      const xfdfString = await instance.Core.annotationManager.exportAnnotations();
      saveToDatabase(xfdfString)
    }
  });

  function saveToDatabase(x) {
    localStorage.setItem("Annotations", x);
  }

```

Thanks,  
Logan