Cara membuat download file di nativescript dengan javascript

Pada pembahasan kali ini saya ingin berbagi cara membuat download file di nativescript. Cara membuatnya cukup mudah, disini kita memerlukan dua buah module untuk membuatnya, yaitu module file-system dan http. Untuk module file-system disini akan berfungsi untuk menyimpan file yang diambil oleh module http ke lokal memori kamu.

Pada praktiknya ini saya menggunakan nativescript 4.x, tapi cara ini masih bisa di pakai untuk kamu yang masih menggunakan nativescript 3.x, soalnya dulu sintak ini saya buat di nativescript 3. Paling jika kamu ingin menggunakannya di nativescript 3 akan ada sedikit perubahan, contohnya pada bagian sintak dialog alert, silahkan dicoba saja :)

XML VIEW
Langkah pertama buat tombol sederhana untuk mentriger fungsi downloadnya, lalu agar terlihat dinamis link filenya sekalian di sematkan pada tombol itu sendiri, berikut sintaknya :

<Button text="Download File" url="http://ex.com/haha.pdf" tap="downloadFile" />

Pada atribut "url" diatas kamu bisa juga isi dengan variabel agar semakin dinamis. Lalu atribut "tap" diatas merupakan atribut listener, diakan otomatis tertriger saat tombol di tekan.

JAVASCRIPT CONTROLLER
Langkah selanjutnya, pada sisi JS kita akan membuat sebuah fungsi sederhana dengan nama "downloadFile", berikut sintaknya :

const fs = require('file-system');
const http = require("http");

exports.download = function (args) {
    let data = args.object;

    var androidDownloadsPath = android.os.Environment.getExternalStoragePublicDirectory(android.os.Environment.DIRECTORY_DOWNLOADS).toString();

    let url = data.get("url");
    let filename = url.substring(url.lastIndexOf('/') + 1);
    let saveLocation = fs.path.join(androidDownloadsPath, filename);

    http.getFile(url, saveLocation).then(function (file) {
        alert("Successfully downloaded").then(() => { });
    }).catch(function (error) {
        alert("error occurred!").then(() => { });
    });
};

Source : https://gist.github.com/dyazincahya/8d4fce09f5249565147d85fe4ef6ee0c

KETERANGAN

Pertama, kamu load terlebih dahulu module yang kamu butuhkan dengan cara mengetikan :

const fs = require('file-system');
const http = require("http");

Kedua, untuk mengambil data url yang disematkan pada atribut "url" caranya mudah, kamu cukup ketikan sintak seperti :

let data = args.object;
let url = data.get("url");

Ketga, pada contoh ini saya menyimpan file yang sudah di download ke folder "download" yang terdapat di memori kamu. Lalu untuk mengakses folder download itu sendiri kamu bisa menggunakan sintak :

var androidDownloadsPath = android.os.Environment.getExternalStoragePublicDirectory(android.os.Environment.DIRECTORY_DOWNLOADS).toString();

Keempat, untuk mendapatkan nama file yang terdapat pada url, kamu bisa menggunakan sintak :

let filename = url.substring(url.lastIndexOf('/') + 1);

Kemudian untuk sisanya kamu bisa baca sendiri pada sintak diatas.

SETTING PERMISSION
Oh iya hampir saja lupa, untuk praktiknya, kamu jangan lupa untuk mengatur permmisionnya terlebih dahulu agar file bisa tersimpan ke lokal memori, cara sederhananya kamu tinggal sematkan sintak ini ke MY_Project/app/App_Resources/Android/scr/main/AndroidManifest.xml

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

Letakan sintak diatas tepat didalam tag <manifest...> sematkan disini </manifest>.

Jika cara diatas belum berhasil, kamu bisa menggunakan bantuan plugin nativescript-permmision (https://github.com/nathanaela/nativescript-permissions).

Mungkin pembahasannya saya cukupkan sampai disini dulu, jika ada yang masih bingung bisa tanyakan saja dikolom komentar. Semoga bermanfaat yah :)