# Thumbnail sequence is incorrect

**URL:** <https://pdfjs.community/t/thumbnail-sequence-is-incorrect/800>\
**Category:** Technical Support\
**Created:** [May 31, 2021, 10:53am UTC](https://pdfjs.community/t/thumbnail-sequence-is-incorrect/800 "2021-05-31T10:53:58Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![himani.sharma](https://avatars.discourse-cdn.com/v4/letter/h/e47774/32.png) [@himani.sharma](https://pdfjs.community/u/himani.sharma)\
**Post date:** [May 31, 2021, 10:53am UTC](https://pdfjs.community/t/thumbnail-sequence-is-incorrect/800/1 "2021-05-31T10:53:58Z")

</div>

**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**

```javascript
 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);
    });
  }

```

---

<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:** [May 31, 2021, 10:54am UTC](https://pdfjs.community/t/thumbnail-sequence-is-incorrect/800/2 "2021-05-31T10:54:01Z")

</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:
- [Lower level document APIs - Create documents - Create a PDF Document](https://pdfjs.express/documentation/learn-more/advanced/low-level-api#create-a-pdf-document)
- [Why is the viewer showing “Network Failure”?](https://pdfjs.express/documentation/get-started/electron/viewer-showing-network-failure)
- [Adding your license key - Development](https://pdfjs.express/documentation/get-started/add-license-key#development)

APIs:
- [PartRetrievers.LocalPdfPartRetriever](https://pdfjs.express/api/PartRetrievers.LocalPdfPartRetriever.html#__anchor)
- [CoreControls.DocumentViewer - updateVisiblePages(visiblePages)](https://pdfjs.express/api/CoreControls.DocumentViewer.html#updateVisiblePages__anchor)
- [CoreControls - initPDFWorkerTransports(pdfBackendType, workerHandlers, l)](https://pdfjs.express/api/CoreControls.html#.initPDFWorkerTransports__anchor)

Forums:
- [Open annotation style popup on click of a button outside viewer](https://pdfjs.community/t/open-annotation-style-popup-on-click-of-a-button-outside-viewer/608/1)
- [Pdjs express watermark appearing on registered domain even after adding license key](https://pdfjs.community/t/pdjs-express-watermark-appearing-on-registered-domain-even-after-adding-license-key/453/1)
- [I want to add water mark and footer html on all pages of existing pdf from other source and download it](https://pdfjs.community/t/i-want-to-add-water-mark-and-footer-html-on-all-pages-of-existing-pdf-from-other-source-and-download-it/44/3)

---

<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:** [June 1, 2021, 7:54pm UTC](https://pdfjs.community/t/thumbnail-sequence-is-incorrect/800/3 "2021-06-01T19:54:22Z")

</div>

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.

```javascript
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

---

<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:** [June 1, 2021, 7:54pm UTC](https://pdfjs.community/t/thumbnail-sequence-is-incorrect/800/4 "2021-06-01T19:54:26Z")

</div>