Cordova - Trasferimento di file

Questo plugin viene utilizzato per caricare e scaricare file.

Passaggio 1: installazione del plug-in di trasferimento file

Dobbiamo aprire command prompt ed esegui il seguente comando per installare il plugin.

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

Passaggio 2: creare pulsanti

In questo capitolo, ti mostreremo come caricare e scaricare file. Creiamo due pulsanti inindex.html

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

Passaggio 3: aggiungere ascoltatori di eventi

I listener di eventi verranno creati in index.js dentro il onDeviceReadyfunzione. Stiamo aggiungendoclick eventi e callback funzioni.

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

Passaggio 4A - Funzione di download

Questa funzione verrà utilizzata per scaricare i file dal server al dispositivo. Abbiamo caricato il file inpostimage.orgper rendere le cose più semplici. Probabilmente vorrai usare il tuo server. La funzione è inserita inindex.js e verrà attivato quando viene premuto il pulsante corrispondente. uri è il link per il download del server e fileURI è il percorso della cartella DCIM sul nostro 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 volta premuto il pulsante DOWNLOAD pulsante, il file verrà scaricato dal file postimg.orgserver sul nostro dispositivo mobile. Possiamo controllare la cartella specificata e vederlamyFile è lì.

L'output della console sarà simile a questo:

Passaggio 4B - Funzione di caricamento

Ora creiamo una funzione che prenda il file e lo carichi sul server. Di nuovo, vogliamo semplificarlo il più possibile, quindi useremoposttestserver.comserver online per test. Il valore uri verrà collegato per la pubblicazione inposttestserver.

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

Ora possiamo premere il pulsante UPLOADpulsante per attivare questa funzione. Otterremo un output della console come conferma che il caricamento è stato eseguito correttamente.

Possiamo anche controllare il server per assicurarci che il file sia stato caricato.