FileReaderのreadAsTextでパラメータがBlobではありませんと表示される

Question

htmlでFileReaderのreadAsTextを使いたいのですが、ファイルパスを渡して実行するとBlobではありませんと言われます。

  let fileReader = new FileReader();
  let data = fileReader.readAsText(path); //pathにはファイルまでの相対パスが入っています

Failed to execute 'readAsText' on 'FileReader': parameter 1 is not of type 'Blob'.

FileReaderのリファレンスを読むと、fileオブジェクトかBlobオブジェクトと書いてあり、ほかのサイト様を見てもinput要素を使ったものしか見受けられませんでしたので、実際に何を渡せばいいのかがわからず困っています。
fileもBlobも結局何が入っているのかわかりませんでした。

ファイルなどはjsファイルに直接書きたいのですが、何か方法がありますでしょうか？

追記
ある自分用のツールを作成していて、そこでデータの整理や更新などといったことからCSVデータを扱いたいのです。

Answer 1

https://developer.mozilla.org/ja/docs/Web/API/File

File オブジェクトは通常、 <input> 要素を使用してファイルを選択した結果として返される FileList オブジェクト、ドラッグ＆ドロップ操作の DataTransfer オブジェクト、または HTMLCanvasElement 上の mozGetAsFile() API から取得します。

fileReaderがFileオブジェクトまたはBlobオブジェクトを要求するということは、jsファイルに書いたデータを扱うためのものではないということです。
なぜ「FileReaderのreadAsTextを使いたい」のか、そもそも何をしたいのかを整理されたほうが良いと思います。

Comments

[Shoto9023]

自分用に現在ツールを作っていて、アプリケーションで作れよって話なのですが、表示などの関係からhtmlで作りたいのです。そこでデータを扱うのに、後々のことを考えてCSVとしてローカルで保存し、利用したいと考えています。そのファイルをリードするためにFileReaderを利用したいと考えましたが、質問した通りの現状に当たっているところです。

何か他の方法や迂回策などがあればご教授いただけると幸いです

[gasbombe]

ローカルのHTMLを開いてスクリプトで自動的にローカルファイルを操作する、というのは昔私もやろうとしましたが、できないという結論に至り、諦めました。
これは、ブラウザやJavaScriptがWebアプリケーションにために作られていて、セキュリティ上ローカルファイルを操作できないようにしているからです。

１．input要素でファイルを選択すれば可能です。
２．Webサービスであれば、XHRでリクエストを投げてデータを取得します。
３．データ形式をJavaScriptの配列などにすれば、jsファイルとして読み込んで使用することができます。

[Shoto9023]

なるほど、やはりそうなのですね
ありがとうございます