new release #190
12
src/App.scss
12
src/App.scss
@ -94,6 +94,7 @@ input {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// For pdf marks
|
||||||
.image-wrapper {
|
.image-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
-webkit-user-select: none;
|
-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'] {
|
[data-dev='true'] {
|
||||||
.image-wrapper {
|
.image-wrapper {
|
||||||
// outline: 1px solid #ccc; /* Optional: for visual debugging */
|
// outline: 1px solid #ccc; /* Optional: for visual debugging */
|
||||||
|
@ -475,13 +475,18 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
return (
|
return (
|
||||||
<div className="files-wrapper">
|
<div className="files-wrapper">
|
||||||
{sigitFiles.map((file, i) => {
|
{sigitFiles.map((file, i) => {
|
||||||
const name = file.name
|
|
||||||
return (
|
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} />
|
<ExtensionFileBox extension={file.extension} />
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
@ -46,6 +46,8 @@ const PdfItem = ({
|
|||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
|
} else if (file.isImage) {
|
||||||
|
return <img className="file-image" src={file.objectUrl} alt={file.name} />
|
||||||
} else {
|
} else {
|
||||||
return <ExtensionFileBox extension={file.extension} />
|
return <ExtensionFileBox extension={file.extension} />
|
||||||
}
|
}
|
||||||
|
@ -85,7 +85,7 @@ const SlimPdfView = ({
|
|||||||
ref={(el) => (pdfRefs.current[id] = el)}
|
ref={(el) => (pdfRefs.current[id] = el)}
|
||||||
className="file-wrapper"
|
className="file-wrapper"
|
||||||
>
|
>
|
||||||
{file.isPdf ? (
|
{file.isPdf &&
|
||||||
file.pages?.map((page, i) => {
|
file.pages?.map((page, i) => {
|
||||||
const marks: Mark[] = []
|
const marks: Mark[] = []
|
||||||
|
|
||||||
@ -120,12 +120,18 @@ const SlimPdfView = ({
|
|||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
})
|
})}
|
||||||
) : (
|
{file.isImage && (
|
||||||
|
<img
|
||||||
|
className="file-image"
|
||||||
|
src={file.objectUrl}
|
||||||
|
alt={file.name}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{!(file.isPdf || file.isImage) && (
|
||||||
<ExtensionFileBox extension={file.extension} />
|
<ExtensionFileBox extension={file.extension} />
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{i < files.length - 1 && <FileDivider />}
|
{i < files.length - 1 && <FileDivider />}
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
)
|
)
|
||||||
|
@ -51,17 +51,22 @@ export const toFile = (
|
|||||||
|
|
||||||
export class SigitFile extends File {
|
export class SigitFile extends File {
|
||||||
extension: string
|
extension: string
|
||||||
pages?: PdfPage[]
|
|
||||||
isPdf: boolean
|
isPdf: boolean
|
||||||
|
isImage: boolean
|
||||||
|
|
||||||
|
pages?: PdfPage[]
|
||||||
|
objectUrl?: string
|
||||||
|
|
||||||
constructor(file: File) {
|
constructor(file: File) {
|
||||||
super([file], file.name, { type: file.type })
|
super([file], file.name, { type: file.type })
|
||||||
this.isPdf = isPdf(this)
|
this.isPdf = isPdf(this)
|
||||||
|
this.isImage = isImage(this)
|
||||||
this.extension = extractFileExtension(this.name)
|
this.extension = extractFileExtension(this.name)
|
||||||
}
|
}
|
||||||
|
|
||||||
async process() {
|
async process() {
|
||||||
if (this.isPdf) this.pages = await pdfToImages(await this.arrayBuffer())
|
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) => {
|
export const getMediaType = (extension: string) => {
|
||||||
return MOST_COMMON_MEDIA_TYPES.get(extension)
|
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