src/components/DrawPDFFields/index.tsx

@@ -21,7 +21,7 @@ import {
   DrawTool
 } from '../../types/drawing'
 import { truncate } from 'lodash'
-import { hexToNpub } from '../../utils'
+import { extractFileExtension, hexToNpub } from '../../utils'
 import { toPdfFiles } from '../../utils/pdf.ts'
 PDFJS.GlobalWorkerOptions.workerSrc = new URL(
   'pdfjs-dist/build/pdf.worker.min.mjs',
@@ -478,25 +478,34 @@ export const DrawPDFFields = (props: Props) => {
 
   return (
     <div className={styles.view}>
-      {pdfFiles.map((pdfFile, pdfFileIndex: number) => {
+      {selectedFiles.map((file, i) => {
+        const name = file.name
+        const extension = extractFileExtension(name)
+        const pdfFile = pdfFiles.find((pdf) => pdf.file.name === name)
         return (
-          <React.Fragment key={pdfFile.file.name}>
+          <React.Fragment key={name}>
             <div
               className={`${styles.fileWrapper} ${styles.scrollTarget}`}
-              id={`file-${pdfFile.file.name}`}
+              id={`file-${name}`}
             >
-              {getPdfPages(pdfFile, pdfFileIndex)}
+              {pdfFile ? (
-              {pdfFileIndex < pdfFiles.length - 1 && (
+                getPdfPages(pdfFile, i)
-                <Divider
+              ) : (
-                  sx={{
+                <div className={styles.otherFile}>
-                    fontSize: '12px',
+                  This is a {extension} file
-                    color: 'rgba(0,0,0,0.15)'
+                </div>
-                  }}
-                >
-                  File Separator
-                </Divider>
               )}
             </div>
+            {i < selectedFiles.length - 1 && (
+              <Divider
+                sx={{
+                  fontSize: '12px',
+                  color: 'rgba(0,0,0,0.15)'
+                }}
+              >
+                File Separator
+              </Divider>
+            )}
           </React.Fragment>
         )
       })}

src/components/DrawPDFFields/style.module.scss

@@ -104,3 +104,15 @@
   flex-direction: column;
   gap: 25px;
 }
+
+.otherFile {
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.5);
+  height: 100px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: rgba(0, 0, 0, 0.25);
+  font-size: 14px;
+}

src/utils/meta.ts

@@ -190,3 +190,11 @@ export const extractFileExtensions = (fileNames: string[]) => {
 
   return { extensions, isSame }
 }
+
+/**
+ * @param fileName - Filename to check
+ * @returns Extension string
+ */
+export const extractFileExtension = (fileName: string) => {
+  return fileName.split('.').pop()
+}