Córdoba - Transferencia de archivos

Este complemento se utiliza para cargar y descargar archivos.

Paso 1: instalación del complemento de transferencia de archivos

Tenemos que abrir command prompt y ejecute el siguiente comando para instalar el complemento.

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

Paso 2: crear botones

En este capítulo, le mostraremos cómo cargar y descargar archivos. Creemos dos botones enindex.html

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

Paso 3: agregar oyentes de eventos

Los oyentes de eventos se crearán en index.js dentro de onDeviceReadyfunción. Estamos agregandoclick eventos y callback funciones.

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

Paso 4A - Función de descarga

Esta función se utilizará para descargar los archivos del servidor al dispositivo. Subimos el archivo apostimage.orgpara hacer las cosas más simples. Probablemente desee utilizar su propio servidor. La función se coloca enindex.js y se activará cuando se presione el botón correspondiente. uri es el enlace de descarga del servidor y fileURI es la ruta a la carpeta DCIM en nuestro dispositivo.

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=="
         }
      }
   );
}

Una vez que presionamos el DOWNLOAD , el archivo se descargará del postimg.orgservidor a nuestro dispositivo móvil. Podemos comprobar la carpeta especificada y ver quemyFile esta ahí.

La salida de la consola se verá así:

Paso 4B - Función de carga

Ahora creemos una función que tomará el archivo y lo subirá al servidor. Nuevamente, queremos simplificar esto tanto como sea posible, así que usaremosposttestserver.comservidor en línea para realizar pruebas. El valor uri se vinculará para su publicación enposttestserver.

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);
   }
	
}

Ahora podemos presionar el UPLOADpara activar esta función. Obtendremos una salida de consola como confirmación de que la carga se realizó correctamente.

También podemos verificar el servidor para asegurarnos de que se cargó el archivo.