Filter on filetype

Author: John Richard Chipps-Harding

README.md

@@ -19,3 +19,5 @@ 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.
 - `POLL_INTERVAL` - How often should the frontend look for updates. Default 5 seconds.
+- `FILE_EXTENSION` - The filetypes supported. Default `png`.
+- `FILE_MIME` - The file mime type. Default `image/png`.

src/config/index.ts

@@ -1,3 +1,5 @@
 export const DIR = `D:\\stable-diffusion-webui\\outputs\\txt2img-images`;
 export const MAX_IMAGES = 10;
 export const POLL_INTERVAL = 5 * 1000;
+export const FILE_EXTENSION = "png";
+export const FILE_MIME = "image/png";

src/pages/_app.tsx

@@ -1,8 +1,8 @@
 import "@/styles/globals.css";
 import type { AppProps } from "next/app";
 
-function MyApp({ Component, pageProps }: AppProps) {
+const MyApp = ({ Component, pageProps }: AppProps) => {
   return <Component {...pageProps} />;
-}
+};
 
 export default MyApp;

src/pages/api/image.ts

@@ -3,7 +3,7 @@ import fs from "fs";
 
 import type { NextApiRequest, NextApiResponse } from "next";
 
-import { DIR } from "@/config";
+import { DIR, FILE_MIME } from "@/config";
 
 type QueryData = {
   image: string;
@@ -25,7 +25,7 @@ export default async function handler(
   const stat = fs.statSync(filePath);
 
   res.writeHead(200, {
-    "Content-Type": "image/png",
+    "Content-Type": FILE_MIME,
     "Content-Length": stat.size,
   });
 

src/pages/api/images.ts

@@ -1,8 +1,9 @@
+import path from "path";
 import fs from "fs";
 
 import type { NextApiRequest, NextApiResponse } from "next";
 
-import { DIR, MAX_IMAGES } from "@/config";
+import { DIR, FILE_EXTENSION, MAX_IMAGES } from "@/config";
 
 type Data = {
   images: string[];
@@ -15,19 +16,20 @@ export default async function handler(
   const files = await fs.promises.readdir(DIR);
 
   const images = files
-    .map(function (fileName) {
+    .map((fileName) => {
       const stat = fs.statSync(DIR + "/" + fileName);
       return {
         name: fileName,
         time: stat.mtime.getTime(),
       };
     })
-    .sort(function (a, b) {
+    .sort((a, b) => {
       return a.time - b.time;
     })
+    .filter((f) => path.extname(f.name).toLowerCase() === `.${FILE_EXTENSION}`)
     .reverse()
-    .map(function (v) {
-      return v.name;
+    .map((f) => {
+      return f.name;
     });
 
   res.status(200).json({ images: images.slice(0, MAX_IMAGES) });