MonacaアプリでPDFファイルを選択・取得する

MonacaアプリでPDFを選択する実装を行うことになったのですが、良いCordovaプラグインが見つかりませんでした。
画像(JPG, PNG)を選択するプラグインはいくつかあるのですが、PDFは需要がないのでしょうか……

そこで、プラグインに頼らず、HTMLの <input type="file"> 要素を使用して実装しました。

<input type="file" id="select-file"></input>

HTML側にこのように書いたら、JavaScript側でファイルを選択した際のイベントをキャッチして処理を行わせるようにします。

document.getElementById("select-file").addEventListener("change", selectFile);
function selectFile() {
  var reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function () {
    console.log(reader.result);
  }
}

このようにすると、ファイル選択後、

data:application/pdf,xxxxxxxxxxxxxxxxxx...

という形でMIMEタイプとBase64化されたファイルデータが取れます。
,(コンマ)の後ろ以降がファイルデータですね。

後は、選択したファイルがPDFであるかどうかのバリデーションを実装します。
一番楽なのはinput要素のaccept属性を使うことです。

<input type="file" id="select-file" accept="application/pdf"></input>

が、機種によって効いていない場合がありましたので、簡易的ですがファイル名あるいはBase64エンコード後のMIMEタイプを見て判別します。

まず、ファイル名で見る場合。

var file = document.getElementById("select-file").files[0]
if (file.name.endsWith(".pdf") === false && file.name.endsWith(".PDF") === false) {
  alert("このファイルはPDFではありません。");
  document.getElementById("select_file").value = null;
  return;
}

拡張子がPDFであれば return します。

続いて、MIMEタイプを見る場合。

reader.onload = function () {
  var fileData = reader.result;
  if (fileData.indexOf("data:application/pdf") === -1) {
    alert("このファイルはPDFではありません。");
    document.getElementById("select-file").value = null;
    return;
  }
}

MIMEタイプが data:application/pdf でなければ return します。

本記事は以下のページを参考にしました。

https://www.cresco.co.jp/blog/entry/710/