CodeZine(コードジン)

特集ページ一覧

ハイブリッドアプリ開発でファイルのアップロード、ダウンロードを便利にするプラグインを使う

Apache Cordovaで本格スマホアプリに挑戦しよう 第7回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2016/08/19 14:00
目次

ファイルのアップロード

 ファイルのアップロードでは、FileTransferのuploadメソッドを利用し、表7に示す引数が指定できます。

リスト5 ファイルのダウンロード
FileTransfer.upload(fileURL,serverURL,successCallback,errorCallback,[options,[trustAllHosts]]);

 また、それぞれの引数は表7のようになります。

表7 FileTransfer.uploadメソッドの引数
引数 概要
fileURL アップロードするファイルのパス
serverURL アップロードするサーバへのURL。encodeURI()を使ってエンコードする。
successCallback 成功した場合のコールバック関数。関数の引数にはFileUploadResultオブジェクトが設定される
errorCallback 失敗した場合のコールバック関数。関数の引数にはFileTransferErrorオブジェクトが設定される
options 追加で指定する任意のヘッダを指定する。BASIC認証などが必要な場合にはこちらに追加のヘッダを指定する。
trustAllHosts すべてのホストを信頼するか?オレオレ証明書などをもちいている場合にtrueにする。通常の運用ではfalseにする。

 ローカルファイルをサーバにアップロードするサンプルコードがリスト6のようになります。

リスト6 ファイルのアップロード(app/www/js/controllers/FileUploadController.jsの抜粋)
// (1)FileTransferオブジェクトを作成
var fileTransfer = new FileTransfer();

// (2)アップロード時のオプションオブジェクトの作成
var options = new FileUploadOptions();
options.fileKey  = "image";
options.fileName = "sample.png";
options.mimeType = "image/png";

fileTransfer.upload(
  cordova.file.applicationDirectory + "www/img/upload.png", // (3)データのパスを指定
  encodeURI("http://192.168.1.7:8080/cdv7/put.php"),      // (4)リクエスト(アップロード)するパスを指定
  function(result){                     // (5) 成功した場合のコールバック関数

    var body = result.response;   // (6) サーバからのレスポンス
    if(result.response) {
      var ret = JSON.parse(body);
      var message = ret.message;
      $scope.$apply(function(){
        $scope.message = ret.message;
      });
    }
  },
  function(error){
    alert('ERROR (' + error.code + ')');
  },
  options // (7)オプションの指定
);
// (8)アップロード中の状況を把握するためのイベント処理
fileTransfer.onprogress = function(event){
  if(event.lengthComputable){
    $scope.$apply(function(){
      $scope.progress = "uploaded :" + event.loaded + "/" + event.total;
    });
  }
};

 (1)ではFileTransferオブジェクトを作成します。

 続いて、(2)でアップロードする際のオプション情報を設定します。オプションには表8のような指定が可能です。

表8 FileUploadOptionsで指定可能なプロパティ情報
プロパティ 説明
fileKey フォームでのname属性の値。デフォルトは"file"。
fileName アップロードするファイル名。デフォルトは"image.jpg"。
httpMethod アップロードする際のHTTPメソッド。POSTもしくはPUT。デフォルトはPOST。
mimeType アップロードするファイルのMIMEタイプ。デフォルトは"image/jpeg"。
params 追加で指定する任意のリクエストパラメータ。
chunkedMode アップロードする際にChunked形式で送信するか否かを指定します。Chunked形式ではデータを一括で送信せずに分割し、データ量が多い場合に有効な送信方法です。デフォルトはtrue。
headers 任意の指定するヘッダ情報。

 メソッドには(3)ローカルファイルのパスと(4)encodeURIメソッドを使って指定したアップロードするURLを指定します。

 続いて、(5)成功時のコールバック関数では表9に示すFileUploadResultオブジェクトが取得できます。サーバからのレスポンスはresponseプロパティから取得で取得できます。

 (7)で(2)で作成したFileUploadOptionsのオブジェクトを指定します。

 ダウンロードと同様に(8)のようにonprogressプロパティに関数を指定することでアップロード中の状況を把握できます。

表9 FileUploadResultオブジェクトのプロパティ一覧
プロパティ 説明
bytesSent 送信されたデータ量。
responseCode アップロードした際のHTTPレスポンスコード。
response レスポンス結果の文字列。

 アップロードに成功するとPHPではリスト7のような$_FILES変数が設定されます。

リスト7 PHPでのアップロードされたファイルの情報
$_FILES["image"] = array(
    "name" => "sample.png",
    "type" => "image/png",
    "tmp_name" => "/private/var/tmp/phpWQlHY5"
    "error" => 0,
    "size" => 46976
);

最後に

 今回紹介したFileTransferプラグインを利用すると非常に簡単にファイルのアップロードやダウンロードの機能を追加できます。これらの機能はネットワークを利用しますので、第4回で紹介したネットワーク情報を取得するプラグインも併せて参照することをおすすめします。

 オフライン時でも様々な操作ができることがWebアプリと違い便利なところですので、これらのプラグインを有効に使ってさらに便利なアプリの制作に役立ててください。

参考資料



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:Apache Cordovaで本格スマホアプリに挑戦しよう

もっと読む

著者プロフィール

  • WINGSプロジェクト 小林 昌弘(コバヤシ マサヒロ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。個人紹介主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5