feat: Add 'Documents' tab and file upload functionality#206
Open
SaravanakumarR2018 wants to merge 7 commits into
Open
feat: Add 'Documents' tab and file upload functionality#206SaravanakumarR2018 wants to merge 7 commits into
SaravanakumarR2018 wants to merge 7 commits into
Conversation
Adds a new 'Documents' tab to the main navigation. This new section includes a page allowing you to upload documents. Key changes: - Added 'Documents' link to `DashboardHeader` in `dashboard/layout.tsx`. - Created a new page component `documents/page.tsx` for file input and upload button. - Implemented `uploadDocument` API call in a new `documentServiceApiCalls.ts` file, using FormData for `multipart/form-data` requests. - Integrated the API call into the 'Documents' page with loading states and success/error messages.
Addresses an error "Only plain objects, and a few built-ins, can be passed to Server Actions" when uploading files. The `uploadDocument` function in `documentServiceApiCalls.ts` is a Server Action due to the 'use server' directive in the file. Passing a `File` object directly to it caused a serialization error. This fix modifies the client-side `documents/page.tsx` to: - Convert the selected file to an `ArrayBuffer`. - Pass the `ArrayBuffer`, filename, and filetype to the `uploadDocument` Server Action. The `uploadDocument` Server Action in `documentServiceApiCalls.ts` is updated to: - Accept the `ArrayBuffer` and metadata. - Reconstruct a `Blob` from this data. - Append the `Blob` to `FormData` to be sent to the actual backend upload API.
This change addresses a persistent error "Only plain objects...can be passed to Server Actions" when uploading files. The previous attempt using ArrayBuffer was not sufficient. The client-side `documents/page.tsx` now: - Reads the selected file as a base64 encoded string. - Passes this string, along with filename and filetype, to the `uploadDocument` Server Action. The `uploadDocument` Server Action in `documentServiceApiCalls.ts` now: - Accepts the base64 string, filename, and filetype. - Converts the base64 string to a Node.js Buffer. - Creates a Blob from the Buffer and appends it to FormData with the filename. - Sends this FormData to the actual backend API. This ensures that only serializable primitive types are passed across the Server Action boundary.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Adds a new 'Documents' tab to the main navigation. This new section includes a page allowing you to upload documents.
Key changes:
DashboardHeaderindashboard/layout.tsx.documents/page.tsxfor file input and upload button.uploadDocumentAPI call in a newdocumentServiceApiCalls.tsfile, using FormData formultipart/form-datarequests.