Skip to content

[PB-6529]:feat/adding .txt files previewable view#2005

Open
jaaaaavier wants to merge 11 commits into
masterfrom
feat/txt-files-viewer
Open

[PB-6529]:feat/adding .txt files previewable view#2005
jaaaaavier wants to merge 11 commits into
masterfrom
feat/txt-files-viewer

Conversation

@jaaaaavier

@jaaaaavier jaaaaavier commented Jun 23, 2026

Copy link
Copy Markdown
Contributor

Description

This PR adds preview functionality for .txt files that users may have; the requirements are that the text be rendered and be readable. There are also requests for features such as support for large files: up to ~5–10 MB (lazy load beyond that). This is being addressed; we will load in 2MB increments, and when there are 300px left to reach the end, I have tried to use something similar to how it’s done in the XLSX preview.

Related Issues

Related Pull Requests

Checklist

  • Changes have been tested locally.
  • Unit tests have been written or updated as necessary.
  • The code adheres to the repository's coding standards.
  • Relevant documentation has been added or updated.
  • No new warnings or errors have been introduced.
  • SonarCloud issues have been reviewed and addressed.
  • QA Passed

Testing Process

I uploaded a small file and checked that it renders correctly; I also uploaded a 60MB text file and verified that it renders correctly, the load times are fine.
Captura de pantalla 2026-06-23 a las 10 58 56

Additional Notes

@jaaaaavier jaaaaavier self-assigned this Jun 23, 2026
@jaaaaavier jaaaaavier added the enhancement New feature or request label Jun 23, 2026
@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Jun 23, 2026

Copy link
Copy Markdown

Deploying drive-web with  Cloudflare Pages  Cloudflare Pages

Latest commit: 694b49a
Status: ✅  Deploy successful!
Preview URL: https://839c3ae0.drive-web.pages.dev
Branch Preview URL: https://feat-txt-files-viewer.drive-web.pages.dev

View logs

@jaaaaavier jaaaaavier marked this pull request as ready for review June 23, 2026 09:52
@jaaaaavier jaaaaavier marked this pull request as draft June 23, 2026 09:52
@jaaaaavier jaaaaavier marked this pull request as ready for review June 23, 2026 10:11
@jaaaaavier jaaaaavier requested a review from xabg2 June 23, 2026 12:26
Comment on lines +44 to +50
const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {
if (!hasMore || loadingRef.current) return;
const { scrollTop, clientHeight, scrollHeight } = event.currentTarget;
if (scrollTop + clientHeight >= scrollHeight - SCROLL_THRESHOLD_PX) {
readChunk(offset);
}
};

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What about using the IntersectionObserver instead?
Something like:

useEffect(() => {
    const sentinel = sentinelRef.current;
    if (!sentinel) return;
    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting) readChunk();
      },
      { rootMargin: '300px' },
    );
    observer.observe(sentinel);
    return () => observer.disconnect();
  }, [readChunk]);

And then adding a <div ref={sentinelRef} />

I did not test the code but, maybe it can work and is cleaner, WDYT?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, that's a better idea to be honest, I didn't remember about IntersectionObserver. Change applied.

@jaaaaavier jaaaaavier requested a review from xabg2 June 25, 2026 08:52
xabg2
xabg2 previously approved these changes Jun 25, 2026
@jaaaaavier jaaaaavier requested a review from xabg2 June 26, 2026 05:56
xabg2
xabg2 previously approved these changes Jun 26, 2026
@jaaaaavier

Copy link
Copy Markdown
Contributor Author

We updated the bg-color of the viewer for a correct vision in dark mode

@sonarqubecloud

Copy link
Copy Markdown

@jaaaaavier jaaaaavier requested a review from xabg2 June 29, 2026 13:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants