Pada tutorial pemrograman kali ini, KonsepKoding akan berbagi tutorial mengenai cara upload image atau upload gambar di React Native ke server. Sebagai React Native developer tutorial ini sangat di butuhkan karena ketika membuat sebuah real world application kita sering berinteraksi dengan gambar/image. Upload gambar sendiri sangat berguna misal untuk fitur profil, fitur post dan fitur lainnya.

Di tutorial ini akan dijelaskan dengan rinci bagaimana upload gambar beserta tutorial membuat server sederhana untuk upload gambar server kita.


Tutorial Upload Image/Gambar React Native Ke Server

https://www.konsepkoding.com/2020/05/tutorial-upload-gambar-react-native-server.html


Tutorial Pertama Upload Gambar React Native
1. Pertama silahkan install libarary react-native-image-picker , buka terminal dan ketikan perintah di bawah ini :

npm i react-native-image-picker
# RN >= 0.60
cd ios && pod install
# RN < 0.60
react-native link react-native-image-picker

2. Selanjutnya library yang perlu kita install adalah : rn-fetch-blob, yang berfungsi untuk httprequest dan upload gambar kita, selain itu rn-fetch-blob juga bisa digunakan untuk download gambar dan masih banyak lagi. keteikan perintah dibawah ini pada terminal/cmd anda :

npm install --save rn-fetch-blob
react-native link rn-fetch-blob

3. Kemudian tambahkan permision di AndroidManifest anda, agar bisa mengakses kamera dan upload gambar.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.rnfetchblobtest"
    android:versionCode="1"
    android:versionName="1.0">
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+   <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
+   <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
+   <uses-permission android:name="android.permission.DOWNLOAD_WITHOUT_NOTIFICATION" />
+ <uses-permission android:name="android.permission.CAMERA" />


4. Silahkan run aplikasi anda dulu, di android maupun ios untuk cek apakah library berhasil terinstall dengan baik, jalankan :

npx react native run-android atau ios 

5. Jika project anda di run sampai saat ini, tidak terjadi error, selamat anda telah berhasil setup library yang di butuhkan.

6. Selanjutnya mulai koding, buka file App.js , kemudian silahkan tulis kode React Native di bawah ini :


7. Setelah itu silahkan jalankan dan bila berhasil tampilan aplikasi yang kita buat akan seperti gambar di bawah ini, eits tunggu belum selesai, karena kita belum setting dan membuat server kita:



Tutorial Kedua Membuat Server Untuk Upload Gambar 

Disini, kita akan menggunakan Bahasa PHP sebagai servernya, mungkin di Real Project sudah ada backend yang sudah membuatkan server untukmu, tutorial ini perlu saya terangkan agar kamu pahah dan mengerti bahwa kode yang kita buat work. Pastikan kamu sudah menginstall XAMPP/LAMPP a web server lainnya di laptopmu.

1. Buat sebuah folder dengan nama server, kemudian taruh di htdocs, lalu buat sebuah folder baru dengan nama images dan buat sebuah file dengan nama upload.php

2. Lalu ketikan kode PHP untuk server di bawah ini, kita menggunakan Method POST, untuk upload gambarnya.


3. Setelah itu jalankan di server xampp anda, note jika anda menggunakan Linux atau Mac OS, pastikan kamu telah mengatur permision folder htdocs untuk upload gambar tersebut. Jika kamu bingun kamu bisa melihat thread mengenai setting permision di Mac OS maupun Linux.



4. Baik, setelah anda telah berhasil mengatur permisson folder htdocs anda, mari kita test aplikasi react native kita.

Tes Aplikasi

Pertama dan yang paling penting untuk test aplikasi pastikan kamu sudah menjalankan server XAMPP/web server di komputer kau, dan pastikan IP address dan URL untuk upload gabar sudah sesuai.


1. Saya akan mencoba mengambil gambar dari project yang telah kita buat, hasilnya akan seperti ini,



2. Selanjutnya saya akan Klik upload, dan jika berhasil akan seperti ini.



3. Sekarang gambar kita telah berhasil terupload di folder server lokal kita.




Catatan Tambahan (Optional)

Jika rest api di project kamu bukan hanya memiliki image/file saja contoh seperti ini (Tambahan) :


Di postman memerlukan properti image dalam bentuk file dan name dalam bentuk string.

Maka kamu harus membuatnya seperti ini di rn-fecth-blob mu :

 RNFetchBlob.fetch('POST', 'http://www.example.com/upload-form', {
    Authorization : "Bearer access-token",
    otherHeader : "foo",
    // this is required, otherwise it won't be process as a multipart/form-data request
    'Content-Type' : 'multipart/form-data',
  }, [
    // append field data from file path
    {
      name : 'image',
      filename : 'avatar.png',
      // Change BASE64 encoded data to a file path with prefix `RNFetchBlob-file://`.
      // Or simply wrap the file path with RNFetchBlob.wrap().
      data: RNFetchBlob.wrap(PATH_TO_THE_FILE)
    },
    // elements without property `filename` will be sent as plain text
    { name : 'name', data : 'user'},
  ]).then((resp) => {
    // ...
  }).catch((err) => {
    // ...
  })


Sekian semoga tutorial upload gambar/image React Native ke server dapat bermanfaat dan membantu kamu yang sedang mencari tutorial upload images React Native. Jika anda mengalami masalah/error silahkan tulis di kolom komentar, jika anda masih kesulitan dan ingin project fullnya gratis silahkan  klik disini, akan saya share di github.


Baca Tutorial React Native Lainnya :