Add some sensible sorting

.dockerignore

@@ -1,3 +1,4 @@
 */node_modules
 */build
 */dist
+public/.thumbnail

picture-gallery-server/package-lock.json

@@ -11,7 +11,7 @@
       "dependencies": {
         "express": "4.17.3",
         "express-winston": "4.2.0",
-        "image-size": "1.0.1",
+        "natsort": "2.0.3",
         "sharp": "0.30.3",
         "winston": "3.7.2"
       },
@@ -2653,20 +2653,6 @@
       "integrity": "sha1-SMptcvbGo68Aqa1K5odr44ieKwk=",
       "dev": true
     },
-    "node_modules/image-size": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/image-size/-/image-size-1.0.1.tgz",
-      "integrity": "sha512-VAwkvNSNGClRw9mDHhc5Efax8PLlsOGcUTh0T/LIriC8vPA3U5PdqXWqkz406MoYHMKW8Uf9gWr05T/rYB44kQ==",
-      "dependencies": {
-        "queue": "6.0.2"
-      },
-      "bin": {
-        "image-size": "bin/image-size.js"
-      },
-      "engines": {
-        "node": ">=12.0.0"
-      }
-    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -3341,6 +3327,11 @@
       "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-1.0.2.tgz",
       "integrity": "sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg=="
     },
+    "node_modules/natsort": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/natsort/-/natsort-2.0.3.tgz",
+      "integrity": "sha512-fuzhAiXcdNAIg2f5kqFOAABvX+uDoJvZs6DvCgioPf7FRAMHsw6G4kH7GFjSZ31yNFkNJuuOIilE8jl0JkavVQ=="
+    },
     "node_modules/natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -3880,14 +3871,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/queue": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz",
-      "integrity": "sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==",
-      "dependencies": {
-        "inherits": "~2.0.3"
-      }
-    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -7020,14 +7003,6 @@
       "integrity": "sha1-SMptcvbGo68Aqa1K5odr44ieKwk=",
       "dev": true
     },
-    "image-size": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/image-size/-/image-size-1.0.1.tgz",
-      "integrity": "sha512-VAwkvNSNGClRw9mDHhc5Efax8PLlsOGcUTh0T/LIriC8vPA3U5PdqXWqkz406MoYHMKW8Uf9gWr05T/rYB44kQ==",
-      "requires": {
-        "queue": "6.0.2"
-      }
-    },
     "import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -7523,6 +7498,11 @@
       "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-1.0.2.tgz",
       "integrity": "sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg=="
     },
+    "natsort": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/natsort/-/natsort-2.0.3.tgz",
+      "integrity": "sha512-fuzhAiXcdNAIg2f5kqFOAABvX+uDoJvZs6DvCgioPf7FRAMHsw6G4kH7GFjSZ31yNFkNJuuOIilE8jl0JkavVQ=="
+    },
     "natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -7919,14 +7899,6 @@
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.7.tgz",
       "integrity": "sha512-IhMFgUmuNpyRfxA90umL7ByLlgRXu6tIfKPpF5TmcfRLlLCckfP/g3IQmju6jjpu+Hh8rA+2p6A27ZSPOOHdKw=="
     },
-    "queue": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz",
-      "integrity": "sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==",
-      "requires": {
-        "inherits": "~2.0.3"
-      }
-    },
     "queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",

picture-gallery-server/package.json

@@ -17,9 +17,9 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "@types/express": "4.17.13",
     "@types/node": "16.11.7",
     "@types/sharp": "0.30.1",
-    "@types/express": "4.17.13",
     "@typescript-eslint/eslint-plugin": "5.18.0",
     "@typescript-eslint/parser": "5.18.0",
     "eslint": "8.13.0",
@@ -35,8 +35,9 @@
   },
   "dependencies": {
     "express": "4.17.3",
+    "express-winston": "4.2.0",
+    "natsort": "2.0.3",
     "sharp": "0.30.3",
-    "winston": "3.7.2",
+    "winston": "3.7.2"
-    "express-winston": "4.2.0"
   }
 }

picture-gallery-server/src/controller/images.ts

@@ -2,6 +2,7 @@ import fs, { Dirent } from "fs";
 import express from "express";
 import sharp from "sharp";
 import path from "path";
+import natsort from "natsort";
 import { publicPath, thumbnailPath, thumbnailPublicPath } from "../paths";
 import { a, Folder, Image } from "../models";
 import { createThumbnailAsyncForImage } from "../thumbnails";
@@ -57,6 +58,9 @@ const getImagesToBeLoaded = (
 ): Promise<Image | void>[] =>
   dirents
     .filter((f) => f.isFile())
+    // sorts by name in a natural way
+    // could be made configurable for sorting in other ways (e.g. date of creation)
+    .sort((file1, file2) => natsort()(file1.name, file2.name))
     .map((f) => {
       const thumbnailExists: boolean = thumbnails.includes(f.name);
       if (!thumbnailExists) {