Function LoadFileButton

app/src/components/LoadFileButton.tsx:14–134

()

import { docToString } from "../lib/useDoc";

export function LoadFileButton() {
  const [open, setOpen] = useState(false);
  const [doc, setDoc] = useState("");
  const [chart, setChart] = useState<null | Awaited<
    ReturnType<typeof prepareChart>
  >>(null);
  const hasProAccess = useHasProAccess();

  return (
    <>
      <input
        type="file"
        accept=".txt"
        data-testid="load-file-input"
        className="sr-only"
        onChange={(event) => {
          const file = (event.target as HTMLInputElement).files?.[0];
          if (!file) return;
          const reader = new FileReader();
          reader.onload = async (event) => {
            const result = event.target?.result as string;
            try {
              prepareChart({
                doc: result,
                set: false,
                details: {
                  id: "",
                  title: "",
                  isHosted: false,
                },
              })
                .then((chart) => {
                  if (chart) {
                    // build a chart with a normal expiry date
                    const { text, details, ...rest } = chart;
                    const meta = { ...rest.meta, expires: getExpirationDate() };
                    const doc = docToString({ text, meta, details });
                    setChart(chart);
                    setDoc(doc);
                    setOpen(true);
                  } else {
                    setOpen(false);
                  }
                })
                .catch((error) => {
                  console.error(error);
                });
            } catch (error) {
              console.error(error);
            }
          };
          reader.readAsText(file);
        }}
      />
      <EditorActionTextButton
        icon={PiFolderOpenDuotone}
        data-testid="load-file-button"
        data-session-activity="Load File"