saasufy-components 3.4.0 → 3.5.0

package/collection-adder.js

@@ -63,31 +63,47 @@ class CollectionAdder extends SocketConsumer {
 
     let trimSpaces = this.hasAttribute('trim-spaces');
 
-    let newModelData = {
-      ...this.modelFieldValues,
-      ...radioData,
-      ...Object.fromEntries(
-        [...this.querySelectorAll('.collection-adder-input')]
-          .filter(input => input.value !== '')
-          .map((input) => {
-            let fieldType = this.fieldTypes[input.name];
-            let Type = getTypeCastFunction(fieldType);
-            let value;
-            if (fieldType === 'checkbox') {
-              value = input.checked;
-            } else {
-              value = input.value;
-            }
-            let sanitizedValue = Type(value);
-            if (trimSpaces && typeof sanitizedValue === 'string') {
-              sanitizedValue = sanitizedValue.trim();
-            }
-            return [ input.name, sanitizedValue ];
-          })
-      )
-    };
-
     try {
+      let newModelData = {
+        ...this.modelFieldValues,
+        ...radioData,
+        ...Object.fromEntries(
+          await Promise.all(
+            [...this.querySelectorAll('.collection-adder-input')].filter(
+              input => input.value !== ''
+            )
+            .map(
+              async (input) => {
+                let fieldType = this.fieldTypes[input.name];
+                let Type = getTypeCastFunction(fieldType);
+                let value;
+                if (input.type === 'file' && input.files && input.files.length) {
+                  let reader = new FileReader();
+                  let readerLoadPromise = new Promise((resolve, reject) => {
+                    reader.addEventListener('load', () => {
+                      resolve(reader.result);
+                    });
+                    reader.addEventListener('error', () => {
+                      reject(new Error('Failed to read file'));
+                    });
+                  });
+                  reader.readAsDataURL(input.files[0]);
+                  value = await readerLoadPromise;
+                } else if (fieldType === 'checkbox') {
+                  value = input.checked;
+                } else {
+                  value = input.value;
+                }
+                let sanitizedValue = Type(value);
+                if (trimSpaces && typeof sanitizedValue === 'string') {
+                  sanitizedValue = sanitizedValue.trim();
+                }
+                return [ input.name, sanitizedValue ];
+              }
+            )
+          )
+        )
+      };
       await this.collection.create(newModelData);
       messageContainer.classList.add('success');
       messageContainer.classList.remove('error');
@@ -250,6 +266,14 @@ class CollectionAdder extends SocketConsumer {
             inputLabel
           }"${extraAttributesString}></textarea>`
         );
+      } else if (inputType === 'file') {
+        items.push(
+          `<input class="collection-adder-input" type="${
+            inputType
+          }" name="${
+            field
+          }"${extraAttributesString} />`
+        );
       } else {
         items.push(
           `<input class="collection-adder-input" type="${

package/model-input.js

@@ -105,6 +105,7 @@ class ModelInput extends SocketConsumer {
     let hideErrorLogs = this.hasAttribute('hide-error-logs');
     let enableRebound = this.hasAttribute('enable-rebound');
     let hasConsumers = this.hasAttribute('consumers');
+    let writeOnly = type === 'file' && !hasConsumers;
 
     let socket;
     if (socketInstanceProperty) {
@@ -128,7 +129,7 @@ class ModelInput extends SocketConsumer {
     }
     this.socket = socket;
 
-    let modelFieldList = hasConsumers ? [ modelField ] : [];
+    let modelFieldList = writeOnly ? [] : [ modelField ];
 
     let model = new AGModel({
       socket: this.socket,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "saasufy-components",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "description": "Components for Saasufy.",
   "main": "index.js",
   "scripts": {