getCustomData don't give me my custom data that i saved in my db?

Technical Support
1

Which product are you using?
PDF.js Express Plus

PDF.js Express Version
8.0.1

Detailed description of issue

const { annotationManager } = instance.Core;

  annotationManager.addEventListener('annotationChanged', async (annots, action) => {
    if(action === 'add') {
      for(const annot of annots) {
        axios.post(`{API_ENDPOINT}`,payload,{headers})
        .then(res => {
             annot.setCustomData('cn_id', res.data.id)
             // after that I call my API to save this xfdf into my db
        }
      }
    }
  })

I want to save this updated XFDF in my DB. But in saved XFDF in my DB where I can’t see any cn_id. That’s why when I refresh the pdfs express and want to edit this annotation by cn_id and try to get this data by

annot.getCustomData(‘cn_id’);

It shows nothing. That means there is no cn_id found in this XFDF.

The saved XFDF data in my db after setCustomData
<text page="1" rect="71,413.690,102,444.690" color="#FFFF00" flags="print,nozoom,norotate" inreplyto="3452" name="6efc1882-9e98-1db6-e5b4-352a7e38c36d" title="Arman Ul Alam" subject="Note" date="D:20220110093119+06'00'" creationdate="D:20220110093119+06'00'" icon="Comment" statemodel="Review"><trn-custom-data bytes="{&quot;trn-mention&quot;:&quot;{\&quot;contents\&quot;:\&quot;1\&quot;,\&quot;ids\&quot;:[]}&quot;}"/><contents>1</contents></text>

Expected behavior
annot.getCustomData(‘cn_id’); give me the cn_id which I set by setCustomData.

Does your issue happen with every document, or just one?
For every document

Link to document

Code snippet

 // Citation comment Update
if (
action == 'modify' &&
xfdfJson.xfdf.modify['text'] != undefined
) {
const commentId = annot.getCustomData('cn_id'); // Give me nothing
const comment = commentId
  ? this.props.library.citationNotes.byId[commentId]
  : null;
if (comment) {
  comment.text = annot.getContents();

  this.props.handleAction(
    actionTypes.SYNC_CITATION_COMMENT_REQUESTED,
    comment
  );
  Api.createPdfAnnotationCommand(
    this.props.articleId,
    xfdfString
  );
} else {
  BasicToaster.show({
    message: 'Sorry something went wrong',
    intent: Intent.DANGER,
    timeout: 6000
  });
}
}
3

Hey there!

Unfortunately I cannot reproduce your issue. I am able to setCustomData, then exportAnnotations, and then importAnnotations - after that calling annot.getCustomData returns the custom data I set. Here is the code I used to test:

  annotationManager.addEventListener('annotationChanged', async (annots, action) => {
    if(action === 'add') {
      for(const annot of annots) {
        annot.setCustomData('cn_id', 'Some ID');

        const xfdfString = await annotationManager.exportAnnotations();
        const newAnnots = await annotationManager.importAnnotations(xfdfString);

        console.log(newAnnots[0].getCustomData('cn_id'));
      }
    }
  })

Can you show me how you are exporting and importing XFDF?

Thanks!
Logan