JavaScriptでファイルの上書き保存をしたい

Question

HTML5のFileSystemAPIを使ってファイル上書き保存をしたいのですがイマイチ方法が分かりません。

//ファイルインポート
const loadFile = document.getElementById("loadFile");
loadFile.onclick = (cache): void => {
    console.log(cache);
}
loadFile.onchange = (e): void => {
    const file_data = e.target.files;
    const foo: string = file_data[0].name.split(".");
    const extension: string = foo[foo.length - 1];
    const file_info = document.getElementById("file_info");
    if (extension == "md") {
        left_input.innerText = "";
        left_input.value = null;
        file_info.innerText = file_data[0].name;
        popupImage();
        let reader = new FileReader();
        reader.onload = function (evt) {
            let txt: string = evt.target.result as string;
            txt = txt.replace(/(\n|\r)/g, '$%$%{Insert for new line}$%$%');
            const newLineStr = txt.split("$%$%{Insert for new line}$%$%");
            newLineStr.map(function (text) {
                left_input.insertAdjacentText("beforeend", text + "\n");
                marking(left_input.textContent);
            })
            left_input.value = left_input.textContent;
            wordCounting();//文字数をカウントして表示する
            saveEditContent();//LocalStorageに初期保存
            const today = new Date();
            const storage: {
                date: Date
                body: String
            } = {
                date: moment(today).format("MM/DD HH:mm"),
                body: left_input.textContent
            }
            localStorage.setItem(file_data[0].name + "&&&forLocalStoragebyMultiMD&&&", JSON.stringify(storage));
            if (historyButton.length >= 5) {
                const remove_key = `${historyButton[4].getAttribute("id")}&&&forLocalStoragebyMultiMD&&&`
                localStorage.removeItem(remove_key);
                document.getElementById(`${historyButton[4].getAttribute("id")}%&%content%&%`).remove();
            };
            if (!document.getElementById(file_data[0].name)) {
                history_content.insertAdjacentHTML("afterbegin", `<div id="${file_data[0].name}%&%content%&%"><button id=${file_data[0].name} class="history-button">${file_data[0].name}</button></div>`);
                document.getElementById(file_data[0].name).insertAdjacentHTML("afterend", `<p1 id="${file_data[0].name}%&%p1%&%">${moment(today).format("MM/DD HH:mm")}</p1>`);
            }
            buttonCheck();
        }
        reader.readAsText(file_data[0]);
    } else {
        window.alert(`${file_data[0].name} is not a markdown file`);
    }
}

このコードでファイルをインポートしてテキストエリアに反映したのですが、その後編集したテキストエリアの内容を同じパスのファイルに上書き保存したいです。ただ、PC内の絶対パスは取得できないらしくその他の方法を探しています。FileSystemAPI以外の方法でも構いません。よろしくお願いします。

Comments

[yambejp]

localStorageとかではなくローカルマシン上のファイルを
直に編集したいのでしょうか？
できるできないはおいておいて、web上から自分のマシンの重要な
ファイルを書き換えられてもいいのでしょうか？

[maisumakun]

saveEditContentの中身はどこでしょうか。

Answer 1

PC内の絶対パスは取得できないらしくその他の方法を探しています

明記されていませんが、稼働環境がブラウザであるなら、JavaScriptで動的にダウンロードする方法を検討してください。

実装方法は、過去に多くの回答があるようです。

teratail 検索 tag:javascript ダウンロード

Answer 2

Native File System APIというものがいちおうありますが、まだ「Chromeでオプション設定をしないと有効にならない」ようなものなので、不特定多数の利用者があるWebサイトで使うには早すぎます。

Comments

[maisumakun]

普通のFileReaderは読み込み専用です。