Implement multiple file to pdf support #9814
Conversation
WalkthroughThe pull request introduces an enhancement to the file upload functionality by enabling multi-file support. A new Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Tip 🌐 Web search-backed reviews and chat
📜 Recent review detailsConfiguration used: CodeRabbit UI ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (4)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for care-ohc ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (1)
src/hooks/useFileUpload.tsx (1)
Line range hint
132-146: Optimize image compression workflowThe current implementation compresses images after adding them to state, which could cause multiple re-renders. Consider compressing before updating state.
const onFileChange = (e: ChangeEvent<HTMLInputElement>): any => { if (!e.target.files?.length) { return; } const selectedFiles = Array.from(e.target.files); - setFiles((prev) => [...prev, ...selectedFiles]); + + const processFiles = async () => { + const processedFiles = await Promise.all( + selectedFiles.map(async (file) => { + const ext = file.name.split(".")[1]; + if (ExtImage.includes(ext)) { + const options = { + initialQuality: 0.6, + alwaysKeepResolution: true, + }; + return imageCompression(file, options); + } + return file; + }) + ); + setFiles((prev) => [...prev, ...processedFiles]); + }; - selectedFiles.forEach((file) => { - const ext: string = file.name.split(".")[1]; - if (ExtImage.includes(ext)) { - const options = { - initialQuality: 0.6, - alwaysKeepResolution: true, - }; - imageCompression(file, options).then((compressedFile: File) => { - setFiles((prev) => - prev.map((f) => (f.name === file.name ? compressedFile : f)), - ); - }); - } - }); + processFiles(); };🧰 Tools
🪛 GitHub Actions: Cypress Tests
[error] Failed to resolve import "jspdf". The module needs to be added to build.rollupOptions.external or properly installed.
🪛 GitHub Actions: Deploy Care Fe
[error] Failed to resolve import 'jspdf'. Module needs to be added to build.rollupOptions.external
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/hooks/useFileUpload.tsx(3 hunks)src/pages/Encounters/tabs/EncounterFilesTab.tsx(2 hunks)
🧰 Additional context used
🪛 GitHub Actions: Cypress Tests
src/hooks/useFileUpload.tsx
[error] Failed to resolve import "jspdf". The module needs to be added to build.rollupOptions.external or properly installed.
🪛 GitHub Actions: Deploy Care Fe
src/hooks/useFileUpload.tsx
[error] Failed to resolve import 'jspdf'. Module needs to be added to build.rollupOptions.external
🔇 Additional comments (1)
src/pages/Encounters/tabs/EncounterFilesTab.tsx (1)
139-139: LGTM! Multiple file upload configuration is correctly implemented.
| @@ -1,6 +1,7 @@ | |||
| import { useMutation, useQueryClient } from "@tanstack/react-query"; | |||
| import imageCompression from "browser-image-compression"; | |||
| import { t } from "i18next"; | |||
| import jsPDF from "jspdf"; | |||
There was a problem hiding this comment.
Add jspdf to build configuration
The jspdf import is causing pipeline failures. Add it to build.rollupOptions.external.
#!/bin/bash
# Verify if jspdf is properly configured in the build setup
fd -e js -e ts "vite.config" -x cat {} \; | grep -A 5 "rollupOptions"🧰 Tools
🪛 GitHub Actions: Cypress Tests
[error] Failed to resolve import "jspdf". The module needs to be added to build.rollupOptions.external or properly installed.
🪛 GitHub Actions: Deploy Care Fe
[error] Failed to resolve import 'jspdf'. Module needs to be added to build.rollupOptions.external
src/hooks/useFileUpload.tsx
Outdated
| let filesToUpload = files; | ||
|
|
||
| if (files.length > 1) { | ||
| const pdfFile = await generatePDF(files); | ||
| if (pdfFile) { | ||
| filesToUpload = [pdfFile]; | ||
| } else { | ||
| console.error("Failed to generate PDF from multiple files."); | ||
| return; | ||
| } | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Improve error handling and user feedback for multiple file uploads
The multiple file upload implementation needs better error handling and user feedback:
- No progress indication during PDF generation
- Silent failure if PDF generation fails
- Missing size limit checks for multiple files
Apply this enhancement:
let filesToUpload = files;
if (files.length > 1) {
+ const totalSize = files.reduce((sum, file) => sum + file.size, 0);
+ const MAX_TOTAL_SIZE = 50 * 1024 * 1024; // 50MB
+ if (totalSize > MAX_TOTAL_SIZE) {
+ setError(t("file_error__total_size"));
+ return;
+ }
+ setProgress(0);
const pdfFile = await generatePDF(files);
if (pdfFile) {
filesToUpload = [pdfFile];
} else {
- console.error("Failed to generate PDF from multiple files.");
+ setError(t("file_error__pdf_generation"));
+ setProgress(null);
return;
}
}Committable suggestion skipped: line range outside the PR's diff.
🧰 Tools
🪛 GitHub Actions: Cypress Tests
[error] Failed to resolve import "jspdf". The module needs to be added to build.rollupOptions.external or properly installed.
🪛 GitHub Actions: Deploy Care Fe
[error] Failed to resolve import 'jspdf'. Module needs to be added to build.rollupOptions.external
| {fileUpload.files?.map((file, index) => ( | ||
| <div key={index} className="flex items-center mb-2"> | ||
| <CareIcon icon="l-paperclip" className="mr-2" /> | ||
| {file.name} | ||
| </div> | ||
| ))} |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Enhance multiple file upload UI/UX
The current UI for multiple files has several limitations:
- No file size information
- No way to remove individual files
- Single filename input is confusing for multiple files
Consider this enhanced implementation:
-{fileUpload.files?.map((file, index) => (
- <div key={index} className="flex items-center mb-2">
- <CareIcon icon="l-paperclip" className="mr-2" />
- {file.name}
- </div>
-))}
+{fileUpload.files?.map((file, index) => (
+ <div key={index} className="flex items-center justify-between mb-2 bg-white p-2 rounded">
+ <div className="flex items-center">
+ <CareIcon icon="l-paperclip" className="mr-2" />
+ <div className="flex flex-col">
+ <span className="text-sm font-medium">{file.name}</span>
+ <span className="text-xs text-gray-500">
+ {(file.size / 1024).toFixed(1)}KB
+ </span>
+ </div>
+ </div>
+ <button
+ onClick={() => fileUpload.removeFile(index)}
+ className="text-gray-500 hover:text-red-500"
+ >
+ <CareIcon icon="l-times" />
+ </button>
+ </div>
+))}Also consider updating the filename input field to handle multiple files:
-<TextFormField
- name="consultation_file"
- type="text"
- label={t("enter_file_name")}
- id="upload-file-name"
- required
- value={fileUpload.fileNames[0] || ""}
- disabled={fileUpload.uploading}
- onChange={(e) => fileUpload.setFileName(e.value)}
- error={fileUpload.error || undefined}
-/>
+{fileUpload.files.map((file, index) => (
+ <TextFormField
+ key={index}
+ name={`file_name_${index}`}
+ type="text"
+ label={t("enter_file_name_for", { name: file.name })}
+ id={`upload-file-name-${index}`}
+ required
+ value={fileUpload.fileNames[index] || ""}
+ disabled={fileUpload.uploading}
+ onChange={(e) => fileUpload.setFileName(e.value, index)}
+ error={fileUpload.error || undefined}
+ />
+))}Committable suggestion skipped: line range outside the PR's diff.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
package.json (1)
104-104: Consider browser-side PDF generation performance impactSince PDF generation will happen in the browser, consider implementing the following optimizations:
- Add a loading state during PDF generation
- Use the existing
browser-image-compressionlibrary to optimize images before PDF generation- Consider implementing lazy loading if handling large numbers of images
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (1)
package.json(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: Test
- GitHub Check: cypress-run (1)
- GitHub Check: OSSAR-Scan
- GitHub Check: CodeQL-Build
🔇 Additional comments (1)
package.json (1)
104-104: Verify jspdf version and security advisoriesThe addition of jspdf for PDF generation is appropriate. However, let's verify the version and check for any security advisories.
Run the following script to check the latest version and security advisories:
✅ Verification successful
✓ jspdf dependency version and security verified
The specified version
^2.5.2is the latest available and is free from known security vulnerabilities. All previously reported issues were patched in earlier versions.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check for security advisories and latest versions of the jspdf library # Check NPM for latest versions curl -s https://registry.npmjs.org/jspdf | jq '.["dist-tags"].latest' # Check for security advisories gh api graphql -f query=' { securityVulnerabilities(first: 5, ecosystem: NPM, package: "jspdf") { nodes { advisory { summary severity publishedAt } vulnerableVersionRange firstPatchedVersion { identifier } } } }'Length of output: 1036
|
👋 Hi, @DonXavierdev, This message is automatically generated by prince-chrismc/label-merge-conflicts-action so don't hesitate to report issues/improvements there. |
…com/DonXavierdev/care_fe into issues/7417/File-upload-enhancement
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
package-lock.json
Outdated
There was a problem hiding this comment.
Should only be adding jspdf 👍
There was a problem hiding this comment.
Even if i remove other dependencies like atob,canvg etc. When user installs using "npm install" jspdf automatically installs the necessary dependencies into the package-lock.json file. What should i do about it. @Jacobjeevan
There was a problem hiding this comment.
Even if i remove other dependencies like atob,canvg etc. When user installs using "npm install" jspdf automatically installs the necessary dependencies into the package-lock.json file. What should i do about it. @Jacobjeevan
Then it's fine (to include them) 👍 Make sure only those are affected though.
There was a problem hiding this comment.
Not relevant to the issue 🤔
src/hooks/useFileUpload.tsx
Outdated
| @@ -238,8 +266,19 @@ export default function useFileUpload( | |||
| if (!validateFileUpload()) return; | |||
|
|
|||
| setProgress(0); | |||
| let filesToUpload = files; | |||
|
|
|||
| if (files.length > 1) { | |||
There was a problem hiding this comment.
Hmm, right now it would combine any multi-uploads, let's not do that..instead let's add an option on FE (similar to "Upload From Device, Open Camera" etc) to trigger this.
Jacobjeevan
added
the
waiting for related PR
…com/DonXavierdev/care_fe into issues/7417/File-upload-enhancement
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
package.json (1)
104-104: Consider performance implications of PDF generationSince this library will be used for merging multiple images into a PDF:
- Consider implementing a maximum file size limit
- Add client-side image compression before PDF generation
- Consider showing a loading indicator during PDF generation
- Test with various image formats (JPEG, PNG, etc.) and sizes
The existing
browser-image-compressiondependency (line 40) could be utilized for image optimization before PDF generation.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (1)
package.json(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: Redirect rules - care-ohc
- GitHub Check: Header rules - care-ohc
- GitHub Check: Pages changed - care-ohc
🔇 Additional comments (1)
package.json (1)
104-104: Verify jspdf version and compatibilityPlease verify the jspdf version and any known issues:
✅ Verification successful
✅ jspdf version is appropriate and secure
The specified version (^2.5.2) is the latest available and has no known security vulnerabilities. All previously reported issues were patched in earlier versions.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Check latest version and security advisories for jspdf # Get latest version from npm echo "Latest version from npm:" npm view jspdf version # Check for security advisories echo -e "\nSecurity advisories:" gh api graphql -f query=' { securityVulnerabilities(first: 5, ecosystem: NPM, package: "jspdf") { nodes { advisory { summary severity publishedAt } vulnerableVersionRange firstPatchedVersion { identifier } } } }'Length of output: 1103
…o issues/7417/File-upload-enhancement
…com/DonXavierdev/care_fe into issues/7417/File-upload-enhancement
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (3)
src/hooks/useFileUpload.tsx (2)
4-4:⚠️ Potential issueEnhance PDF generation robustness and error handling
The PDF generation implementation needs improvements in several areas:
- No validation of file types before processing
- Hard-coded image dimensions (190, 0) may cause image distortion
- No progress indication during PDF generation
- Basic error handling without specific error messages
Previous review suggestions for improving the implementation are still valid. Additionally:
- Add file type validation before processing
- Consider memory usage for large files
- Add progress indication during PDF generation
- Improve error handling with specific error messages
Also applies to: 101-127
265-275:⚠️ Potential issueImprove error handling and user feedback for multiple file uploads
The multiple file upload implementation needs better error handling and user feedback:
- No size limit checks for multiple files
- Silent failure if PDF generation fails
- No progress indication during PDF generation
Previous review suggestions for improving error handling and user feedback are still valid.
src/pages/Encounters/tabs/EncounterFilesTab.tsx (1)
547-552: 🛠️ Refactor suggestionEnhance multiple file upload UI/UX
The current UI for multiple files has several limitations:
- No file size information
- No way to remove individual files
- Single filename input is confusing for multiple files
Previous review suggestions for improving the UI/UX are still valid.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (3)
package.json(1 hunks)src/hooks/useFileUpload.tsx(3 hunks)src/pages/Encounters/tabs/EncounterFilesTab.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- package.json
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Test
- GitHub Check: cypress-run (1)
| @@ -136,6 +136,7 @@ export const EncounterFilesTab = (props: EncounterTabProps) => { | |||
| ], | |||
| allowNameFallback: false, | |||
| onUpload: () => refetch(), | |||
| multiple: true, | |||
There was a problem hiding this comment.
Revise the automatic PDF generation approach
As per previous feedback from Jacobjeevan, automatically combining all multi-uploads into a PDF is not the desired behavior. Instead, consider adding a separate UI option to trigger PDF generation.
Consider adding a new option in the file upload dropdown menu:
<DropdownMenuContent
align="end"
className="w-[calc(100vw-2.5rem)] sm:w-full"
>
+ <DropdownMenuItem className="flex flex-row items-center text-primary-900">
+ <button
+ onClick={() => handleCombineIntoPDF()}
+ className="flex flex-row items-center"
+ >
+ <CareIcon icon="l-file-pdf" className="mr-1" />
+ <span>{t("combine_as_pdf")}</span>
+ </button>
+ </DropdownMenuItem>Committable suggestion skipped: line range outside the PR's diff.
|
@DonXavierdev discuss the above issue in the channel and find an optimal solution, to handle this issue The issues listed below are unrelated and interconnected. we can solve them in separate PR once this PR is merged
|
|
Conflicts have been detected against the base branch. Please merge the base branch into your branch.
|
|
@Jacobjeevan Had to remove existing compression to increase image quality. Would like to know your opinion on this. |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
src/hooks/useFileUpload.tsx (1)
141-156: Add error handling for image compression.The image compression implementation lacks error handling and progress indication.
if (options.compress) { + setProgress(-1); // Show indeterminate progress selectedFiles.forEach((file) => { const ext: string = file.name.split(".")[1]; if (ExtImage.includes(ext)) { const options = { initialQuality: 0.6, alwaysKeepResolution: true, + onProgress: (progress: number) => setProgress(progress), }; - imageCompression(file, options).then((compressedFile: File) => { + imageCompression(file, options) + .then((compressedFile: File) => { setFiles((prev) => prev.map((f) => (f.name === file.name ? compressedFile : f)), ); + }) + .catch((error) => { + toast.error(t("file_error__compression")); + setError(t("file_error__compression")); + }) + .finally(() => { + setProgress(0); + }); } }); }src/components/Files/FilesTab.tsx (2)
604-712: Improve file name input accessibility and validation.The file name input implementation needs improvements:
- Missing aria-label for accessibility
- No validation for PDF file name format
- Duplicate error message display logic
<Input name="file_name_0" type="text" id="upload-file-name-0" required value={fileUpload.fileNames[0] || ""} disabled={fileUpload.uploading} + aria-label={t("enter_file_name")} + pattern="^[a-zA-Z0-9-_\s]+\.pdf$" onChange={(e) => { - fileUpload.setFileName(e.target.value); + const value = e.target.value.replace(/[^a-zA-Z0-9-_\s]/g, ''); + fileUpload.setFileName( + value.endsWith('.pdf') ? value : `${value}.pdf` + ); fileUpload.setError(null); }} className="ml-0.5 mb-1" />
713-726: Add tooltip for PDF option.The PDF checkbox needs a tooltip to explain the feature to users.
{fileUpload.files.length > 1 && ( <div className="flex items-center gap-2 mt-4"> - <Checkbox - id="file_upload_patient" - checked={isPdf} - onCheckedChange={(checked: boolean) => setIsPdf(checked)} - disabled={fileUpload.uploading} - className="cursor-pointer" - /> - <Label htmlFor="file_upload_patient" className="cursor-pointer"> - {t("combine_files_pdf")} - </Label> + <TooltipProvider> + <Tooltip> + <TooltipTrigger> + <div className="flex items-center gap-2"> + <Checkbox + id="file_upload_patient" + checked={isPdf} + onCheckedChange={(checked: boolean) => setIsPdf(checked)} + disabled={fileUpload.uploading} + className="cursor-pointer" + /> + <Label htmlFor="file_upload_patient" className="cursor-pointer"> + {t("combine_files_pdf")} + </Label> + </div> + </TooltipTrigger> + <TooltipContent> + {t("combine_files_pdf_tooltip")} + </TooltipContent> + </Tooltip> + </TooltipProvider> </div> )}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (2)
src/components/Files/FilesTab.tsx(5 hunks)src/hooks/useFileUpload.tsx(6 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Test
- GitHub Check: cypress-run (1)
🔇 Additional comments (3)
src/hooks/useFileUpload.tsx (2)
4-4: Add jspdf to build configuration.The jspdf import is causing pipeline failures. Add it to build.rollupOptions.external.
286-324: Improve PDF generation workflow.Several issues with the current implementation:
- As per previous discussions, combining any multi-uploads is not the desired behavior. Add a specific UI option for PDF generation.
- Clearing all files on PDF generation failure is too aggressive. Consider preserving the original files.
- Missing progress indication during PDF generation.
src/components/Files/FilesTab.tsx (1)
580-585: LGTM! Proper cleanup of PDF state.The handleDialogClose implementation correctly resets the PDF state when the dialog is closed.
| const generatePDF = async (files: File[]): Promise<File | null> => { | ||
| try { | ||
| toast.info(t("file_conversion_in_progress")); | ||
| const pdf = new jsPDF(); | ||
| const totalFiles = files.length; | ||
|
|
||
| for (const [index, file] of files.entries()) { | ||
| const imgData = URL.createObjectURL(file); | ||
| pdf.addImage(imgData, "JPEG", 10, 10, 190, 0); | ||
| URL.revokeObjectURL(imgData); | ||
| if (index < files.length - 1) pdf.addPage(); | ||
| const progress = Math.round(((index + 1) / totalFiles) * 100); | ||
| setProgress(progress); | ||
| } | ||
| const pdfBlob = pdf.output("blob"); | ||
| const pdfFile = new File([pdfBlob], "combined.pdf", { | ||
| type: "application/pdf", | ||
| }); | ||
| setProgress(0); | ||
| toast.success(t("file_conversion_success")); | ||
| return pdfFile; | ||
| } catch (error) { | ||
| toast.error(t("file_error__generate_pdf")); | ||
| setError(t("file_error__generate_pdf", { error: String(error) })); | ||
| setProgress(0); | ||
| return null; | ||
| } | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Improve PDF generation implementation.
The current implementation has several issues:
- No validation of file types before attempting PDF generation
- Hard-coded image dimensions may cause distortion
- Memory resources not properly managed
- Progress indication could be improved
Apply these improvements:
const generatePDF = async (files: File[]): Promise<File | null> => {
try {
+ if (!files.every(file => file.type.startsWith("image/"))) {
+ toast.error(t("file_error__file_type"));
+ setProgress(0);
+ return null;
+ }
toast.info(t("file_conversion_in_progress"));
const pdf = new jsPDF();
const totalFiles = files.length;
for (const [index, file] of files.entries()) {
- const imgData = URL.createObjectURL(file);
+ const imgData = await new Promise<string>((resolve) => {
+ const reader = new FileReader();
+ reader.onload = () => resolve(reader.result as string);
+ reader.readAsDataURL(file);
+ });
+ const img = new Image();
+ await new Promise<void>((resolve) => {
+ img.onload = () => resolve();
+ img.src = imgData;
+ });
+ const aspectRatio = img.height / img.width;
+ const pageWidth = pdf.internal.pageSize.getWidth() - 20;
+ const pageHeight = pageWidth * aspectRatio;
- pdf.addImage(imgData, "JPEG", 10, 10, 190, 0);
+ pdf.addImage(imgData, "JPEG", 10, 10, pageWidth, pageHeight);
- URL.revokeObjectURL(imgData);
if (index < files.length - 1) pdf.addPage();
const progress = Math.round(((index + 1) / totalFiles) * 100);
setProgress(progress);
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const generatePDF = async (files: File[]): Promise<File | null> => { | |
| try { | |
| toast.info(t("file_conversion_in_progress")); | |
| const pdf = new jsPDF(); | |
| const totalFiles = files.length; | |
| for (const [index, file] of files.entries()) { | |
| const imgData = URL.createObjectURL(file); | |
| pdf.addImage(imgData, "JPEG", 10, 10, 190, 0); | |
| URL.revokeObjectURL(imgData); | |
| if (index < files.length - 1) pdf.addPage(); | |
| const progress = Math.round(((index + 1) / totalFiles) * 100); | |
| setProgress(progress); | |
| } | |
| const pdfBlob = pdf.output("blob"); | |
| const pdfFile = new File([pdfBlob], "combined.pdf", { | |
| type: "application/pdf", | |
| }); | |
| setProgress(0); | |
| toast.success(t("file_conversion_success")); | |
| return pdfFile; | |
| } catch (error) { | |
| toast.error(t("file_error__generate_pdf")); | |
| setError(t("file_error__generate_pdf", { error: String(error) })); | |
| setProgress(0); | |
| return null; | |
| } | |
| }; | |
| const generatePDF = async (files: File[]): Promise<File | null> => { | |
| try { | |
| + if (!files.every(file => file.type.startsWith("image/"))) { | |
| + toast.error(t("file_error__file_type")); | |
| + setProgress(0); | |
| + return null; | |
| + } | |
| toast.info(t("file_conversion_in_progress")); | |
| const pdf = new jsPDF(); | |
| const totalFiles = files.length; | |
| for (const [index, file] of files.entries()) { | |
| - const imgData = URL.createObjectURL(file); | |
| + const imgData = await new Promise<string>((resolve) => { | |
| + const reader = new FileReader(); | |
| + reader.onload = () => resolve(reader.result as string); | |
| + reader.readAsDataURL(file); | |
| + }); | |
| + const img = new Image(); | |
| + await new Promise<void>((resolve) => { | |
| + img.onload = () => resolve(); | |
| + img.src = imgData; | |
| + }); | |
| + const aspectRatio = img.height / img.width; | |
| + const pageWidth = pdf.internal.pageSize.getWidth() - 20; | |
| + const pageHeight = pageWidth * aspectRatio; | |
| - pdf.addImage(imgData, "JPEG", 10, 10, 190, 0); | |
| + pdf.addImage(imgData, "JPEG", 10, 10, pageWidth, pageHeight); | |
| - URL.revokeObjectURL(imgData); | |
| if (index < files.length - 1) pdf.addPage(); | |
| const progress = Math.round(((index + 1) / totalFiles) * 100); | |
| setProgress(progress); | |
| } | |
| const pdfBlob = pdf.output("blob"); | |
| const pdfFile = new File([pdfBlob], "combined.pdf", { | |
| type: "application/pdf", | |
| }); | |
| setProgress(0); | |
| toast.success(t("file_conversion_success")); | |
| return pdfFile; | |
| } catch (error) { | |
| toast.error(t("file_error__generate_pdf")); | |
| setError(t("file_error__generate_pdf", { error: String(error) })); | |
| setProgress(0); | |
| return null; | |
| } | |
| }; |
|
Conflicts have been detected against the base branch. Please merge the base branch into your branch.
|
|
LGTM , solve the rest of the issue earlier mention as a separate PR |
…o issues/7417/File-upload-enhancement
|
@DonXavierdev Your efforts have helped advance digital healthcare and TeleICU systems. 🚀 Thank you for taking the time out to make CARE better. We hope you continue to innovate and contribute; your impact is immense! 🙌 |
Proposed Changes
@ohcnetwork/care-fe-code-reviewers
Summary by CodeRabbit
New Features
Bug Fixes
Documentation
Chores