Download file dengan capacitorjs di mobile


CapacitorJS adalah sebuah platform pengembangan aplikasi hybrid yang digunakan untuk membangun aplikasi mobile. Salah satu fitur unggulannya adalah kemampuan untuk mengakses sumber daya hardware pada perangkat mobile seperti kamera, GPS, dan penyimpanan file. Dalam artikel ini, kita akan membahas cara menyimpan file dengan CapacitorJS di mobile.

Langkah pertama yang harus dilakukan adalah menginstal plugin Filesystem CapacitorJS. Untuk melakukan instalasi, buka terminal dan jalankan perintah berikut:

npm install @capacitor/filesystem

Setelah plugin berhasil terpasang, kita bisa memulai proses penyimpanan file.

Langkah pertama adalah menentukan jenis penyimpanan yang digunakan. CapacitorJS mendukung dua jenis penyimpanan, yaitu:

  • Temporary: jenis penyimpanan sementara yang dihapus ketika aplikasi ditutup.
  • Persistent: jenis penyimpanan tetap yang tidak akan dihapus kecuali dihapus secara manual atau aplikasi dihapus dari perangkat.

Untuk menentukan jenis penyimpanan yang digunakan, gunakan method getUri dan berikan parameter directory yang berisi jenis penyimpanan yang digunakan. Berikut contoh kodenya:

import { FilesystemDirectory, Plugins } from '@capacitor/core';
const { Filesystem } = Plugins;
const uri = await Filesystem.getUri({
directory: FilesystemDirectory.Documents,
path: 'filename.txt'
});

Pada contoh kode di atas, jenis penyimpanan yang digunakan adalah FilesystemDirectory.Documents yang merupakan jenis penyimpanan persistent.

Setelah menentukan jenis penyimpanan yang digunakan, kita bisa mulai proses penyimpanan file. Berikut adalah contoh kode untuk menyimpan file pada direktori yang telah ditentukan:

import { FilesystemDirectory, Plugins } from '@capacitor/core';

const { Filesystem } = Plugins;

async function saveFile() {
const data = 'Isi file yang akan disimpan';
const filename = 'filename.txt';
const directory = FilesystemDirectory.Documents;

try {
await Filesystem.writeFile({
directory,
path: filename,
data,
encoding: 'utf8'
});
console.log('File berhasil disimpan!');
} catch (error) {
console.error('Gagal menyimpan file', error);
}
}


Pada contoh kode di atas, kita menggunakan method writeFile untuk menyimpan file. Method ini menerima beberapa parameter, yaitu:

  • directory: jenis penyimpanan yang digunakan.
  • path: nama file yang akan disimpan.
  • data: isi file yang akan disimpan.
  • encoding: jenis encoding yang digunakan untuk menyimpan file. Pada contoh di atas, kita menggunakan encoding utf8.

parameter data pada writeFile diatas hanya dapat menerima type data string saja, sehingga permasalahan akan muncul kalau seandainya kita ingin menyimpan file dengan format foto (png, jpg dll) atau format document (xlsx, doc, dll) atau umumnya data selain text. 

untuk mengatasi hal tersebut, maka paramenter encoding nya tidak perlu diisi, dan data yang akan disimpan dirubah ke format base64 terlebih dahulu.

Itulah beberapa langkah untuk menyimpan file dengan CapacitorJS di mobile. Dengan menggunakan plugin Filesystem CapacitorJS, proses penyimpanan file dapat dilakukan dengan mudah dan cepat.

Semoga artikel ini bermanfaat untuk Anda!


Comments