fix: show other file types in the middle section (create, sign, verify) #163
12
src/App.scss
12
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 */
|
||||
|
@ -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}>
|
||||
<div className="file-wrapper" id={`file-${name}`}>
|
||||
{file.isPdf ? (
|
||||
getPdfPages(file, i)
|
||||
) : (
|
||||
<React.Fragment key={file.name}>
|
||||
<div className="file-wrapper" id={`file-${file.name}`}>
|
||||
{file.isPdf && getPdfPages(file, i)}
|
||||
{file.isImage && (
|
||||
<img
|
||||
className="file-image"
|
||||
src={file.objectUrl}
|
||||
alt={file.name}
|
||||
/>
|
||||
)}
|
||||
{!(file.isPdf || file.isImage) && (
|
||||
<ExtensionFileBox extension={file.extension} />
|
||||
)}
|
||||
</div>
|
||||
|
@ -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} />
|
||||
}
|
||||
|
@ -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>
|
||||
)
|
||||
|
@ -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())
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user