diff --git a/src/App.scss b/src/App.scss
index 1b5bc87..f21738d 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -94,6 +94,7 @@ input {
}
}
+// For pdf marks
.image-wrapper {
position: relative;
-webkit-user-select: none;
@@ -109,6 +110,17 @@ input {
}
}
+// For image rendering (uploaded image as a file)
+.file-image {
+ -webkit-user-select: none;
+ user-select: none;
+
+ display: block;
+ width: 100%;
+ height: auto;
+ object-fit: contain; /* Ensure the image fits within the container */
+}
+
[data-dev='true'] {
.image-wrapper {
// outline: 1px solid #ccc; /* Optional: for visual debugging */
diff --git a/src/components/DrawPDFFields/index.tsx b/src/components/DrawPDFFields/index.tsx
index cc4d286..b720dad 100644
--- a/src/components/DrawPDFFields/index.tsx
+++ b/src/components/DrawPDFFields/index.tsx
@@ -475,13 +475,18 @@ export const DrawPDFFields = (props: Props) => {
return (
{sigitFiles.map((file, i) => {
- const name = file.name
return (
-
-
- {file.isPdf ? (
- getPdfPages(file, i)
- ) : (
+
+
+ {file.isPdf && getPdfPages(file, i)}
+ {file.isImage && (
+
+ )}
+ {!(file.isPdf || file.isImage) && (
)}
diff --git a/src/components/PDFView/PdfItem.tsx b/src/components/PDFView/PdfItem.tsx
index b6707d3..1a6c6a6 100644
--- a/src/components/PDFView/PdfItem.tsx
+++ b/src/components/PDFView/PdfItem.tsx
@@ -46,6 +46,8 @@ const PdfItem = ({
/>
)
})
+ } else if (file.isImage) {
+ return
} else {
return
}
diff --git a/src/pages/verify/index.tsx b/src/pages/verify/index.tsx
index 172ce42..4e21a82 100644
--- a/src/pages/verify/index.tsx
+++ b/src/pages/verify/index.tsx
@@ -85,7 +85,7 @@ const SlimPdfView = ({
ref={(el) => (pdfRefs.current[id] = el)}
className="file-wrapper"
>
- {file.isPdf ? (
+ {file.isPdf &&
file.pages?.map((page, i) => {
const marks: Mark[] = []
@@ -120,12 +120,18 @@ const SlimPdfView = ({
})}
)
- })
- ) : (
+ })}
+ {file.isImage && (
+
+ )}
+ {!(file.isPdf || file.isImage) && (
)}
-
{i < files.length - 1 && }
)
diff --git a/src/utils/file.ts b/src/utils/file.ts
index d84524d..aad31c7 100644
--- a/src/utils/file.ts
+++ b/src/utils/file.ts
@@ -51,17 +51,22 @@ export const toFile = (
export class SigitFile extends File {
extension: string
- pages?: PdfPage[]
isPdf: boolean
+ isImage: boolean
+
+ pages?: PdfPage[]
+ objectUrl?: string
constructor(file: File) {
super([file], file.name, { type: file.type })
this.isPdf = isPdf(this)
+ this.isImage = isImage(this)
this.extension = extractFileExtension(this.name)
}
async process() {
if (this.isPdf) this.pages = await pdfToImages(await this.arrayBuffer())
+ if (this.isImage) this.objectUrl = URL.createObjectURL(this)
}
}
@@ -118,3 +123,17 @@ export const extractFileExtension = (fileName: string) => {
export const getMediaType = (extension: string) => {
return MOST_COMMON_MEDIA_TYPES.get(extension)
}
+
+export const isImage = (file: File) => {
+ const validImageMediaTypes = [
+ 'image/png',
+ 'image/jpeg',
+ 'image/jpg',
+ 'image/gif',
+ 'image/svg+xml',
+ 'image/bmp',
+ 'image/x-icon'
+ ]
+
+ return validImageMediaTypes.includes(file.type.toLowerCase())
+}