Offline form handling

packages/enketo-express/public/js/src/module/controller-webform.js

@@ -17,6 +17,15 @@ import formCache from './form-cache';
 import { getLastSavedRecord, populateLastSavedInstances } from './last-saved';
 import { FormController } from './form-controller';
 
+const cronInterval = setInterval(async () => {
+    connection.getOnlineStatus()
+        .then(appearsOnline => {
+            console.log(appearsOnline)
+            if (!appearsOnline) {
+            }
+        })
+}, 5000);
+
 /**
  * @typedef {import('../../../../app/models/survey-model').SurveyObject} Survey
  */
@@ -348,6 +357,9 @@ function _submitRecord(survey) {
                 heading = t('alert.submissionsuccess.heading');
             } else if (level === 'warning') {
                 heading = t('alert.submissionwarning.heading');
+            } else if (level === 'offline') {
+                heading = "You are offline";
+                level = 'warning';
             } else {
                 heading = t('alert.submissionerror.heading');
             }
@@ -726,9 +738,14 @@ function _setEventHandlers(survey) {
             console.log(arrayOfFileURLs?.length)
             console.log("formFiles: " + formFiles?.length)
             if (arrayOfFileURLs?.length <= formFiles?.length && formFiles?.length) {
-                const file = formFiles[formFiles?.length - 1];
-                const fileURL = await formController.uploadFile(file);
-                arrayOfFileURLs.push({ url: fileURL, name: file.name });
+                for (let i = 0; i < formFiles.length; i++) {
+                    const file = formFiles[i];
+                    if (typeof file === 'object') {
+                        const fileURL = await formController.uploadFile(file);
+                        if (fileURL)
+                            arrayOfFileURLs.push({ url: fileURL, name: file.name });
+                    }
+                }
             } else {
                 arrayOfFileURLs = arrayOfFileURLs.filter(file => formFiles.find(el => el.name == file.name))
             }

packages/enketo-express/public/js/src/module/form-controller.js

 import { xml2json } from './xml2json';
 
 import settings from './settings';
+import imageCompression from 'browser-image-compression';
+const options = {
+    maxSizeMB: 0.5,
+    maxWidthOrHeight: 840,
+    useWebWorker: true,
+}
+
+
 
 // import { config } from '../../../../app/models/config-model';
 
@@ -65,6 +73,7 @@ export class FormController {
         this._message = '';
         this.formSpec = formSpec;
         this._parser = new DOMParser();
+        this.formFiles = null;
 
         this.formSpec.isSuccessExecute = () => this.executeMethod(this.formSpec.successCheck);
         this.formSpec.onFormSuccessExecute = () => this.executeMethod(this.formSpec.onSuccess.sideEffect);
@@ -100,19 +109,26 @@ export class FormController {
     }
 
     async uploadFile(data) {
-        const fd = new FormData();
-        var newFile = new File([data], data.name, { type: data.type });
-        fd.append('file', newFile, data.name);
-        const response = await fetch(`${settings.formManagerBaseURI}/form/uploadFile`, {
-            method: 'POST',
-            body: fd
-        }).then(s => {
-            return s.json();
-        }).catch(e => {
-            console.log(e);
-        });
-
-        return response.fileURL;
+        console.log("Ab dekh data:", data)
+        if (data) {
+            const fd = new FormData();
+            var newFile = new File([data], data.name, { type: data.type });
+            // Compressing this file
+            newFile = await imageCompression(newFile, options)
+            fd.append('file', newFile, data.name);
+            const response = await fetch(`${settings.formManagerBaseURI}/form/uploadFile`, {
+                method: 'POST',
+                body: fd
+            }).then(s => {
+                return s.json();
+            }).catch(e => {
+                console.log(e);
+                return null;
+            });
+
+            return response ? response.fileURL : null;
+        }
+        return null;
     }
 
     set(obj, path, value) {
@@ -135,13 +151,29 @@ export class FormController {
 
     async processForm(formData, formFiles) {
         const doc = this._parser.parseFromString(formData, 'text/xml');
-        this.formData = (await fetch(`${settings.formManagerBaseURI}/parse`, {
+        const parseRes = await fetch(`${settings.formManagerBaseURI}/parse`, {
             method: "POST",
             body: JSON.stringify({ xml: formData.toString() }),
             headers: {
                 "Content-type": "application/json; charset=UTF-8"
             }
-        }).then(res => res.json())).data;
+        }).then(res => res.json()).catch(e => {
+            this._state = 'FORM_FAILURE_OFFLINE';
+            this.formFiles = formFiles;
+            window.parent.postMessage(JSON.stringify({
+                state: this._state,
+                formDataXml: formData,
+                formFilesXml: formFiles
+            }), '*');
+        });
+
+        if (parseRes == undefined)
+            return Promise.resolve({
+                status: "offline",
+                message: "You are oflline. Your form data has been saved. Please re-submit using the submit button once back online"
+            });
+        this.formData = parseRes.data;
+
         // for (let i = 0; i < formFiles.length; i++) {
         //     const file = formFiles[i];
         //     const fileURL = await this.uploadFile(file);