Cara Menggunakan Document Picker & Image Picker di NativeScript (Lengkap dengan Base64 Upload)

Dalam pengembangan aplikasi mobile menggunakan NativeScript, fitur untuk memilih file dari perangkat sangat penting. Misalnya, saat pengguna ingin mengunggah dokumen PDF, Word (DOC), atau gambar ke server. Artikel ini akan membahas cara menggunakan @nativescript-community/ui-document-picker dan @nativescript/imagepicker untuk menangani pemilihan file sekaligus cara mengubahnya menjadi Base64 agar siap diunggah ke API backend.

1. Mengapa Harus Menggunakan Document Picker & Image Picker di NativeScript?

Document Picker berfungsi untuk memilih file dokumen seperti PDF dan DOC dengan mudah di Android dan iOS. Sedangkan Image Picker digunakan untuk memilih gambar dari galeri atau mengambil foto dari kamera. Dengan dua library ini, kamu bisa membangun fitur upload file yang lengkap di aplikasi NativeScript.

2. Instalasi Package

Tambahkan kedua package berikut ke dalam proyek NativeScript kamu:

npm install @nativescript-community/ui-document-picker @nativescript/imagepicker

Pastikan instalasi berhasil sebelum melanjutkan ke tahap implementasi.

3. Implementasi Document Picker di NativeScript

Berikut contoh implementasi Document Picker untuk memilih file dokumen dan mengubahnya menjadi Base64:

import { openFilePicker } from '@nativescript-community/ui-document-picker';

openFilePicker({
  multipleSelection: false,
}).then((result) => {
    if (result?.files?.length) {
      let filePath = result.files[0];
      if (filePath.startsWith('file://')) {
        // jika path diawali file:// hapus prefix agar tidak error
        filePath = decodeURI(filePath.replace('file://', ''));
      }
      const file = File.fromPath(filePath);

      let base64: string = '';
      file.read().then((data) => {
          if (__APPLE__) {
            base64 = data.base64EncodedStringWithOptions(0);
          } else {
            base64 = android.util.Base64.encodeToString(
              data,
              android.util.Base64.NO_WRAP
            );
          }
          // TODO: Upload base64 ke API backend kamu di sini
      });
});

Penjelasan:

• openFilePicker() memunculkan dialog pemilihan file.
• filePath.startsWith('file://') memastikan path aman diakses tanpa error permission.
• File.fromPath(filePath) membaca file dari storage perangkat.
• Data file diubah ke Base64 sebelum diunggah ke API.

4. Upload File Base64 ke Server (Contoh)

Setelah file dikonversi menjadi Base64, kamu bisa mengunggahnya dengan Http.request bawaan NativeScript atau buatan komunitas (@klippa/nativescript-http atau @nativescript-community/https).

Http.request('https://api.serverkamu.com/upload', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ file: base64 }),
})
.then(res => res.json())
.then(data => console.log('Upload sukses:', data))
.catch(err => console.error('Upload gagal:', err));

5. Kesimpulan

Dengan @nativescript-community/ui-document-picker dan @nativescript/imagepicker, kamu bisa memberikan pengalaman upload file yang optimal di aplikasi NativeScript, baik untuk dokumen maupun gambar. Teknik konversi ke Base64 juga sangat membantu saat berkomunikasi dengan API berbasis REST.