Why your photo-to-PDF pages come out in the wrong order (and how to sort them in the browser)

When you create a feature that converts images to PDF, you may have encountered a frustrating bug report: users selected pages 1, 2, 3, 4, but the resulting PDF came out as 3, 1, 4, 2. The issue isn't with your PDF code; the culprit is the order in which the image files arrive, which is often unpredictable on mobile devices. Here's what happens and a simple sorting strategy to fix most cases without uploading files to a server.

The order of files in the FileList you receive depends on the operating system: Android (Chrome, Photos picker) usually follows the user's tap order, but some gallery apps may sort by date added instead. iOS Safari typically follows the selection order, but images converted from HEIC on the fly can change the sequence. Desktop file dialogs often sort alphabetically by file name, irrespective of the user's click order. So, the user's selection order isn't something you can rely on.

To sort the files deterministically, you need an alternative method. One approach is using the file names, as camera apps name files with timestamps. You can compare the numbers rather than the strings. However, images that go through apps like WhatsApp, Telegram, or screenshots often get renamed, so the file name may reflect when the file was received, not when the photo was taken.

Another option is using the file.lastModified property, but on mobile devices, it usually represents the time the file was written to the device or added to the picker's cache. In cases where multiple photos are received in a single chat, they might share the same second. Therefore, use it as a tie-breaker but not the primary key for sorting.

The most reliable method is to use the EXIF DateTimeOriginal tag, which records when the shutter fired for real camera photos. You can read this tag from the first few kilobytes of the JPEG file without any external libraries. Here's how you can implement this:

1. Slice the first 128KB of the file and convert it to an ArrayBuffer.

2. Create a DataView object from the ArrayBuffer.

3. Check if the file is a JPEG by verifying the first two bytes (0xffd8).

4. Iterate through the JPEG chunks, looking for the EXIF DateTimeOriginal tag (0xffe1 marker).

5. If found, extract the date and time from the tag.

By sorting the files based on the EXIF DateTimeOriginal when available, you can ensure that the images appear in the correct order in the PDF, regardless of the initial order they were selected.