feat: add uploaded image file as preview

This commit is contained in:
enes 2024-08-22 18:48:03 +02:00
parent 05a2dba164
commit ae08b07d74
5 changed files with 55 additions and 11 deletions

View File

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

View File

@ -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>

View File

@ -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} />
}

View File

@ -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>
)

View File

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