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 */

src/components/DrawPDFFields/index.tsx

@@ -475,13 +475,18 @@ export const DrawPDFFields = (props: Props) => {
   return (
     <div className="files-wrapper">
       {sigitFiles.map((file, i) => {
-        const name = file.name
         return (
-          <React.Fragment key={name}>
+          <React.Fragment key={file.name}>
-            <div className="file-wrapper" id={`file-${name}`}>
+            <div className="file-wrapper" id={`file-${file.name}`}>
-              {file.isPdf ? (
+              {file.isPdf && getPdfPages(file, i)}
-                getPdfPages(file, i)
+              {file.isImage && (
-              ) : (
+                <img
+                  className="file-image"
+                  src={file.objectUrl}
+                  alt={file.name}
+                />
+              )}
+              {!(file.isPdf || file.isImage) && (
                 <ExtensionFileBox extension={file.extension} />
               )}
             </div>

src/components/PDFView/PdfItem.tsx

@@ -46,6 +46,8 @@ const PdfItem = ({
         />
       )
     })
+  } else if (file.isImage) {
+    return <img className="file-image" src={file.objectUrl} alt={file.name} />
   } else {
     return <ExtensionFileBox extension={file.extension} />
   }

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 = ({
                       })}
                     </div>
                   )
-                })
+                })}
-              ) : (
+              {file.isImage && (
+                <img
+                  className="file-image"
+                  src={file.objectUrl}
+                  alt={file.name}
+                />
+              )}
+              {!(file.isPdf || file.isImage) && (
                 <ExtensionFileBox extension={file.extension} />
               )}
             </div>
-
             {i < files.length - 1 && <FileDivider />}
           </React.Fragment>
         )

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())
+}