Merge pull request #557 from cboard-org/fix-upload-img

Unable to load the image/symbol from the device
cboard-org · Nov 15, 2019 · b1387a5 · b1387a5
2 parents 8f0b4d2 + c204cec
commit b1387a5
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 32 deletions.
diff --git a/src/components/UI/InputImage/InputImage.component.js b/src/components/UI/InputImage/InputImage.component.js
@@ -1,7 +1,11 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from 'react-intl';
-import { requestCvaPermissions, isCordova } from '../../../cordova-util';
+import {
+  requestCvaPermissions,
+  isCordova,
+  writeCvaFile
+} from '../../../cordova-util';
 import PhotoCameraIcon from '@material-ui/icons/PhotoCamera';
 import readAndCompressImage from 'browser-image-resizer';
 import CircularProgress from '@material-ui/core/CircularProgress';
@@ -68,15 +72,25 @@ class InputImage extends PureComponent {
         const imageUrl = await API.uploadFile(resizedImage, file.name);
         onChange(imageUrl);
       } catch (error) {
-        const imageBase64 = this.blobToBase64(resizedImage);
-        onChange(imageBase64);
+        this.saveLocalImage(file.name, resizedImage);
       } finally {
         this.setState({
           loading: false
         });
       }
     } else {
-      const imageBase64 = this.blobToBase64(resizedImage);
+      this.saveLocalImage(file.name, resizedImage);
+    }
+  };
+
+  saveLocalImage = async (fileName, data) => {
+    const { onChange } = this.props;
+    if (isCordova()) {
+      const filePath = '/Android/data/com.unicef.cboard/files/' + fileName;
+      const fEntry = await writeCvaFile(filePath, data);
+      onChange(fEntry.nativeURL);
+    } else {
+      const imageBase64 = this.blobToBase64(data);
       onChange(imageBase64);
     }
   };

diff --git a/src/cordova-util.js b/src/cordova-util.js
@@ -5,41 +5,52 @@ export const onCordovaReady = onReady =>
 
 export const writeCvaFile = async (name, blob) => {
   if (isCordova()) {
-    window.requestFileSystem(
-      window.LocalFileSystem.PERSISTENT,
-      0,
-      function(fs) {
-        fs.root.getFile(
-          name,
-          { create: true, exclusive: false },
-          function(fileEntry) {
-            writeFile(fileEntry, blob);
-            return fileEntry;
-          },
-          onErrorCreateFile
-        );
-      },
-      onErrorLoadFs
-    );
+    return new Promise(function(resolve, reject) {
+      window.requestFileSystem(
+        window.LocalFileSystem.PERSISTENT,
+        0,
+        function(fs) {
+          fs.root.getFile(
+            name,
+            { create: true, exclusive: false },
+            async function(fileEntry) {
+              await writeFile(fileEntry, blob);
+              resolve(fileEntry);
+            },
+            onErrorCreateFile
+          );
+        },
+        onErrorLoadFs
+      );
+    });
   }
 };
 
 const writeFile = (fileEntry, dataObj) => {
-  fileEntry.createWriter(function(fileWriter) {
-    fileWriter.onwriteend = function() {};
-    fileWriter.onerror = function(e) {
-      console.log('Failed file write: ' + e.toString());
-    };
-    // If data object is not passed in, create a new Blob instead.
-    if (!dataObj) {
-      dataObj = new Blob(['some file data'], { type: 'text/plain' });
-    }
-    fileWriter.write(dataObj);
+  return new Promise(function(resolve, reject) {
+    fileEntry.createWriter(function(fileWriter) {
+      fileWriter.onwriteend = function() {
+        resolve();
+      };
+      fileWriter.onerror = function(e) {
+        console.log('Failed file write: ' + e.toString());
+        reject(e.message);
+      };
+      // If data object is not passed in, create a new Blob instead.
+      if (!dataObj) {
+        dataObj = new Blob(['some file data'], { type: 'text/plain' });
+      }
+      fileWriter.write(dataObj);
+    });
   });
 };
 
-const onErrorCreateFile = () => {};
-const onErrorLoadFs = () => {};
+const onErrorCreateFile = e => {
+  console.log('Error status: ' + e.status + ' - Error message: ' + e.message);
+};
+const onErrorLoadFs = e => {
+  console.log('Error status: ' + e.status + ' - Error message: ' + e.message);
+};
 
 export const fileCvaOpen = (filePath, type) => {
   if (isCordova()) {