Skip to main content

import-data

The functionality is available in PRO Edition only

PRO

Description​

Triggers import of MS Project XML data to Gantt

You need to handle file upload, read file contents as text and send the resulting string to the action

Usage​

"import-data": ({
  data: string,
}) => void;

Parameters​

  • string - (required) XML string from the uploaded XML file

Example​

import { useRef } from "react";
import { Gantt } from "@svar/react-gantt";

export default function ImportExample() {
  const apiRef = useRef<any>(null);

  function importMSProject() {
    const fileInput = document.getElementById("import-file") as HTMLInputElement | null;
    if (!fileInput || !fileInput.files || fileInput.files.length === 0) return;

    const file = fileInput.files[0];
    const reader = new FileReader();
    reader.onload = (e) => {
      const xml = e.target?.result as string;
      apiRef.current?.exec("import-data", {
        data: xml,
      });
    };
    reader.readAsText(file);
  }

  return (
    <>
      <input id="import-file" type="file" accept=".xml" />
      <button onClick={importMSProject}>Import MS Project XML</button>
      <Gantt ref={apiRef} />
    </>
  );
}

Related articles: