diff --git a/src/components/DrawPDFFields/index.tsx b/src/components/DrawPDFFields/index.tsx
index 7e87cb3..8fb921d 100644
--- a/src/components/DrawPDFFields/index.tsx
+++ b/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 (
- {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 (
-
+
- {getPdfPages(pdfFile, pdfFileIndex)}
- {pdfFileIndex < pdfFiles.length - 1 && (
-
- File Separator
-
+ {pdfFile ? (
+ getPdfPages(pdfFile, i)
+ ) : (
+
+ This is a {extension} file
+
)}
+ {i < selectedFiles.length - 1 && (
+
+ File Separator
+
+ )}
)
})}
diff --git a/src/components/DrawPDFFields/style.module.scss b/src/components/DrawPDFFields/style.module.scss
index 8c888ec..142f88a 100644
--- a/src/components/DrawPDFFields/style.module.scss
+++ b/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;
+}
diff --git a/src/utils/meta.ts b/src/utils/meta.ts
index 276f049..0bee969 100644
--- a/src/utils/meta.ts
+++ b/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()
+}