diff --git a/src/components/UI/InputImage/InputImage.component.js b/src/components/UI/InputImage/InputImage.component.js index 39327d533..786d3b591 100644 --- 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 index 708c62db4..57007e46a 100644 --- 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()) {