Added RNFS and refactor image upload to use it

mobile/src/API.js

@@ -3,6 +3,7 @@ import io from "socket.io-client"
 import { AsyncStorage } from "react-native"
 import autobind from "autobind-decorator"
 import { config } from "./config"
+import RNFS from "react-native-fs"
 
 const authTokenKeyName = "AuthToken"
 const backendKeyName = "Backend"
@@ -209,17 +210,15 @@ class API extends EventEmitter {
         headers.set("Authorization", "Bearer " + this.token)
       }
       if (method === "POST" || method === "PUT") {
-        if (requestOptions.raw) {
-          const isBase64 = requestOptions.raw.base64
+        if (requestOptions.binary) {
+          const { isBase64, offset } = requestOptions.binary
+
           headers.set(
             "Content-Type",
             isBase64 ? "application/base64" : "application/octet-stream"
           )
-          headers.set("Content-Length", requestOptions.raw.length)
-          headers.set(
-            "Content-Range",
-            (isBase64 ? "base64" : "byte") + " " + requestOptions.raw.offset
-          )
+          headers.set("Content-Length", requestBody.length)
+          headers.set("Content-Range", `byte ${offset}`)
           fetchOptions.body = requestBody
         } else {
           headers.set("Content-Type", "application/json")
@@ -236,7 +235,7 @@ class API extends EventEmitter {
         .then((res) => {
           return Promise.all([
             Promise.resolve(res),
-            requestOptions.raw && method === "GET" ? res.blob() : res.json(),
+            requestOptions.binary && method === "GET" ? res.blob() : res.json(),
           ])
         })
         .then((arr) => {
@@ -429,21 +428,27 @@ class API extends EventEmitter {
     return promise
   }
 
-  upload(data, progressCallback) {
+  upload(path, progressCallback) {
     return new Promise((resolve, reject) => {
       const chunkSize = 32 * 1024
-      const uploadSize = data.length
-      const numberOfChunks = Math.ceil(uploadSize / chunkSize)
+      let uploadSize = 0
+      let numberOfChunks = 0
       let chunk = 0
       let uploadId = null
 
       const uploadNextChunk = () => {
-        const start = chunk * chunkSize
-        const end = Math.min(uploadSize, start + chunkSize)
+        const offset = chunk * chunkSize
+        const length = Math.min(chunkSize, uploadSize - offset)
 
-        this.post("/assets/upload/" + uploadId, data.slice(start, end), {
-          raw: { base64: true, length: chunkSize, offset: start },
-        })
+        RNFS.read(path, length, offset, "base64")
+          .then((data) => {
+            return this.post("/assets/upload/" + uploadId, data, {
+              binary: {
+                isBase64: true,
+                offset,
+              },
+            })
+          })
           .then((uploadData) => {
             chunk++
             if (progressCallback && !progressCallback(uploadData)) {
@@ -459,12 +464,18 @@ class API extends EventEmitter {
           })
       }
 
-      this.post("/assets/upload", {
-        uploadSize,
-        contentType: "image/jpeg",
-        chunkContentType: "application/base64",
-        numberOfChunks,
-      })
+      RNFS.stat(path)
+        .then((stat) => {
+          uploadSize = stat.size
+          numberOfChunks = Math.ceil(uploadSize / chunkSize)
+
+          return this.post("/assets/upload", {
+            uploadSize,
+            contentType: "image/jpeg",
+            chunkContentType: "application/base64",
+            numberOfChunks,
+          })
+        })
         .then((uploadData) => {
           uploadId = uploadData.uploadId
           uploadNextChunk()