jsファイルアップロードについて

Question

ドラッグ&ドロップでアップロードされたファイルのフルパスを取得しようと考えています。

let handleFileSelect = (e) => {
    // ブラウザ上でファイルを開かないようにしておく
    e.stopPropagation();
    e.preventDefault();
    let files = e.dataTransfer.files; 
    for (let file of files) {
        appendElement(file);
    }
}

//ここでデータを追加する
let appendElement = (file) => {
    if(!file.type.match(/^application/pdf$/)) {
        console.log('PDF形式以外読み込めません\n>> ' + file.name)
        return;
    }
    let reader = new FileReader()
    reader.onerror = function() {
        alert('リーダーを読み込めませんでした')
    }
    alert(reader.onload);
    reader.onload = function(e) {
        let el = document.createElement('li');
        el.textContent = e.target.result;
        $('#readFileList').appendChild(el);
    }
}

let $ = (id) => {
    return document.querySelector(id)
};

こちらが該当コードなのですが、ファイルが正常に読み込まれてもreader.onloadがnullのため、li要素が挿入できません。
どなたか解決方法を教えてください。

補足
バックエンドはexpressで構成されていますが、localhost上ではfileReaderが正常に動作しないなんてことはないですよね...?

Comments

[gentaro]

全体像のないコード断片なのでよくわかりませんけど

> ファイルが正常に読み込まれてもreader.onloadがnullのため、li要素が挿入できません。

このnullの確認って「alert(reader.onload);」の部分の話でしょうか。
だとしたらそのコードの直前でletで宣言してnewして、そのalert文の後に定義しているんだから、そりゃその箇所ではnullなんだろうな、とは思いますけど。

短く書くと
let r = new FireReader()
alert(r.onload)
とやってるのと変わんない。

Answer 1

ドラッグ&ドロップでアップロードされたファイルのフルパスを取得しようと考えています。

セキュリティ上、ファイル名以外のパスはfakepathのようなものに置き換えられ、取得できません。

（それとは関係ないですが、読み取るファイルをFileReaderに一切指定していないのも気になりました）

Answer 2

こちらが該当コードなのですが、ファイルが正常に読み込まれてもreader.onloadがnullのため、li要素が挿入できません。

nullの件は質問欄のコメントに書いたとおり。
そもそもよくわかんないのは、onloadイベントでli要素に何を追加しようとしているのか。

onloadはreadAsDataURL()とかの読み込み系メソッドを使ってファイルの読み込み操作をした際に発火されるイベントだけど、PDFの中身をli要素として出力しようとしてるんだろうか？

ファイル名を出したい、とかいう話なら、ドロップイベントのハンドラで取得した個々のファイルを見ればいいと思う。（コード上だとappendElementメソッドに渡してる引数のfileとか）

あとFileReaderオブジェクトはドロップされたファイルの数だけ生成されてるけど、一つで良いような。（この辺は好みだけど）

バックエンドはexpressで構成されていますが、localhost上ではfileReaderが正常に動作しないなんてことはないですよね...?

FileAPIの話なら、HTML5のAPIなんでバックエンドは関係ないし、そもそもexpressと関わる部分がコード上にないので無関係。

Comments

[niey]

liにはファイル名のみを表示して、さらにそれをクリックしたら該当のPDFを画面上に表示することを想定していました。FileReaderのインスタンスが複数生成されることについてはただの見落としでした。
PHPではフルパスを取得できていたんでできるかもと思ったのですが、確かにフロントでフルパスを取得できたらセキュリティ的にどうなんだと思いますね。ありがとうございます。もう少し調査してみます。