[GH-ISSUE #704] [OSSHACK] Document Thumbnails

kerem commented

2026-02-26 18:45:52 +03:00

Owner

Originally created by @Mythie on GitHub (Dec 1, 2023).
Original GitHub issue: https://github.com/documenso/documenso/issues/704

Improvement Description

Add a thumbnail generation feature for documents uploaded, thumbnails will be created using the first page of the uploaded document.

A high quality and low quality thumbnail should be generated for each document uploaded. The low quality thumbnail will be used in the documents table for quick viewing, while the high quality thumbnail will be used for a more detailed preview upon clicking the thumbnail.

Rationale

Right now, the documents table is very plain and does not provide any visual information about the document. Thumbnails will allow users to quickly identify the document they are looking for.

This is extremely useful for users with many documents that have similar names since it provides a visual cue to help them find the document they are looking for.

Proposed Solution

Add a thumbnail generation feature for documents uploaded, thumbnails will be created using the first page of the uploaded document.
Use either a background job or an endpoint to perform an upsert-like operation for retrieving the thumbnail.
Store the thumbnails somewhere? Currently we have the univeral upload which is catered towards storing documents but could be used for storing thumbnails as well. Alternatively we also store data uris in the database which I'm less inclined to do but is an option.

Alternatives

Use a third party service to generate thumbnails. This would be the easiest solution but would require a third party service to be used which we would like to avoid.

Additional Context

While this might be a good candidate for background jobs we should consider how we can make this work without background jobs since we don't currently have a background job system in place.
We would like to avoid third-party services since we would like to keep the project as self-contained as possible.

Originally created by @Mythie on GitHub (Dec 1, 2023). Original GitHub issue: https://github.com/documenso/documenso/issues/704 ## Improvement Description Add a thumbnail generation feature for documents uploaded, thumbnails will be created using the first page of the uploaded document. A high quality and low quality thumbnail should be generated for each document uploaded. The low quality thumbnail will be used in the documents table for quick viewing, while the high quality thumbnail will be used for a more detailed preview upon clicking the thumbnail. ## Rationale Right now, the documents table is very plain and does not provide any visual information about the document. Thumbnails will allow users to quickly identify the document they are looking for. This is extremely useful for users with many documents that have similar names since it provides a visual cue to help them find the document they are looking for. ## Proposed Solution - Add a thumbnail generation feature for documents uploaded, thumbnails will be created using the first page of the uploaded document. - Use either a background job or an endpoint to perform an upsert-like operation for retrieving the thumbnail. - Store the thumbnails somewhere? Currently we have the univeral upload which is catered towards storing documents but could be used for storing thumbnails as well. Alternatively we also store data uris in the database which I'm less inclined to do but is an option. ## Alternatives - Use a third party service to generate thumbnails. This would be the easiest solution but would require a third party service to be used which we would like to avoid. ## Additional Context - While this might be a good candidate for background jobs we should consider how we can make this work without background jobs since we don't currently have a background job system in place. - We would like to avoid third-party services since we would like to keep the project as self-contained as possible.

kerem added the

Stale

status: triage

osshack

labels

2026-02-26 18:45:52 +03:00

kerem commented

2026-02-26 18:45:53 +03:00

Author

Owner

@itzabhinavarya commented on GitHub (Dec 2, 2023):

@Mythie Assign this to me

@itzabhinavarya commented on GitHub (Dec 2, 2023): @Mythie Assign this to me

kerem commented

2026-02-26 18:45:53 +03:00

Author

Owner

@itzabhinavarya commented on GitHub (Dec 2, 2023):

@Mythie I am working on this.

@itzabhinavarya commented on GitHub (Dec 2, 2023): @Mythie I am working on this.

kerem commented

2026-02-26 18:45:53 +03:00

Author

Owner

@Mythie commented on GitHub (Dec 2, 2023):

For OSSHack participants we won’t be assigning or following our usual guidelines, please start work if you want to do the challenge.

The first good solution (read: to acceptable quality and conformance) wins!

@Mythie commented on GitHub (Dec 2, 2023): For OSSHack participants we won’t be assigning or following our usual guidelines, please start work if you want to do the challenge. The first *good* solution (read: to acceptable quality and conformance) wins!

kerem commented

2026-02-26 18:45:53 +03:00

Author

Owner

@itzabhinavarya commented on GitHub (Dec 2, 2023):

Hii @Mythie Sir, Will you share a loom video for reference.

@itzabhinavarya commented on GitHub (Dec 2, 2023): Hii @Mythie Sir, Will you share a loom video for reference.

kerem commented

2026-02-26 18:45:53 +03:00

Author

Owner

@Mythie commented on GitHub (Dec 3, 2023):

I don't really have a loom video but I do have a figma design that show's the end result we're hoping to achieve with this issue:

https://www.figma.com/file/mKYFxgmekwxXsoXCP9dXXx/Documenso-Design-System?type=design&node-id=443%3A8453&mode=design&t=mqFEcsHSiQtv2Nho-1

As you can see in the design and image the thumbnail would be used on the document table as a visual cue for documents.

@Mythie commented on GitHub (Dec 3, 2023): I don't really have a loom video but I do have a figma design that show's the end result we're hoping to achieve with this issue: https://www.figma.com/file/mKYFxgmekwxXsoXCP9dXXx/Documenso-Design-System?type=design&node-id=443%3A8453&mode=design&t=mqFEcsHSiQtv2Nho-1 ![image](https://github.com/documenso/documenso/assets/13398220/77c991af-3c0b-4983-a6c3-4891da59d489) As you can see in the design and image the thumbnail would be used on the document table as a visual cue for documents.

kerem commented

2026-02-26 18:45:53 +03:00

Author

Owner

@surajgjadhav commented on GitHub (Dec 3, 2023):

HI @Mythie ,
can we use pdf.js for this feature?
or it is preferred to try fist without any external lib ?

@surajgjadhav commented on GitHub (Dec 3, 2023): HI @Mythie , can we use pdf.js for this feature? or it is preferred to try fist without any external lib ?

kerem commented

2026-02-26 18:45:53 +03:00

Author

Owner

@Mythie commented on GitHub (Dec 3, 2023):

PDF.js is fine as we already use it in the app, although I'd like to suggest using https://unjs.io/packages/unpdf/ if you're heading in that direction since we will likely swap to it in the future.

@Mythie commented on GitHub (Dec 3, 2023): PDF.js is fine as we already use it in the app, although I'd like to suggest using https://unjs.io/packages/unpdf/ if you're heading in that direction since we will likely swap to it in the future.

kerem commented

2026-02-26 18:45:53 +03:00

Author

Owner

@Mythie commented on GitHub (Dec 3, 2023):

Do note that we will want to store the images rather than trying to render them using PDF.js during each page load since that can be detrimental to device performance.

If we are storing the images you'll need to consider how to use the canvas package on serverless environments for server side image generation or consider other flows 😄

This is a bit open ended but just dropping thoughts while they're in my head!

@Mythie commented on GitHub (Dec 3, 2023): Do note that we will want to store the images rather than trying to render them using PDF.js during each page load since that can be detrimental to device performance. If we are storing the images you'll need to consider how to use the canvas package on serverless environments for server side image generation or consider other flows 😄 This is a bit open ended but just dropping thoughts while they're in my head!

kerem commented

2026-02-26 18:45:53 +03:00

Author

Owner

@surajgjadhav commented on GitHub (Dec 3, 2023):

Yes, from performance point of view we should limit only required data from the serverless 😅

@surajgjadhav commented on GitHub (Dec 3, 2023): Yes, from performance point of view we should limit only required data from the serverless 😅

kerem commented

2026-02-26 18:45:53 +03:00

Author

Owner

@Mythie commented on GitHub (Dec 3, 2023):

Forwarding from Discord

So to summarise, if I were doing a dirty implementation for a hackathon

New table DocumentThumbnail which would have id thumbnail_bytes hq_thumbnail_bytes
Store thumbnail on the Document via a foreign key
Create a /thumbnail/<id> endpoint which would also support a /thumbnail/<id>/hq
Use stale while revalidate to keep it cached for ages to reduce the performance impact

@Mythie commented on GitHub (Dec 3, 2023): **Forwarding from Discord** So to summarise, if I were doing a dirty implementation for a hackathon - New table `DocumentThumbnail` which would have `id` `thumbnail_bytes` `hq_thumbnail_bytes` - Store thumbnail on the `Document` via a foreign key - Create a `/thumbnail/<id>` endpoint which would also support a `/thumbnail/<id>/hq` - Use stale while revalidate to keep it cached for ages to reduce the performance impact

kerem commented

2026-02-26 18:45:53 +03:00

Author

Owner

@github-actions[bot] commented on GitHub (Jan 2, 2024):

This issue has not seen activity for a while. It will be closed in 30 days unless further activity is detected

@github-actions[bot] commented on GitHub (Jan 2, 2024): This issue has not seen activity for a while. It will be closed in 30 days unless further activity is detected

Rows
Columns

[GH-ISSUE #704] [OSSHACK] Document Thumbnails #205

Improvement Description

Rationale

Proposed Solution

Alternatives

Additional Context