local fileを取得する。(javascript)

drag & drop や input type=fileなどでブラウザからファイルを扱えますが、file指定をコードから行いたかったので覚書きです。

fetch APIを利用するのが洗練されてて書きやすいのでお勧めです。

drag & drop

ondragoverでpreventDefault()する必要あり。関係なさそうなのに影響します。

const fileReader = new FileReader();
fileReader.onload = (e) => doSomething(e);
const dom = document.getElementById('hoge');

dom.ondragover = e => {
    e.preventDefault();
};

dom.ondrop = e => {
    const files = e.dataTransfer.files;
    fileReader.readAsText(files[0], 'utf-8');
};

function doSomething(e) {
    const lineArr = e.target.result.split('\n');
    ...
}

XMLHttpRequest

オーソドックスなやり方？きっと昔はこう書いてたはず。

const fileReader = new FileReader();
fileReader.onload = (e) => doSomething(e);
const url = `file://C:\test\test.csv`;

function getFileFromUrl(filePathOrUrl) {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', filePathOrUrl);
    xhr.responseType = 'blob';
    xhr.addEventListener('load', () => {
        fileReader.readAsText(xhr.response, 'utf-8');
    });
    xhr.send();
}

getFileFromUrl(url);

fetch API

新しいやり方。イメージ的にはjQueryの$.ajax。
IEでは一切機能しないので注意が必要。

const fileReader = new FileReader();
fileReader.onload = (e) => doSomething(e);
const url = `file://C:\test\test.csv`;

fetch(url)
    .then(response => response.blob())
    .then(data => fileReader.readAsText(data, 'utf-8'));

responseには以下のメソッドが利用できる。