Linkedin pdf support #755
Linkedin pdf support #755
Conversation
This reverts commit e070cf9.
|
@polylina is attempting to deploy a commit to the Listinai Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThe changes introduce support for PDF files across the frontend and backend. PDF uploads are now allowed, PDF thumbnails are generated and displayed in the UI, and backend validation and upload logic are updated to handle PDFs. A new utility for generating PDF thumbnails is added, and the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Frontend
participant Backend
participant PDFJS
User->>Frontend: Uploads PDF file
Frontend->>Backend: Sends PDF file
Backend->>Backend: Validates file (accepts PDF, max 10MB)
Backend-->>Frontend: Stores and returns media info
Frontend->>Frontend: Updates media list
Frontend->>PDFJS: Calls createPDFThumbnails()
PDFJS-->>Frontend: Generates thumbnail for PDF
Frontend-->>User: Displays PDF icon/thumbnail in media list
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
apps/frontend/next.config.jsOops! Something went wrong! :( ESLint: 8.57.0 Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@eslint/eslintrc' imported from /eslint.config.mjs apps/frontend/src/components/media/media.component.tsxOops! Something went wrong! :( ESLint: 8.57.0 Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@eslint/eslintrc' imported from /eslint.config.mjs libraries/nestjs-libraries/src/integrations/social/linkedin.provider.tsOops! Something went wrong! :( ESLint: 8.57.0 Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@eslint/eslintrc' imported from /eslint.config.mjs
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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 (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Nitpick comments (6)
libraries/helpers/src/utils/pdf-thumbnails.ts (4)
15-15: Use a more specific type instead ofanyfor the worker.Consider using the proper type from pdfjs-dist for better type safety.
- let worker: any = null; + let worker: pdfjsLib.PDFWorker | null = null;
27-29: Remove redundant pdfjsLib check.The
pdfjsLibcheck on line 27 is redundant since it's guaranteed to exist after the dynamic import on line 10.- if (!pdfjsLib) { - throw Error('pdf.js failed to load. Check data-pdfjs-src attribute.'); - }
31-34: Improve type safety for the forEach callback parameter.Replace the inline type annotation with a proper type definition.
- nodesArray.forEach(function (element: { - getAttribute: (arg0: string) => any; - src: string; - }) { + nodesArray.forEach(function (element: HTMLImageElement) {
9-91: Consider adding progress tracking and error callbacks.The function processes all PDFs asynchronously without providing feedback on progress or completion. Consider:
- Returning a Promise that resolves when all thumbnails are generated
- Adding optional callbacks for progress and error handling
- Implementing a queue system for better performance with many PDFs
Would you like me to provide an enhanced version with better error handling and progress tracking?
apps/frontend/src/components/media/media.component.tsx (1)
602-608: Add alt attribute to PDF preview image.The img element is missing the required alt attribute for accessibility.
<img className="w-full h-full object-cover" data-pdf-thumbnail-file={mediaDirectory.set( media?.path )} src="/icons/pdf.svg" + alt="PDF thumbnail" />libraries/nestjs-libraries/src/integrations/social/linkedin.provider.ts (1)
251-256: Consider using consistent Content-Type headers.While the current implementation works, consider using specific MIME types for all file types for consistency:
- Videos:
video/mp4instead ofapplication/octet-stream- Images: Add appropriate MIME type (e.g.,
image/jpeg)...(fileName.indexOf('mp4') > -1 - ? { 'Content-Type': 'application/octet-stream' } + ? { 'Content-Type': 'video/mp4' } : fileName.indexOf('pdf') > -1 ? { 'Content-Type': 'application/pdf' } - : {}), + : { 'Content-Type': lookup(fileName) || 'image/jpeg' }),
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
apps/frontend/public/icons/pdf.svgis excluded by!**/*.svgpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (8)
apps/frontend/next.config.js(1 hunks)apps/frontend/src/components/media/media.component.tsx(8 hunks)libraries/helpers/src/utils/pdf-thumbnails.ts(1 hunks)libraries/nestjs-libraries/src/integrations/social/linkedin.provider.ts(8 hunks)libraries/nestjs-libraries/src/integrations/social/social.integrations.interface.ts(2 hunks)libraries/nestjs-libraries/src/upload/custom.upload.validation.ts(2 hunks)libraries/react-shared-libraries/src/helpers/video.or.image.tsx(2 hunks)package.json(1 hunks)
🔇 Additional comments (11)
package.json (1)
163-163: LGTM!The addition of
pdfjs-distdependency is appropriate for implementing PDF thumbnail generation functionality.apps/frontend/next.config.js (1)
43-43: Verify if disabling SWC minification is necessary.Disabling minification could increase bundle sizes and impact performance. Was this change necessary to resolve specific compatibility issues with
pdfjs-distor other libraries?Consider re-enabling minification if the issues have been resolved or exploring alternative solutions like configuring specific exclusions.
libraries/nestjs-libraries/src/integrations/social/social.integrations.interface.ts (2)
68-68: Good syntax fix!Adding the semicolon improves code consistency.
106-106:❓ Verification inconclusive
Verify if the
nameproperty should be optional.The
nameproperty is added as a required field. Please verify that all existing code that createsMediaContentobjects has been updated to include this property, or consider making it optional (name?: string;) for backward compatibility.Run the following script to check for MediaContent usage:
🏁 Script executed:
#!/bin/bash # Description: Search for MediaContent usage to verify if the name property should be optional # Search for MediaContent object creation patterns rg -A 5 "MediaContent" --type ts --type tsx | grep -E "(type:|url:|path:)" -A 3Length of output: 107
🏁 Script executed:
#!/bin/bash # Search for all references to the MediaContent interface in TypeScript files rg -n "MediaContent" --glob "*.ts" --glob "*.tsx"Length of output: 655
🏁 Script executed:
#!/bin/bash # Display createSingleMediaContent implementation and its callers to check if `name` is populated TARGET="libraries/nestjs-libraries/src/integrations/social/threads.provider.ts" echo "=== createSingleMediaContent implementation ===" rg -n "createSingleMediaContent" -B5 -A20 "$TARGET" echo echo "=== Call site at line ~191 ===" sed -n '180,220p' "$TARGET" echo echo "=== Call site at line ~297 ===" sed -n '280,330p' "$TARGET"Length of output: 5352
🏁 Script executed:
#!/bin/bash # Display the MediaContent type definition and surrounding context FILE="libraries/nestjs-libraries/src/integrations/social/social.integrations.interface.ts" sed -n '80,140p' "$FILE"Length of output: 1532
🏁 Script executed:
#!/bin/bash # Search for classes implementing the SocialProvider interface rg -n "implements SocialProvider" --glob "*.ts"Length of output: 3020
Validate MediaContent.name Usage for Backward Compatibility
I didn’t find any internal instantiations of
MediaContentin this library—bothcreateSingleMediaContentandcreateCarouselContentonly consume theurlfield. SinceMediaContentis now defined as:export type MediaContent = { type: 'image' | 'video'; url: string; path: string; name: string; // ← newly required };please confirm one of the following:
- All external callers constructing
PostDetails.media: MediaContent[](in application code or other libraries) have been updated to supply thenameproperty.- Or, if you need to preserve backward compatibility, make
nameoptional:- name: string; + name?: string;Locations to review:
•libraries/nestjs-libraries/src/integrations/social/social.integrations.interface.ts(MediaContent definition)
• All consumer code that buildsPostDetails.mediaarrays.libraries/react-shared-libraries/src/helpers/video.or.image.tsx (1)
32-43: PDF rendering implementation looks good!The implementation correctly sets up the PDF element with appropriate data attributes for thumbnail generation and uses a PDF icon as a placeholder.
libraries/nestjs-libraries/src/upload/custom.upload.validation.ts (1)
24-27: Well-implemented PDF validation logic!The changes correctly add PDF support with appropriate MIME type checking and a reasonable 10MB file size limit. The implementation follows the existing pattern and maintains consistency.
Also applies to: 39-42
apps/frontend/src/components/media/media.component.tsx (1)
351-351: Correct implementation of PDF file type support!The addition of 'application/pdf' to the allowed file types is properly implemented.
Also applies to: 378-378
libraries/nestjs-libraries/src/integrations/social/linkedin.provider.ts (4)
202-207: LGTM! Clean implementation of dynamic API type determination.The logic correctly maps file extensions to LinkedIn API types (videos, documents, images).
341-352: LGTM! Correct handling of PDF files.The code correctly treats PDFs like videos by using raw buffers instead of image processing with sharp, which wouldn't work for PDF files.
263-284:✅ Verification successful
Verify if document uploads require finalization.
The finalization logic only runs for videos (line 263), but the URL was updated to support dynamic
apiType. Documents/PDFs won't go through this finalization step. Please verify if LinkedIn's API requires finalization for document uploads.
🌐 Web query:
Does LinkedIn API require finalization step for document uploads similar to video uploads?💡 Result:
Based on the search results, LinkedIn API handles document uploads differently than video uploads. With video uploads, there is a clear finalization step required, while document uploads follow a simpler two-step process.
For document uploads, the process involves:
- Initializing the upload by using the
initializeUploadaction, which registers the upload and provides an upload URL[1].- Uploading the document directly to the provided URL[1].
There is no explicit finalization step mentioned for document uploads in the documentation. Once you upload the document to the provided URL, you receive a 201 status code response indicating success[1].
In contrast, video uploads require a more complex process:
- Initializing the upload to register the video and get an upload URL[4][7].
- Uploading the video content (which may involve splitting large files into 4MB chunks for files over 200MB)[4][7].
- Explicitly finalizing the upload with a separate API call. This step is mandatory for videos, requiring a POST request to the
finalizeUploadaction with details like the video URN and uploaded part IDs[4].When creating posts with documents, you simply need to reference the Document URN (obtained after uploading) in your post creation request[2]. This is similar to how images and videos are referenced, but without the additional finalization step that videos require.
This difference likely exists because videos are more complex media types that may need additional processing after upload, such as transcoding or validation, before they can be used on the platform.
Citations:
- 1: https://learn.microsoft.com/en-us/linkedin/marketing/community-management/shares/documents-api?view=li-lms-2025-04
- 2: https://learn.microsoft.com/en-us/linkedin/marketing/community-management/shares/posts-api?view=li-lms-2025-05
- 3: https://dev.to/mayankcse/mastering-linkedin-api-step-by-step-guide-for-seamless-integration-124n
- 4: https://learn.microsoft.com/en-us/linkedin/marketing/community-management/shares/videos-api?view=li-lms-2024-11
- 5: https://www.youtube.com/watch?v=9AIMgTmosdg
- 6: https://www.youtube.com/watch?v=klGhFx0CTSo
- 7: https://learn.microsoft.com/en-us/linkedin/marketing/community-management/shares/vector-asset-api?view=li-lms-2025-01
- 8: https://docs.liveramp.com/connect/en/the-linkedin-offline-conversions-attribution-program.html
- 9: https://www.postman.com/linkedin-developer-apis/linkedin-marketing-solutions-versioned-apis/request/cct5pbv/initialize-video-upload
- 10: https://www.getphyllo.com/post/linkedin-api-to-get-profile-information
Document uploads don’t require a finalize step
Verified via LinkedIn’s docs:
- Documents use a two-step flow (initializeUpload → direct PUT to URL) and return 201 on success.
- There is no
finalizeUploadcall for documents.- Only video uploads mandate a separate
finalizeUploadPOST.The existing conditional block (lines 263–284) correctly applies finalization only to videos. No changes needed for document handling.
354-356:✅ Verification successful
Ensure the media object includes the
nameproperty.The code now expects
m.nameto exist on media objects. While the AI summary mentions interface updates, please verify that all media objects passed to this method include thenameproperty to prevent potential runtime errors.Also applies to: 398-399
🏁 Script executed:
#!/bin/bash # Description: Verify that the media interface includes the name property and check its usage # Search for the media interface definition ast-grep --pattern 'interface $_ { $$$ media?: $_ $$$ }' # Search for PostDetails interface that might contain media definition rg -A 10 "interface PostDetails" # Check where media objects are created/used rg -A 5 "\.media\?"Length of output: 16704
🏁 Script executed:
#!/bin/bash # Inspect LinkedIn provider file for media type and usage of m.name # Show file header to see imports and type definitions head -n 50 libraries/nestjs-libraries/src/integrations/social/linkedin.provider.ts # Show the section around the media processing logic (lines 300–430) sed -n '300,430p' libraries/nestjs-libraries/src/integrations/social/linkedin.provider.ts # Find any local type or interface declarations in this file rg -nE 'export (interface|type)' libraries/nestjs-libraries/src/integrations/social/linkedin.provider.ts # Search for postDetails usage to see where media items originate rg -n 'postDetails' -n libraries/nestjs-libraries/src/integrations/social/linkedin.provider.tsLength of output: 5889
🏁 Script executed:
#!/bin/bash # Locate the social integrations interface file find libraries/nestjs-libraries/src/integrations/social -type f -name "social.integrations.interface.ts" # Display PostDetails interface and its media property sed -n '1,200p' libraries/nestjs-libraries/src/integrations/social/social.integrations.interface.ts | sed -n '1,200p'Length of output: 3544
Confirmed:
MediaContentdefinesnameThe
MediaContenttype insocial.integrations.interface.tsalready includes a requiredname: stringfield. No further action is needed.
What kind of change does this PR introduce?
This PR adds support for uploading PDFs in Linkedin posts.
Why was this change needed?
The rationale can be found in this closed issue: #593. It allows posting whole presentations as parts of marketing stories.
Other information:
The change was not discussed, it was only requested by the company I work for. There are no plans on expanding it, as the client is happy with the result, but they thought that it would be a good idea to have this change in the official repository.
Checklist:
Put a "X" in the boxes below to indicate you have followed the checklist;
Summary by CodeRabbit
New Features
Bug Fixes
Chores
pdfjs-distlibrary as a dependency for PDF thumbnail generation.Style