2017.1.29
2020.1.7

iOSやAndroidでのファイルのダウンロードやアップロード(ファイル選択)について

モバイル端末用OS(iOS、Android)で、ブラウザからファイルのダウンロードやアップロード(ファイル選択)をしようとしてちょっと躓きました。ダウンロードはdownload属性を使って、アップロード(ファイル選択)はinput type="file"を使ってファイル選択と同時にファイルを読み込んで内容を画面上に反映するもので、以下は、その時に確認したものになります。

Android

◆ダウンロード

とくに問題ありません。こちらの方法(入力した文字列や設定したデータなどの情報をJsonファイルとしてダウンロードする方法)で可能でした。

◆アップロード(ファイル選択)

input type="file"コントロールを使用してファイルを選択しようとした場合、Android7系では画像やPDFは選択できますが、その他のファイル(txtやjson)が選択できないようになっていました。ダウンロードフォルダに移動してもあるはずのファイルが表示されません。Android6系で確認するとこちらはちゃんと表示されます。

上記は標準での動作となります。アクセスするためには別途ファイルエクスプローラをインストールしないとダメなようです。

iOS

◆ダウンロード

download属性を使用した処理ではダウンロードされずに対象としたデータがブラウザで開かれてしまいます。出力されたデータを端末に保存する場合、ブラウザ上のデータをコピーしてファイルに貼り付ける必要がありますが、標準ではファイルの作成すらできません。

iOSでファイルの操作を行う場合、こちらのような(万能っぷりが素晴らしいアプリ「Documents 5」でできる10のこと | ライフハッカー[日本版])アプリを使うようです。

またChromeの場合はダウンロードが失敗するので、処理を分けて以下のようなコードを実行します。


// iOS Chrome版
var data = { "aaa":1, "bbb":2, "ccc":3 };
var reader = new FileReader();
var blob = new Blob([JSON.stringify(data)], {type: 'application/json'});
reader.onload = function(e){
    window.open(reader.result);
};
reader.readAsDataURL(blob);

◆アップロード(ファイル選択)

基本的には問題ありませんが、なぜかFileReaderを使ってファイルを読み込もうとした時にファイル名に全角文字が含まれていると失敗します。ファイルの読み込み方法についてはこちらの記事(ローカルに保存したJSONファイルのインポート)のようなコードでやっていますが、原因はわかりませんでした。

JavaScript】関連記事