Thumbnail sequence is incorrect

Technical Support
1

PDF.js Express Version

7.3.1

Detailed description of issue
On uploading a pdf the sequence of the thumbnail visible is incorrect.

Expected behaviour
The order of thumbnails should be ascending order from 1 to last index.

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

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

Code snippet

 instance.docViewer.on("documentLoaded", async () => {

        document.getElementById('markup_thumbnail_panel_new').innerHTML = "";
        const doc = docViewer.getDocument();
       // getting the document
        const pageCount = doc.getPageCount();
     
        
        for (let i = 1; i <= pageCount; i++) {
          this.createCanvas(doc, docViewer, i).then((res) => { });
        }
      });

  async createCanvas(doc, docViewer, i): Promise<void> {
  
    await doc.loadThumbnailAsync(i, async (canvas) => {
   
      
      const ele = await document.createElement("div");

      await canvas.classList.add("markup-canvas");

      await ele.appendChild(canvas);

      ele.onclick = await (() => docViewer.setCurrentPage(i));
// id of the div where we want the thumbnail is markup_thumbnail_panel_new
      await document.getElementById("markup_thumbnail_panel_new").appendChild(ele);
    });
  }
2

Hello, I’m Ron, an automated tech support bot :robot:

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

Guides:APIs:Forums:

3

Hi,

This appears to be an issue with your code and is not related to Express.

Are you calling createCanvas in a loop but are not waiting for the promise to resolve, meaning that your calls to loadThumbnailAsync are not necessarily resolving in order.

In your for loop I recommend awaiting this.createCanvas to guarantee the order.

for (let i = 1; i <= pageCount; i++) {
     await this.createCanvas(doc, docViewer, i).then((res) => { });
}

I will close this ticket as it is not related to PDF.js Express.

Thanks!
Logan