This pull request introduces a new function, createThumbnailFromPDF, which generates a thumbnail image from the first page of a given PDF file using the pdfjs library. Key updates include reading the PDF as an ArrayBuffer, rendering the first page onto a canvas, converting the canvas to a PNG data URL, and updating the state with the thumbnail URL.
Resolves: 61
This PR introduces a new function createThumbnailFromPDF to generate a thumbnail image from the first page of a given PDF file using the pdfjs library. The key updates include:
-File Reading: Utilizes FileReader to read the PDF file as an ArrayBuffer.
-PDF.js Integration: Configures pdfjs to use a CDN worker script for handling PDF operations.
-Rendering PDF Page: Extracts the first page of the PDF and renders it onto a dynamically created canvas element.
-Thumbnail Generation: Converts the rendered canvas into a Data URL representing a PNG image of the PDF's first page.
-State Update: Sets the generated thumbnail URL to state using setThumbnailURL.
These changes enhance the application's functionality by providing a visual preview of uploaded PDF files.
Additional Changes:
Imported necessary CSS for react-pdf annotation layer.
Configured pdfjs worker source to use the appropriate version from the CDN.
This PR aims to improve the user experience by enabling PDF previews through thumbnail generation.
Checklist
Before submitting this pull request, kindly verify that the ensuing checkpoints have been reached.
[x] Have you adhered to the repository's defined coding convention rules?
[x] Have you sent a message along with the result or response?
[x] Have you used the try-catch technique?
I certify that I have carried out the relevant checks and provided the requisite screenshot for validation by submitting this pull request.
Description
Resolves: 61
This PR introduces a new function createThumbnailFromPDF to generate a thumbnail image from the first page of a given PDF file using the pdfjs library. The key updates include:
-File Reading: Utilizes FileReader to read the PDF file as an ArrayBuffer.
-PDF.js Integration: Configures pdfjs to use a CDN worker script for handling PDF operations.
-Rendering PDF Page: Extracts the first page of the PDF and renders it onto a dynamically created canvas element.
-Thumbnail Generation: Converts the rendered canvas into a Data URL representing a PNG image of the PDF's first page.
-State Update: Sets the generated thumbnail URL to state using setThumbnailURL. These changes enhance the application's functionality by providing a visual preview of uploaded PDF files.
Additional Changes:
Imported necessary CSS for react-pdf annotation layer.
Configured pdfjs worker source to use the appropriate version from the CDN.
This PR aims to improve the user experience by enabling PDF previews through thumbnail generation.
Checklist
I certify that I have carried out the relevant checks and provided the requisite screenshot for validation by submitting this pull request.