PWA 檔案系統存取實作 運用 API 讀取與寫入本機文件以強化編輯器功能

var fileInput = document.getElementById("fileInput");

fileInput.addEventListener("change", function (e) {
  var file = fileInput.files[0];
  var textType = /text.*/;

  if (file.type.match(textType)) {
    var reader = new FileReader();

    reader.onload = function (e) {
      maindata.gridData = [];
      var objText = JSON.parse(reader.result.toString());
      objText.gridData.forEach(function (element, index) {
        maindata.gridData.push(element);
      });
      console.log(objText);
    };

    reader.readAsText(file);
  } else {
    fileDisplayArea.innerText = "File not supported!";
  }
});

let fileHandle;
butOpenFile.addEventListener("click", async () => {
  [fileHandle] = await window.showOpenFilePicker({
    // 可以提供預設開啟位置
    startIn: "pictures",
  });
  const file = await fileHandle.getFile();
  const contents = await file.text();
  textArea.value = contents;
});

function saveFile(text) {
  var url = null;
  var data = new Blob([text], {
    type: "text/plain;",
  });
  // 如果正在替換先前生成的檔案，需手動撤銷 URL 以避免記憶體洩漏
  if (url !== null) {
    window.URL.revokeObjectURL(url);
  }

  url = window.URL.createObjectURL(data);

  var link = document.getElementById("exportText");
  link.href = url;
  var filename = window.prompt("輸入檔名") || "export";
  link.download = filename + ".txt";
  link.click();
}

const fileHandle = await self.showSaveFilePicker({
  suggestedName: "Untitled Text.txt",
  types: [
    {
      description: "Text documents",
      accept: {
        "text/plain": [".txt"],
      },
    },
  ],
});

async function writeFile(fileHandle, contents) {
  // 建立一個 FileSystemWritableFileStream 以供寫入
  const writable = await fileHandle.createWritable();
  // 將內容寫入資料流
  await writable.write(contents);
  // 關閉資料流並將內容寫入磁碟
  await writable.close();
}

// 刪除檔案
await directoryHandle.removeEntry("Abandoned Projects.txt");
// 刪除資料夾所有內容，包含子目錄
await directoryHandle.removeEntry("Old Stuff", { recursive: true });

const dirHandle = await window.showDirectoryPicker();
for await (const entry of dirHandle.values()) {
  console.log(entry.kind, entry.name);
}

async function verifyPermission(fileHandle, readWrite) {
  const options = {};
  if (readWrite) {
    options.mode = "readwrite";
  }
  // 檢查是否已獲得同意
  if ((await fileHandle.queryPermission(options)) === "granted") {
    return true;
  }
  // 若未獲得同意，主動發起權限請求
  if ((await fileHandle.requestPermission(options)) === "granted") {
    return true;
  }
  // 被使用者拒絕
  return false;
}