Recursive Folders (#11)

Author: John Richard Chipps-Harding

README.md

@@ -17,7 +17,8 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the
 You can configure a few things by editing the file `src/config/index.tsx`.
 
 - `DIR` - The directory to watch.
-- `MAX_IMAGES` - How many images to request. Default 10.
+- `RECURSIVE` - Should we scan recursively within folders. Default is `true`.
+- `MAX_IMAGES` - How many images to request. Default `10`.
 - `POLL_INTERVAL` - How often should the frontend look for updates. Default 5 seconds.
 - `RETRY_INTERVAL` - How frequently should the frontend retry polling on failure.
 - `FILE_EXTENSION` - The filetypes supported. Default `png`.

package-lock.json

@@ -15,12 +15,14 @@
     "next": "12.3.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "recursive-readdir": "^2.2.2",
     "rooks": "^7.4.0"
   },
   "devDependencies": {
     "@types/node": "18.8.3",
     "@types/react": "18.0.21",
     "@types/react-dom": "18.0.6",
+    "@types/recursive-readdir": "^2.2.1",
     "@typescript-eslint/eslint-plugin": "^5.39.0",
     "@typescript-eslint/parser": "^5.39.0",
     "eslint": "8.25.0",

package.json

@@ -1,4 +1,5 @@
 export const DIR = `D:\\stable-diffusion-webui\\outputs\\txt2img-images`;
+export const RECURSIVE = true;
 export const MAX_IMAGES = 10;
 export const POLL_INTERVAL = 5 * 1000;
 export const RETRY_INTERVAL = 10 * 1000;

src/config/index.ts

@@ -1,37 +1,44 @@
 import path from "path";
 import fs from "fs";
 
+import recursive from "recursive-readdir";
 import type { NextApiRequest, NextApiResponse } from "next";
 
-import { DIR, FILE_EXTENSION, MAX_IMAGES } from "@/config";
+import { DIR, FILE_EXTENSION, MAX_IMAGES, RECURSIVE } from "@/config";
 
 type Data = {
   images: string[];
 };
 
 // Files appear to take a while to write... make sure they have existed for a little
-const MIN_DIFF = 2000;
+const MIN_DIFF = 2 * 1000;
 
 export default async function handler(
-  req: NextApiRequest,
+  _: NextApiRequest,
   res: NextApiResponse<Data>
 ) {
-  const files = await fs.promises.readdir(DIR);
+  const files = RECURSIVE
+    ? await recursive(DIR)
+    : (await fs.promises.readdir(DIR)).map((f) => path.join(DIR, f));
 
   const now = new Date().getTime();
 
   const images = files
     .map((fileName) => {
-      const stat = fs.statSync(DIR + "/" + fileName);
+      const stat = fs.statSync(fileName);
       return {
-        name: fileName,
+        name: path.relative(DIR, fileName),
         time: stat.mtime.getTime(),
       };
     })
     .sort((a, b) => {
       return a.time - b.time;
     })
-    .filter((f) => path.extname(f.name).toLowerCase() === `.${FILE_EXTENSION}`)
+    .filter(
+      (f) =>
+        path.extname(f.name).toLowerCase() ===
+        `.${FILE_EXTENSION}`.toLowerCase()
+    )
     .filter((f) => {
       const diff = now - f.time;
       return diff > MIN_DIFF;