fix: allow viewing text files > 100kB

closes #35

src/components/common/messaging/attachments/TextFile.tsx

@@ -2,6 +2,7 @@ import axios from "axios";
 import { API } from "revolt.js";
 
 import styles from "./Attachment.module.scss";
+import { Text } from "preact-i18n";
 import { useContext, useEffect, useState } from "preact/hooks";
 
 import RequiresOnline from "../../../../context/revoltjs/RequiresOnline";
@@ -11,6 +12,7 @@ import {
 } from "../../../../context/revoltjs/RevoltClient";
 
 import Preloader from "../../../ui/Preloader";
+import { Button } from "@revoltchat/ui";
 
 interface Props {
     attachment: API.File;
@@ -19,6 +21,7 @@ interface Props {
 const fileCache: { [key: string]: string } = {};
 
 export default function TextFile({ attachment }: Props) {
+    const [gated, setGated] = useState(attachment.size > 100_000);
     const [content, setContent] = useState<undefined | string>(undefined);
     const [loading, setLoading] = useState(false);
     const status = useContext(StatusContext);
@@ -29,13 +32,7 @@ export default function TextFile({ attachment }: Props) {
     useEffect(() => {
         if (typeof content !== "undefined") return;
         if (loading) return;
-
-        if (attachment.size > 100_000) {
-            setContent(
-                "This file is > 100 KB, for your sake I did not load it.\nSee tracking issue here for previews: https://github.com/revoltchat/revite/issues/35",
-            );
-            return;
-        }
+        if (gated) return;
 
         setLoading(true);
 
@@ -60,13 +57,17 @@ export default function TextFile({ attachment }: Props) {
                     setLoading(false);
                 });
         }
-    }, [content, loading, status, attachment._id, attachment.size, url]);
+    }, [content, loading, gated, status, attachment._id, attachment.size, url]);
 
     return (
         <div
             className={styles.textContent}
             data-loading={typeof content === "undefined"}>
-            {content ? (
+            {gated ? (
+                <Button palette="accent" onClick={() => setGated(false)}>
+                    <Text id="app.main.channel.misc.load_file" />
+                </Button>
+            ) : content ? (
                 <pre>
                     <code>{content}</code>
                 </pre>