Cordova-ファイル転送

このプラグインは、ファイルのアップロードとダウンロードに使用されます。

手順1-ファイル転送プラグインのインストール

コマンドプロンプト*を開き、次のコマンドを実行してプラグインをインストールする必要があります。

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-file-transfer

ステップ2-ボタンを作成する

この章では、ファイルをアップロードおよびダウンロードする方法を示します。 indexl に2つのボタンを作成しましょう

<button id = "uploadFile">UPLOAD</button>
<button id = "downloadFile">DOWNLOAD</button>

手順3-イベントリスナーの追加

イベントリスナーは、 onDeviceReady 関数内の index.js で作成されます。 *クリック*イベントと*コールバック*関数を追加しています。

document.getElementById("uploadFile").addEventListener("click", uploadFile);
document.getElementById("downloadFile").addEventListener("click", downloadFile);

ステップ4A-ダウンロード機能

この機能は、サーバーからデバイスにファイルをダウンロードするために使用されます。ファイルを postimage.org にアップロードして、作業をより簡単にしました。おそらく、独自のサーバーを使用することになるでしょう。この関数は index.js に配置され、対応するボタンが押されるとトリガーされます。 uri はサーバーダウンロードリンクで、 fileURI はデバイス上のDCIMフォルダーへのパスです。

function downloadFile() {
   var fileTransfer = new FileTransfer();
   var uri = encodeURI("http://s14.postimg.org/i8qvaxyup/bitcoin1.jpg");
   var fileURL =  "///storage/emulated/0/DCIM/myFile";

   fileTransfer.download(
      uri, fileURL, function(entry) {
         console.log("download complete: " + entry.toURL());
      },

      function(error) {
         console.log("download error source " + error.source);
         console.log("download error target " + error.target);
         console.log("download error code" + error.code);
      },

      false, {
         headers: {
            "Authorization": "Basic dGVzdHVzZXJuYW1lOnRlc3RwYXNzd29yZA=="
         }
      }
   );
}

*DOWNLOAD* ボタンを押すと、ファイルが *postimg.org* サーバーからモバイルデバイスにダウンロードされます。 指定されたフォルダーを確認し、 *myFile* があることを確認できます。

Cordovaファイル転送ダウンロード

コンソール出力は次のようになります-

Cordovaファイル転送ダウンロードログ

ステップ4B-アップロード機能

次に、ファイルを取得してサーバーにアップロードする関数を作成しましょう。繰り返しますが、これを可能な限り単純化したいので、テストには posttestserver.com オンラインサーバーを使用します。 uri値は、 posttestserver に投稿するためにリンクされます。

function uploadFile() {
   var fileURL = "///storage/emulated/0/DCIM/myFile"
   var uri = encodeURI("http://posttestserver.com/post.php");
   var options = new FileUploadOptions();
   options.fileKey = "file";
   options.fileName = fileURL.substr(fileURL.lastIndexOf('/')+1);
   options.mimeType = "text/plain";

   var headers = {'headerParam':'headerValue'};
   options.headers = headers;
   var ft = new FileTransfer();
   ft.upload(fileURL, uri, onSuccess, onError, options);

   function onSuccess(r) {
      console.log("Code = " + r.responseCode);
      console.log("Response = " + r.response);
      console.log("Sent = " + r.bytesSent);
   }

   function onError(error) {
      alert("An error has occurred: Code = " + error.code);
      console.log("upload error source " + error.source);
      console.log("upload error target " + error.target);
   }

}

*UPLOAD* ボタンを押してこの機能をトリガーできます。 アップロードが成功したことの確認としてコンソール出力を取得します。

Cordovaファイル転送アップロードログ

サーバーをチェックして、ファイルがアップロードされたことを確認することもできます。

Cordovaファイル転送アップロードサーバーの応答

Cordova-file-transfer

目次