Implement multiple File uploading #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
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (3)
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.
src/components/Files/FilesTab.tsx
Outdated
| <Checkbox | ||
| id="file_upload_patient" | ||
| checked={isPdf} | ||
| onCheckedChange={(checked) => setIsPdf(!!checked)} |
There was a problem hiding this comment.
| onCheckedChange={(checked) => setIsPdf(!!checked)} | |
| onCheckedChange={(checked: boolean) => setIsPdf(checked)} |
There was a problem hiding this comment.
Try to think from user's perspective; when the checkbox is clicked, does it make sense to continue displaying individual textboxes for each file included?
Instead display all the files names, with only one textbox field.
There was a problem hiding this comment.
While you are at it, go ahead and replace the TextFormField with Shadcn's Input. Feel free to ping me here or on slack if you have any questions :)
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/components/Files/FilesTab.tsx (2)
599-633: Consider improving the combined PDF preview UI.The current implementation shows a simple list of filenames. Consider enhancing the user experience by:
- Adding file size information
- Showing thumbnails for image files
- Adding a preview of how the combined PDF might look
<div className="space-y-2"> <ul className="list-disc list-inside space-y-1"> {fileUpload.files.map((file, index) => ( - <li key={index} className="truncate"> - {file.name} - </li> + <li key={index} className="flex items-center gap-2"> + <img + src={URL.createObjectURL(file)} + alt={file.name} + className="w-8 h-8 object-cover rounded" + /> + <span className="truncate">{file.name}</span> + <span className="text-sm text-gray-500"> + ({(file.size / 1024).toFixed(1)} KB) + </span> + </li> ))} </ul> </div>
697-697: Add loading state feedback during PDF conversion.When
isPdfis true, the upload process includes PDF conversion which might take longer. Consider adding a separate loading state or progress indicator for the conversion process.onClick={() => fileUpload.handleFileUpload(associatingId, isPdf)} -disabled={fileUpload.uploading} +disabled={fileUpload.uploading || fileUpload.converting} className="w-full" id="upload_file_button" > <CareIcon icon="l-check" className="mr-1" /> -{t("upload")} +{isPdf && fileUpload.converting ? t("converting") : t("upload")}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
public/locale/en.json(4 hunks)src/components/Files/FilesTab.tsx(5 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- public/locale/en.json
🔇 Additional comments (3)
src/components/Files/FilesTab.tsx (3)
10-10: LGTM! Proper imports added.The required imports for Checkbox and Input components from shadcn/ui have been correctly added.
Also applies to: 23-23
574-580: LGTM! Proper cleanup in dialog close handler.The handler correctly resets the PDF state and clears files when the dialog is closed.
679-692: Verify PDF conversion capabilities.The PDF conversion feature needs to be properly guarded:
- Verify device capabilities for PDF generation
- Add file size limits
- Handle conversion errors gracefully
✅ Verification successful
PDF conversion capabilities are properly guarded ✓
The codebase already implements the necessary safeguards for PDF conversion:
- File size limit of 100MB is enforced
- Error handling for PDF generation failures is implemented
- File type validation is in place
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Check for PDF-related error handling rg -A 5 "catch.*Error.*pdf|pdf.*error" . # Look for file size validation rg -A 5 "maxFileSize|file.*size.*limit" .Length of output: 86
Script:
#!/bin/bash # Search for PDF-related code ast-grep --pattern 'function $_($$_) { $$$ pdf $$$ }' ast-grep --pattern 'const $_ = async ($$$) => { $$$ pdf $$$ }' # Search for file upload related code rg -i "upload.*file|file.*upload" -A 5 # Search for file validation rg -i "validate.*file|file.*validation" -A 5 # Search for any PDF-related imports or configurations rg -i "pdf" -A 2Length of output: 68498
src/components/Files/FilesTab.tsx
Outdated
| <Input | ||
| name="combined_file_name" | ||
| type="text" | ||
| id="combined-file-name" | ||
| required | ||
| value={fileUpload.fileNames[0] || ""} | ||
| disabled={fileUpload.uploading} | ||
| onChange={(e) => fileUpload.setFileName(e.target.value)} | ||
| /> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add file name validation for PDF output.
The combined PDF file name input needs proper validation:
- Check for valid PDF file name characters
- Ensure .pdf extension
- Prevent overwriting existing files
<Input
name="combined_file_name"
type="text"
id="combined-file-name"
required
value={fileUpload.fileNames[0] || ""}
disabled={fileUpload.uploading}
- onChange={(e) => fileUpload.setFileName(e.target.value)}
+ onChange={(e) => {
+ const value = e.target.value.replace(/[^a-zA-Z0-9-_\s]/g, '');
+ fileUpload.setFileName(
+ value.endsWith('.pdf') ? value : `${value}.pdf`
+ );
+ }}
+ pattern="^[a-zA-Z0-9-_\s]+\.pdf$"
/>📝 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.
| <Input | |
| name="combined_file_name" | |
| type="text" | |
| id="combined-file-name" | |
| required | |
| value={fileUpload.fileNames[0] || ""} | |
| disabled={fileUpload.uploading} | |
| onChange={(e) => fileUpload.setFileName(e.target.value)} | |
| /> | |
| <Input | |
| name="combined_file_name" | |
| type="text" | |
| id="combined-file-name" | |
| required | |
| value={fileUpload.fileNames[0] || ""} | |
| disabled={fileUpload.uploading} | |
| onChange={(e) => { | |
| const value = e.target.value.replace(/[^a-zA-Z0-9-_\s]/g, ''); | |
| fileUpload.setFileName( | |
| value.endsWith('.pdf') ? value : `${value}.pdf` | |
| ); | |
| }} | |
| pattern="^[a-zA-Z0-9-_\s]+\.pdf$" | |
| /> |
|
👋 Hi, @DonXavierdev, This message is automatically generated by prince-chrismc/label-merge-conflicts-action so don't hesitate to report issues/improvements there. |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/components/Files/FilesTab.tsx (1)
583-583: Consider moving the state declaration above the handler.The state declaration should be moved above the
handleDialogClosefunction since the handler depends on it.+ const [isPdf, setIsPdf] = useState(false); const handleDialogClose = (open: boolean) => { if (!open) { setIsPdf(false); fileUpload.clearFiles(); } onOpenChange(open); }; const { t } = useTranslation(); - const [isPdf, setIsPdf] = useState(false);
📜 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)
src/components/Files/FilesTab.tsx(5 hunks)
🔇 Additional comments (4)
src/components/Files/FilesTab.tsx (4)
10-10: LGTM!The import of the Checkbox component from shadcn/ui is correctly added.
575-581: LGTM!The dialog close handler properly cleans up the state by resetting
isPdfand clearing files.
619-625: 🛠️ Refactor suggestionAdd file name validation for PDF output.
The combined PDF file name input needs proper validation to ensure valid characters and proper extension.
<Input name="combined_file_name" type="text" id="combined-file-name" required value={fileUpload.fileNames[0] || ""} disabled={fileUpload.uploading} - onChange={(e) => fileUpload.setFileName(e.target.value)} + onChange={(e) => { + const value = e.target.value.replace(/[^a-zA-Z0-9-_\s]/g, ''); + fileUpload.setFileName( + value.endsWith('.pdf') ? value : `${value}.pdf` + ); + }} + pattern="^[a-zA-Z0-9-_\s]+\.pdf$" />Likely invalid or redundant comment.
698-698: Verify PDF generation capability before upload.The upload handler needs to verify device capabilities for PDF generation.
src/components/Files/FilesTab.tsx
Outdated
| <Label | ||
| htmlFor={`upload-file-name-${index}`} | ||
| className="text-sm font-medium text-gray-700" | ||
| htmlFor="upload-file-name-0" | ||
| className="block text-sm font-medium text-gray-700" | ||
| > | ||
| {t("enter_file_name")} | ||
| {t("enter_combined_file_name")} | ||
| </Label> | ||
| <Input | ||
| name={`file_name_${index}`} | ||
| name="combined_file_name" | ||
| type="text" | ||
| id={`upload-file-name-${index}`} | ||
| id="combined-file-name" | ||
| required | ||
| className={ | ||
| index === 0 && fileUpload.error | ||
| ? "border-red-500 focus:ring-red-500" | ||
| : "border-gray-300 focus:ring-primary" | ||
| } | ||
| value={fileUpload.fileNames[index] || ""} | ||
| value={fileUpload.fileNames[0] || ""} | ||
| disabled={fileUpload.uploading} | ||
| onChange={(e) => | ||
| fileUpload.setFileName(e.target.value, index) | ||
| } | ||
| onChange={(e) => fileUpload.setFileName(e.target.value)} | ||
| /> | ||
| {index === 0 && fileUpload.error && ( | ||
| <p className="mt-1 text-sm text-red-500"> | ||
| {fileUpload.error && ( | ||
| <p className="mt-2 text-sm text-red-600"> | ||
| {fileUpload.error} | ||
| </p> | ||
| )} | ||
| </div> | ||
| </div> | ||
| ))} | ||
| </> | ||
| ) : ( | ||
| fileUpload.files.map((file, index) => ( | ||
| <div key={index} className="space-y-2"> | ||
| <div className="flex items-center justify-between gap-2 rounded-md bg-secondary-300 px-4 py-2"> | ||
| <span className="flex items-center truncate"> | ||
| <CareIcon icon="l-paperclip" className="mr-2 shrink-0" /> | ||
| <span className="truncate">{file.name}</span> | ||
| </span> | ||
| <Button | ||
| variant="ghost" | ||
| size="icon" | ||
| onClick={() => fileUpload.removeFile(index)} | ||
| disabled={fileUpload.uploading} | ||
| > | ||
| <CareIcon icon="l-times" /> | ||
| </Button> | ||
| </div> | ||
| <div> | ||
| <Label | ||
| htmlFor={`upload-file-name-${index}`} | ||
| className="block text-sm font-medium text-gray-700" | ||
| > | ||
| {t("enter_file_name")} | ||
| </Label> | ||
|
|
||
| <Input | ||
| name={`file_name_${index}`} | ||
| type="text" | ||
| id={`upload-file-name-${index}`} | ||
| required | ||
| value={fileUpload.fileNames[index] || ""} | ||
| disabled={fileUpload.uploading} | ||
| onChange={(e) => | ||
| fileUpload.setFileName(e.target.value, index) | ||
| } | ||
| /> | ||
| {index === 0 && fileUpload.error && ( | ||
| <p className="mt-2 text-sm text-red-600"> | ||
| {fileUpload.error} | ||
| </p> | ||
| )} | ||
| </div> | ||
| </div> | ||
| )) | ||
| )} | ||
| </div> | ||
| {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> | ||
| </div> | ||
| )} |
There was a problem hiding this comment.
Add validation for image files when PDF combination is enabled.
The UI correctly handles the PDF combination mode, but there's no validation to ensure only image files are selected when combining to PDF.
{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)}
+ onCheckedChange={(checked: boolean) => {
+ const allImages = fileUpload.files.every(file =>
+ /\.(jpg|jpeg|png|gif|bmp|tiff)$/i.test(file.name)
+ );
+ if (checked && !allImages) {
+ fileUpload.setError(t("only_images_allowed_for_pdf"));
+ return;
+ }
+ setIsPdf(checked);
+ }}
disabled={fileUpload.uploading}
className="cursor-pointer"
/>📝 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.
| {isPdf ? ( | |
| <> | |
| <div className="space-y-2"> | |
| <ul className="list-disc list-inside space-y-1"> | |
| {fileUpload.files.map((file, index) => ( | |
| <li key={index} className="truncate"> | |
| {file.name} | |
| </li> | |
| ))} | |
| </ul> | |
| </div> | |
| <div> | |
| <Label | |
| htmlFor={`upload-file-name-${index}`} | |
| className="text-sm font-medium text-gray-700" | |
| htmlFor="upload-file-name-0" | |
| className="block text-sm font-medium text-gray-700" | |
| > | |
| {t("enter_file_name")} | |
| {t("enter_combined_file_name")} | |
| </Label> | |
| <Input | |
| name={`file_name_${index}`} | |
| name="combined_file_name" | |
| type="text" | |
| id={`upload-file-name-${index}`} | |
| id="combined-file-name" | |
| required | |
| className={ | |
| index === 0 && fileUpload.error | |
| ? "border-red-500 focus:ring-red-500" | |
| : "border-gray-300 focus:ring-primary" | |
| } | |
| value={fileUpload.fileNames[index] || ""} | |
| value={fileUpload.fileNames[0] || ""} | |
| disabled={fileUpload.uploading} | |
| onChange={(e) => | |
| fileUpload.setFileName(e.target.value, index) | |
| } | |
| onChange={(e) => fileUpload.setFileName(e.target.value)} | |
| /> | |
| {index === 0 && fileUpload.error && ( | |
| <p className="mt-1 text-sm text-red-500"> | |
| {fileUpload.error && ( | |
| <p className="mt-2 text-sm text-red-600"> | |
| {fileUpload.error} | |
| </p> | |
| )} | |
| </div> | |
| </div> | |
| ))} | |
| </> | |
| ) : ( | |
| fileUpload.files.map((file, index) => ( | |
| <div key={index} className="space-y-2"> | |
| <div className="flex items-center justify-between gap-2 rounded-md bg-secondary-300 px-4 py-2"> | |
| <span className="flex items-center truncate"> | |
| <CareIcon icon="l-paperclip" className="mr-2 shrink-0" /> | |
| <span className="truncate">{file.name}</span> | |
| </span> | |
| <Button | |
| variant="ghost" | |
| size="icon" | |
| onClick={() => fileUpload.removeFile(index)} | |
| disabled={fileUpload.uploading} | |
| > | |
| <CareIcon icon="l-times" /> | |
| </Button> | |
| </div> | |
| <div> | |
| <Label | |
| htmlFor={`upload-file-name-${index}`} | |
| className="block text-sm font-medium text-gray-700" | |
| > | |
| {t("enter_file_name")} | |
| </Label> | |
| <Input | |
| name={`file_name_${index}`} | |
| type="text" | |
| id={`upload-file-name-${index}`} | |
| required | |
| value={fileUpload.fileNames[index] || ""} | |
| disabled={fileUpload.uploading} | |
| onChange={(e) => | |
| fileUpload.setFileName(e.target.value, index) | |
| } | |
| /> | |
| {index === 0 && fileUpload.error && ( | |
| <p className="mt-2 text-sm text-red-600"> | |
| {fileUpload.error} | |
| </p> | |
| )} | |
| </div> | |
| </div> | |
| )) | |
| )} | |
| </div> | |
| {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> | |
| </div> | |
| )} | |
| {isPdf ? ( | |
| <> | |
| <div className="space-y-2"> | |
| <ul className="list-disc list-inside space-y-1"> | |
| {fileUpload.files.map((file, index) => ( | |
| <li key={index} className="truncate"> | |
| {file.name} | |
| </li> | |
| ))} | |
| </ul> | |
| </div> | |
| <div> | |
| <Label | |
| htmlFor="upload-file-name-0" | |
| className="block text-sm font-medium text-gray-700" | |
| > | |
| {t("enter_combined_file_name")} | |
| </Label> | |
| <Input | |
| name="combined_file_name" | |
| type="text" | |
| id="combined-file-name" | |
| required | |
| value={fileUpload.fileNames[0] || ""} | |
| disabled={fileUpload.uploading} | |
| onChange={(e) => fileUpload.setFileName(e.target.value)} | |
| /> | |
| {fileUpload.error && ( | |
| <p className="mt-2 text-sm text-red-600"> | |
| {fileUpload.error} | |
| </p> | |
| )} | |
| </div> | |
| </> | |
| ) : ( | |
| fileUpload.files.map((file, index) => ( | |
| <div key={index} className="space-y-2"> | |
| <div className="flex items-center justify-between gap-2 rounded-md bg-secondary-300 px-4 py-2"> | |
| <span className="flex items-center truncate"> | |
| <CareIcon icon="l-paperclip" className="mr-2 shrink-0" /> | |
| <span className="truncate">{file.name}</span> | |
| </span> | |
| <Button | |
| variant="ghost" | |
| size="icon" | |
| onClick={() => fileUpload.removeFile(index)} | |
| disabled={fileUpload.uploading} | |
| > | |
| <CareIcon icon="l-times" /> | |
| </Button> | |
| </div> | |
| <div> | |
| <Label | |
| htmlFor={`upload-file-name-${index}`} | |
| className="block text-sm font-medium text-gray-700" | |
| > | |
| {t("enter_file_name")} | |
| </Label> | |
| <Input | |
| name={`file_name_${index}`} | |
| type="text" | |
| id={`upload-file-name-${index}`} | |
| required | |
| value={fileUpload.fileNames[index] || ""} | |
| disabled={fileUpload.uploading} | |
| onChange={(e) => | |
| fileUpload.setFileName(e.target.value, index) | |
| } | |
| /> | |
| {index === 0 && fileUpload.error && ( | |
| <p className="mt-2 text-sm text-red-600"> | |
| {fileUpload.error} | |
| </p> | |
| )} | |
| </div> | |
| </div> | |
| )) | |
| )} | |
| </div> | |
| {fileUpload.files.length > 1 && ( | |
| <div className="flex items-center gap-2 mt-4"> | |
| <Checkbox | |
| id="file_upload_patient" | |
| checked={isPdf} | |
| onCheckedChange={(checked: boolean) => { | |
| const allImages = fileUpload.files.every(file => | |
| /\.(jpg|jpeg|png|gif|bmp|tiff)$/i.test(file.name) | |
| ); | |
| if (checked && !allImages) { | |
| fileUpload.setError(t("only_images_allowed_for_pdf")); | |
| return; | |
| } | |
| setIsPdf(checked); | |
| }} | |
| disabled={fileUpload.uploading} | |
| className="cursor-pointer" | |
| /> | |
| <Label htmlFor="file_upload_patient" className="cursor-pointer"> | |
| {t("combine_files_pdf")} | |
| </Label> | |
| </div> | |
| )} |
…o issues/7417/File-upload-enhancement
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (2)
src/hooks/useFileUpload.tsx (2)
103-135: 🛠️ Refactor suggestion
⚠️ Potential issueAdd essential safeguards to PDF generation.
The PDF generation needs additional safeguards:
- Validate file types before starting PDF generation
- Add size limit checks for multiple files
- Handle memory constraints
Additionally, the caught error in the catch block is unused. Add proper error logging.
} catch (error) { + console.error('PDF generation failed:', error); toast.error(t("file_error__generate_pdf")); setError(t("file_error__generate_pdf")); setProgress(0); return null; }🧰 Tools
🪛 eslint
[error] 129-129: 'error' is defined but never used. Allowed unused caught errors must match /^_/u.
(@typescript-eslint/no-unused-vars)
🪛 GitHub Actions: Deploy Care Fe
[error] 129-129: 'error' is defined but never used. Allowed unused caught errors must match /^_/u
295-304: 🛠️ Refactor suggestionRevise the 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.
🧹 Nitpick comments (1)
src/hooks/useFileUpload.tsx (1)
55-58: Follow TypeScript naming conventions.The parameter
CombineToPDFshould be in camelCase as per TypeScript naming conventions.handleFileUpload: ( associating_id: string, - CombineToPDF?: boolean, + combineToPdf?: boolean, ) => Promise<void>;
📜 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)
package.json(1 hunks)src/hooks/useFileUpload.tsx(4 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- package.json
🧰 Additional context used
🪛 eslint
src/hooks/useFileUpload.tsx
[error] 129-129: 'error' is defined but never used. Allowed unused caught errors must match /^_/u.
(@typescript-eslint/no-unused-vars)
🪛 GitHub Actions: Deploy Care Fe
src/hooks/useFileUpload.tsx
[error] 129-129: 'error' is defined but never used. Allowed unused caught errors must match /^_/u
🔇 Additional comments (2)
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.
116-116: Improve PDF image layout.The hard-coded dimensions (10, 10, 190, 0) don't account for image aspect ratios and may result in distorted images.
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (3)
src/hooks/useFileUpload.tsx (3)
4-4:⚠️ Potential issueAdd jspdf to build configuration.
The jspdf import needs to be added to build.rollupOptions.external to resolve pipeline failures.
103-135: 🛠️ Refactor suggestionEnhance PDF generation with essential safeguards.
The PDF generation needs several improvements for robustness:
- Validate file types upfront before starting the process
- Add size limit checks for multiple files
- Calculate image dimensions based on aspect ratio
- Improve memory management
Additionally, the caught error variable should follow the naming convention:
- } catch (error_) { + } catch (_error) {🧰 Tools
🪛 eslint
[error] 129-129: 'error_' is defined but never used. Allowed unused caught errors must match /^_/u.
(@typescript-eslint/no-unused-vars)
🪛 GitHub Actions: Deploy Care Fe
[error] 129-129: 'error_' is defined but never used. Allowed unused caught errors must match /^_/u
286-304: 🛠️ Refactor suggestionRevise the PDF generation workflow.
Several issues with the current implementation:
- As per previous discussions, combining any multi-uploads is not the desired behavior
- Clearing all files on PDF generation failure is too aggressive
- Missing progress indication during PDF generation
Additionally, maintain naming consistency:
const handleUpload = async ( associating_id: string, - CombineToPDF?: boolean, + combineToPdf?: boolean, ) => {
🧹 Nitpick comments (1)
src/hooks/useFileUpload.tsx (1)
55-58: Follow TypeScript naming conventions.The parameter
CombineToPDFshould follow camelCase naming convention.handleFileUpload: ( associating_id: string, - CombineToPDF?: boolean, + combineToPdf?: boolean, ) => Promise<void>;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/hooks/useFileUpload.tsx(4 hunks)
🧰 Additional context used
🪛 eslint
src/hooks/useFileUpload.tsx
[error] 129-129: 'error_' is defined but never used. Allowed unused caught errors must match /^_/u.
(@typescript-eslint/no-unused-vars)
🪛 GitHub Actions: Deploy Care Fe
src/hooks/useFileUpload.tsx
[error] 129-129: 'error_' is defined but never used. Allowed unused caught errors must match /^_/u
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/hooks/useFileUpload.tsx (1)
55-58: Use consistent camelCase naming.The parameter
CombineToPDFshould follow JavaScript/TypeScript naming conventions and be renamed tocombineToPdf.handleFileUpload: ( associating_id: string, - CombineToPDF?: boolean, + combineToPdf?: boolean, ) => Promise<void>;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/hooks/useFileUpload.tsx(4 hunks)
🔇 Additional comments (3)
src/hooks/useFileUpload.tsx (3)
4-4: Add jspdf to build configuration.The jspdf import is causing pipeline failures. Add it to build.rollupOptions.external.
295-304: 🛠️ Refactor suggestionImprove error handling and state management.
The current implementation has several issues:
- Clearing all files on PDF generation failure is too aggressive
- Direct array mutation with splice should be avoided
- Missing progress indication during PDF generation
Apply this enhancement:
- if (CombineToPDF && files.length > 1) { + if (combineToPdf && files.length > 1) { + setProgress(-1); // Indeterminate progress during PDF generation const pdfFile = await generatePDF(files); + setProgress(0); if (pdfFile) { - files.splice(0, files.length, pdfFile); + setFiles([pdfFile]); + setUploadFileNames(['combined.pdf']); } else { - clearFiles(); setError(t("file_error__generate_pdf")); return; } }Likely invalid or redundant comment.
103-135: 🛠️ Refactor suggestionImprove PDF generation robustness and performance.
Several improvements needed:
- Validate file types upfront before starting the PDF generation
- Add proper memory management
- Respect image aspect ratios
- Add size limit checks
Apply this enhancement:
const generatePDF = async (files: File[]): Promise<File | null> => { try { + const totalSize = files.reduce((sum, file) => sum + file.size, 0); + const MAX_TOTAL_SIZE = 50 * 1024 * 1024; // 50MB + if (totalSize > MAX_TOTAL_SIZE) { + toast.error(t("file_error__total_size")); + setError(t("file_error__total_size")); + return null; + } + + if (!files.every(file => file.type.startsWith("image/"))) { + toast.error(t("file_error__file_type")); + setError(t("file_error__file_type")); + return null; + } + toast.info(t("file_conversion_in_progress")); const pdf = new jsPDF(); const totalFiles = files.length; + const urls: string[] = []; for (const [index, file] of files.entries()) { - if (!file.type.startsWith("image/")) { - toast.error(t("file_error__file_type")); - setProgress(0); - return null; - } const imgData = URL.createObjectURL(file); - pdf.addImage(imgData, "JPEG", 10, 10, 190, 0); - URL.revokeObjectURL(imgData); + urls.push(imgData); + + // Load image to calculate dimensions + const img = new Image(); + await new Promise((resolve, reject) => { + img.onload = resolve; + img.onerror = reject; + img.src = imgData; + }); + + const aspectRatio = img.height / img.width; + const pageWidth = pdf.internal.pageSize.getWidth() - 20; // 10px margin + const pageHeight = pageWidth * aspectRatio; + + pdf.addImage(imgData, "JPEG", 10, 10, pageWidth, pageHeight); 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; } finally { + // Clean up URLs + urls.forEach(URL.revokeObjectURL); } };Likely invalid or redundant comment.
src/hooks/useFileUpload.tsx
Outdated
| const handleUpload = async ( | ||
| associating_id: string, | ||
| CombineToPDF?: boolean, | ||
| ) => { | ||
| if (!validateFileUpload()) return; | ||
|
|
||
| setProgress(0); | ||
| const errors: File[] = []; | ||
|
|
||
| if (CombineToPDF && files.length > 1) { | ||
| const pdfFile = await generatePDF(files); | ||
| if (pdfFile) { | ||
| files.splice(0, files.length, pdfFile); | ||
| } else { | ||
| clearFiles(); | ||
| setError(t("file_error__generate_pdf")); | ||
| return; | ||
| } | ||
| } |
There was a problem hiding this comment.
💡 Codebase verification
PDF combination needs explicit user control
The verification confirms that the current implementation only uses a boolean parameter without any dedicated UI controls for users to explicitly choose PDF combination. This validates the original concern about automatic PDF generation.
- In
src/hooks/useFileUpload.tsx, add UI controls (checkbox/toggle) to let users explicitly opt-in for PDF combination - Update the component's interface to expose this user preference
- Consider adding a clear label explaining the PDF combination feature to users
🔗 Analysis chain
Verify the PDF generation approach.
As per previous discussions, automatically combining any multi-uploads into PDF wasn't the desired behavior. Instead, consider adding a specific UI option (like a checkbox) to trigger PDF generation only when explicitly requested by the user.
Run this script to check the current UI implementation:
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check how the PDF generation option is presented in the UI
echo "Searching for PDF-related UI components..."
rg -A 10 "CombineToPDF|combineToPdf" --type tsx
Length of output: 172
Script:
#!/bin/bash
# Search for PDF-related UI components and their usage
echo "Searching for PDF-related UI components in TypeScript/React files..."
rg -t ts -t tsx -t js -t jsx -A 10 "CombineToPDF|combineToPdf|combinePdf"
# Also search for any PDF-related UI elements like checkboxes or toggles
echo -e "\nSearching for PDF-related UI elements..."
rg -t ts -t tsx -t js -t jsx "PDF.*(?:checkbox|toggle|switch|radio|select)" -A 5
Length of output: 458
Script:
#!/bin/bash
# Find TypeScript/React files and search for PDF-related code
echo "Searching for PDF-related components..."
fd -e ts -e tsx -e js -e jsx | xargs grep -l -i "combinetopdf\|pdf.*checkbox\|pdf.*toggle\|pdf.*switch" || true
# Show the content of files that contain matches
echo -e "\nShowing content of matching files:"
fd -e ts -e tsx -e js -e jsx | xargs grep -A 5 -B 5 -i "combinetopdf\|pdf.*checkbox\|pdf.*toggle\|pdf.*switch" || true
Length of output: 1956
|
@Jacobjeevan Can you check the latest changes and let me know if theres anything more to add. |
…o issues/7417/File-upload-enhancement
|
@Jacobjeevan Done with the latest changes |
| <div className="space-y-2"> | ||
| <ul className="list-disc list-inside space-y-1"> |
There was a problem hiding this comment.
Add the paperclip + background to maintain consistent behavior. Do a self-review, check against existing behavior:
| const handleDialogClose = (open: boolean) => { | ||
| if (!open) { | ||
| setIsPdf(false); | ||
| fileUpload.clearFiles(); |
There was a problem hiding this comment.
This whole block is unnecessary. Clearing files is already handled in parent component.
There was a problem hiding this comment.
I need to include setIsPdf(false) there because of this scenario:
If a user enables the checkbox to combine files into a PDF and then closes the dialog box, the isPdf state will remain true. When the user reopens the dialog, the checkbox will still be enabled, which isn’t an issue since they can manually disable it if needed.
However, if the user later selects only a single file and reopens the dialog, the checkbox won't be displayed (because it only appears for multiple files). In this case, the isPdf state will still be true, and the single file will be processed as a PDF due to the leftover state. This would create confusion, as the user has no way to disable the "combine to PDF" behavior in this situation.
Let me know if there is a workaround . I will remove the Clearing files part anyway.
|
Also you don't need to tag me and request for review; either one is enough. At this point, I'll get email updates to this thread regardless. |
Proposed Changes
@ohcnetwork/care-fe-code-reviewers
Summary by CodeRabbit
New Features
Dependencies
jspdflibrary for PDF creation.input-otplibrary version.