ブラウザ上でファイル操作を行う

function InputFile() {
    const [file, setFile] = useState<file null>(null);
    const handleChange = (e: React.ChangeEvent<htmlinputelement>) => {
    const file = e.target.files?.[0];
    if (!file) return;
    setFile(file);
  };
    return <input onchange="{handleChange}" type="file">
}
</htmlinputelement></file>

export function PickerFS() {
    const [file, setFile] = useState<file null>(null);
    const handleChooseFile = async () => {
    const fileHandles = await window.showOpenFilePicker();
    const file = await fileHandles[0].getFile();
    setFile(file);
  };
  return <button onclick="{handleChooseFile}">Click</button>
}
</file>

export function PickerFS() {
    const handleChooseFile = async () => {
    const directoryHandle = await window.showDirectoryPicker();
    const keys = directoryHandle.keys();
    // 打印该目录下所有文件的名字
    for await (const key of keys) {
      console.log(key);
    }
  };
  return <button onclick="{handleChooseFile}">Click</button>
}

export function PickerFS() {
    const [file, setFile] = useState<file null>(null);
    const handleDownloadFile= async () => {
    const opts = {
      suggestedName: "test.txt",
      types: [
        {
          description: "Text file",
          accept: { "text/plain": [".txt"] },
        },
      ],
    };

    const fileHandle = await window.showSaveFilePicker(opts);
    const writable = await fileHandle.createWritable();
    await writable.write("Hello, world!");
    await writable.close();
  };
  return <button onclick="{handleDownloadFile}">Click</button>
}
</file>

export function OpFs() {
  const handleChooseFile = async (event: React.ChangeEvent<htmlinputelement>) => {
    const fileList = event.target.files;
    const file = fileList && fileList[0];
    if (!file) return;

    const opfsRoot = await navigator.storage.getDi rectory();
    const fileHandle = await opfsRoot.getFileHandle(file.name, { create: true });
    const writable = await fileHandle.createWritable();
    await writable.write(file);
    await writable.close();
  };

  return <inputfile onchange="{handleChooseFile}"></inputfile>;
}
</htmlinputelement>