@es-joy/jsoe 0.24.3 → 0.25.0

package/src/fundamentalTypes/fileType.js

@@ -1,5 +1,8 @@
-import {jml, toStringTag} from '../vendor-imports.js';
+import {
+  jml, toStringTag, mimeStandardTypes, mimeOtherTypes
+} from '../vendor-imports.js';
 import {$e} from '../utils/templateUtils.js';
+import {schemaLabel} from '../utils/schemaMeta.js';
 import {visualize, getUserMedia, startScreenCapture} from '../utils/media.js';
 import dialogs from '../utils/dialogs.js';
 
@@ -14,6 +17,68 @@ import dialogs from '../utils/dialogs.js';
  * @typedef {(file: FileInfo) => void} SetValue
  */
 
+/**
+ * @typedef {HTMLButtonElement & {
+ *   $value?: File,
+ *   $min?: number,
+ *   $max?: number,
+ *   $mime?: string[]
+ * }} FileButton
+ */
+
+const commonMimeTypes = [...new Set([
+  ...Object.keys(mimeStandardTypes),
+  ...Object.keys(mimeOtherTypes)
+])].toSorted((a, b) => {
+  return a.localeCompare(b);
+});
+
+let fileContentTypeListId = 0;
+
+/**
+ * @param {number} size
+ * @param {number} [min]
+ * @param {number} [max]
+ * @returns {string|null}
+ */
+function checkFileSize (size, min, max) {
+  if (min !== undefined && size < min) {
+    return `File size (${size} bytes) is below the minimum of ${min} bytes`;
+  }
+  if (max !== undefined && size > max) {
+    return `File size (${size} bytes) exceeds the maximum of ${max} bytes`;
+  }
+  return null;
+}
+
+/**
+ * @param {string} type
+ * @param {string[]} [mime]
+ * @returns {string|null}
+ */
+function checkFileMimeType (type, mime) {
+  if (mime && mime.length > 0 && !mime.includes(type)) {
+    return `File type (${type || '(none)'}) is not among the allowed ` +
+      `MIME types: ${mime.join(', ')}`;
+  }
+  return null;
+}
+
+/**
+ * @param {File|undefined} file
+ * @param {number} [min]
+ * @param {number} [max]
+ * @param {string[]} [mime]
+ * @returns {string|null}
+ */
+function checkFile (file, min, max, mime) {
+  if (!file) {
+    return 'File data is required';
+  }
+  return checkFileSize(file.size, min, max) ??
+    checkFileMimeType(file.type, mime);
+}
+
 /**
  * @param {number} timestamp
  * @returns {string}
@@ -36,9 +101,9 @@ function getDateString (timestamp) {
  *   type?: string,
  *   lastModified?: number
  * }} value
- * @returns {void}
+ * @returns {File}
  */
-function newFileForBinary (viewBinary, value) {
+function createFileForBinary (viewBinary, value) {
   const oldFile = /** @type {File|undefined} */ (
     viewBinary.$value
   );
@@ -73,33 +138,55 @@ function newFileForBinary (viewBinary, value) {
         : value.lastModified
     }
   );
+  return file;
+}
+
+/**
+ * @param {HTMLButtonElement & {$value: File}} viewBinary
+ * @param {Parameters<typeof createFileForBinary>[1]} value
+ * @returns {File}
+ */
+function newFileForBinary (viewBinary, value) {
+  const file = createFileForBinary(viewBinary, value);
   viewBinary.$value = file;
+  return file;
 }
 
 /**
  * @param {File} value
  * @param {boolean} [editable]
+ * @param {number} [min]
+ * @param {number} [max]
+ * @param {string[]} [mime]
+ * @param {(message: string) => string|null|undefined} [getValidationMessage]
  * @returns {import('jamilih').JamilihArray}
  */
-function binaryButton (value, editable) {
-  // @ts-expect-error It's ok
-  return ['button', /** @type {import('jamilih').JamilihAttributes} */ ({
+function binaryButton (
+  value, editable, min, max, mime, getValidationMessage
+) {
+  return ['button', {
     class: 'viewBinary',
     $custom: {
-      $value: value
+      $value: value,
+      $min: min,
+      $max: max,
+      $mime: mime
     },
     $on: {
       /**
-       * @this {HTMLButtonElement & {$value: File}}
        * @param {Event} e
        */
       click (e) {
         // eslint-disable-next-line consistent-this -- Clarity
-        const viewBinary = this;
+        const viewBinary = /** @type {HTMLButtonElement & {$value: File}} */ (
+          this
+        );
         e.preventDefault();
         if (
-          !this.$value ||
-          Object.prototype.toString.call(this.$value).slice(8, -1) !== 'File'
+          !viewBinary.$value ||
+          Object.prototype.toString.call(
+            viewBinary.$value
+          ).slice(8, -1) !== 'File'
         ) {
           // Non-editable shouldn't be empty
           // if (!editable) {
@@ -119,14 +206,27 @@ function binaryButton (value, editable) {
               const textarea = /** @type {HTMLTextAreaElement} */ (
                 $e(dialog, '.view-binary')
               );
-              newFileForBinary(viewBinary, {
+              const file = createFileForBinary(viewBinary, {
                 stringContents: textarea.value
               });
+              const message = checkFile(file, min, max, mime);
+              if (message) {
+                dialogs.alert(getValidationMessage?.(message) ?? message);
+                return;
+              }
+              /** @type {HTMLFieldSetElement & {$setValue: SetValue}} */ (
+                $e(
+                  /** @type {HTMLDivElement} */ (
+                    viewBinary.closest('[data-type="file"]')
+                  ),
+                  'fieldset.fileMetaData'
+                )
+              ).$setValue(file);
               dialog.close();
             },
             // @ts-expect-error TS bug
             children: [
-              ['div', /** @type {import('jamilih').JamilihChildren} */ ([
+              ['div', [
                 'Binary source',
                 ['br'],
                 ['textarea', {
@@ -135,7 +235,7 @@ function binaryButton (value, editable) {
                   /* istanbul ignore next */
                   /** @type {string|null} */ (reader.result) ?? ''
                 ]]
-              ])]
+              ]]
             ]
           });
         });
@@ -152,10 +252,10 @@ function binaryButton (value, editable) {
             ));
           }
         );
-        reader.readAsBinaryString(this.$value);
+        reader.readAsBinaryString(viewBinary.$value);
       }
     }
-  }), [
+  }, [
     editable
       ? 'Edit binary data'
       : 'View binary data'
@@ -171,6 +271,16 @@ const fileType = {
   valueMatch (x) {
     return toStringTag(x) === 'File';
   },
+  validate ({root}) {
+    const viewBinary = /** @type {FileButton} */ (this.getInput({root}));
+    const message = checkFile(
+      viewBinary.$value,
+      viewBinary.$min,
+      viewBinary.$max,
+      viewBinary.$mime
+    );
+    return {valid: !message, message: message ?? undefined};
+  },
   toValue (s) {
     const obj = JSON.parse(s);
     return {value: new File([obj.stringContents], obj.name, {
@@ -196,9 +306,9 @@ const fileType = {
     return ['div', {dataset: {type: 'file'}}, [
       ['b', {
         class: 'emphasis',
-        title: specificSchemaObject?.description ? '(a File)' : undefined
+        title: schemaLabel(specificSchemaObject) ? '(a File)' : undefined
       }, [
-        specificSchemaObject?.description ?? 'File'
+        schemaLabel(specificSchemaObject) ?? 'File'
       ]],
       ['br'],
       ['br'],
@@ -376,26 +486,49 @@ const fileType = {
         })()
         : '',
       value.type.startsWith('image/')
-        // @ts-expect-error It's ok
-        ? ['img', /** @type {import('jamilih').JamilihAttributes} */ ({
+        ? ['img', {
           class: 'imageView',
           src: URL.createObjectURL(value),
           $on: {
-            /** @this {HTMLImageElement} */
             load () {
-              URL.revokeObjectURL(this.src);
+              URL.revokeObjectURL(
+                /** @type {HTMLImageElement} */ (this).src
+              );
             }
           }
-        })]
+        }]
         : ''
     ]];
   },
-  editUI ({typeNamespace, specificSchemaObject, value = {}}) {
+  editUI ({typeNamespace, specificSchemaObject, types, value = {}}) {
     // Todo: Could add way to preview file in edit mode (whether
     //         recorded or uploaded)
+    const fileSchemaObject = /** @type {import('zodexy').SzFile} */ (
+      specificSchemaObject
+    );
+    const {min, max, mime} = fileSchemaObject ?? {};
+
+    /**
+     * @param {string|null|undefined} message
+     * @returns {string|null|undefined}
+     */
+    const getValidationMessage = (message) => {
+      return types.getValidationMessage({
+        message,
+        schema: specificSchemaObject,
+        typeSpecific: true
+      });
+    };
+
+    fileContentTypeListId++;
+    const contentTypeListId = `fileContentTypes-${fileContentTypeListId}`;
+    const contentTypeOptions = mime && mime.length > 0
+      ? mime
+      : commonMimeTypes;
+
     return ['div', {
       dataset: {type: 'file'},
-      title: specificSchemaObject?.description ?? 'File'
+      title: schemaLabel(specificSchemaObject) ?? 'File'
     }, [
       ['fieldset', {
         class: 'fileMetaData',
@@ -417,10 +550,14 @@ const fileType = {
               '.size'
             )).value = String(file.size);
 
-            /** @type {HTMLInputElement} */ ($e(
+            const contentTypeInput = /** @type {HTMLInputElement} */ ($e(
               metadataFieldset,
               '.contentType'
-            )).value = file.type;
+            ));
+            contentTypeInput.value = file.type;
+            contentTypeInput.setCustomValidity(
+              getValidationMessage(checkFileMimeType(file.type, mime)) ?? ''
+            );
 
             /** @type {HTMLInputElement} */ ($e(
               metadataFieldset,
@@ -429,12 +566,20 @@ const fileType = {
               ? getDateString(file.lastModified)
               : '';
 
-            /** @type {HTMLButtonElement & {$value: File|undefined}} */ ($e(
+            const viewBinary = /** @type {FileButton} */ ($e(
               metadataFieldset,
               'button.viewBinary'
-            )).$value = typeof file.lastModified === 'number'
+            ));
+            viewBinary.$value = typeof file.lastModified === 'number'
               ? /** @type {File} */ (file)
               : undefined;
+            const message = checkFile(
+              viewBinary.$value,
+              viewBinary.$min,
+              viewBinary.$max,
+              viewBinary.$mime
+            );
+            viewBinary.setCustomValidity(getValidationMessage(message) ?? '');
           }
         }
       }, [
@@ -465,7 +610,11 @@ const fileType = {
         ]],
         ['br'],
         ['label', [
-          'Size (in bytes) ',
+          `Size (in bytes)${
+            min !== undefined || max !== undefined
+              ? ` (min: ${min ?? 0}${max === undefined ? '' : `, max: ${max}`})`
+              : ''
+          } `,
           ['input', {
             type: 'number', step: '1', disabled: true, class: 'size',
             value: String(value.size)
@@ -473,11 +622,16 @@ const fileType = {
         ]],
         ['br'],
         ['label', [
-          'Content type ',
+          `Content type${
+            mime && mime.length > 0 ? ` (allowed: ${mime.join(', ')})` : ''
+          } `,
           ['input', {
             class: 'contentType', value: value.type ?? '',
+            list: contentTypeListId,
             $on: {
               change () {
+                // eslint-disable-next-line consistent-this -- Clarity
+                const input = /** @type {HTMLInputElement} */ (this);
                 const viewBinary =
                   /**
                    * @type {HTMLButtonElement & {$value: File}}
@@ -489,15 +643,29 @@ const fileType = {
                     )
                   );
 
-                const newContentType =
-                  /** @type {HTMLInputElement} */ (this).value;
-                newFileForBinary(viewBinary, {
+                const newContentType = input.value;
+                const file = createFileForBinary(viewBinary, {
                   type: newContentType
                 });
+                const message = checkFile(file, min, max, mime);
+                const validationMessage = getValidationMessage(message);
+                input.setCustomValidity(validationMessage ?? '');
+                if (message) {
+                  dialogs.alert(validationMessage ?? message);
+                  input.reportValidity();
+                  return;
+                }
+                newFileForBinary(viewBinary, {type: newContentType});
               }
             }
           }]
         ]],
+        ['datalist', {
+          id: contentTypeListId,
+          class: 'contentTypeOptions'
+        }, contentTypeOptions.map((mimeType) => {
+          return ['option', [mimeType]];
+        })],
         ['br'],
         ['label', [
           'Last modified date ',
@@ -530,7 +698,7 @@ const fileType = {
           }]
         ]],
         ['br'],
-        binaryButton(value, true),
+        binaryButton(value, true, min, max, mime, getValidationMessage),
         ['button', {
           class: 'clearData',
           $on: {
@@ -554,18 +722,23 @@ const fileType = {
         ['legend', ['Supply file through upload']],
         ['label', [
           'File ',
-          // @ts-expect-error It's ok
-          ['input', /** @type {import('jamilih').JamilihAttributes} */ ({
+          ['input', {
             $on: {
-              /**
-               * @this {HTMLInputElement}
-               */
               change () {
+                // eslint-disable-next-line consistent-this -- Clarity
+                const input = /** @type {HTMLInputElement} */ (this);
                 /* istanbul ignore if -- TS */
-                if (!this.files) {
+                if (!input.files) {
+                  return;
+                }
+                const file = input.files[0];
+
+                const message = checkFile(file, min, max, mime);
+                if (message) {
+                  dialogs.alert(getValidationMessage(message) ?? message);
+                  input.value = '';
                   return;
                 }
-                const file = this.files[0];
 
                 const metadataFieldset =
                   /**
@@ -578,8 +751,9 @@ const fileType = {
                 metadataFieldset.$setValue(file);
               }
             },
+            accept: mime?.join(','),
             name: `${typeNamespace}-file`, type: 'file'
-          })]
+          }]
         ]]
       ]],
       ['fieldset', [
@@ -819,15 +993,11 @@ const fileType = {
         })(),
         ' ',
         ['div', [
-          // @ts-expect-error It's ok
-          ['button', /** @type {import('jamilih').JamilihAttributes} */ ({
+          ['button', {
             class: 'recordMedia',
             $on: {
               /**
                * @param {Event} e
-               * @this {HTMLButtonElement & {
-               *   $mediaRecorder: MediaRecorder
-               * }}
                */
               click (e) {
                 e.preventDefault();
@@ -910,6 +1080,13 @@ const fileType = {
                   );
                   console.log('file', file);
 
+                  const message = checkFile(file, min, max, mime);
+                  if (message) {
+                    dialogs.alert(getValidationMessage(message) ?? message);
+                    chunks = [];
+                    return;
+                  }
+
                   const root = /** @type {HTMLDivElement} */
                     (this.closest('[data-type="file"]'));
                   /**
@@ -923,13 +1100,16 @@ const fileType = {
                   chunks = [];
                 });
 
-                this.$mediaRecorder = mediaRecorder;
+                (
+                  /** @type {HTMLButtonElement & {$mediaRecorder: MediaRecorder}} */
+                  (this)
+                ).$mediaRecorder = mediaRecorder;
 
                 // Todo: Could make option for front/back
                 //         camera ("user"/"environment") and bringIntoFocus
               }
             }
-          }), [
+          }, [
             'Record media'
           ]],
           ['button', {
@@ -1037,6 +1217,12 @@ const fileType = {
                   );
                   console.log('file', file);
 
+                  const message = checkFile(file, min, max, mime);
+                  if (message) {
+                    dialogs.alert(getValidationMessage(message) ?? message);
+                    return;
+                  }
+
                   const root = /** @type {HTMLDivElement} */
                     (this.closest('[data-type="file"]'));
                   /**
@@ -1067,7 +1253,7 @@ const fileType = {
           [
             'div',
             {class: 'recordedMedia'},
-            /** @type {import('jamilih').JamilihChildren} */ ([
+            [
               ...(() => {
                 const recordedMedia = jml(
                   'video', {class: 'recordedMedia'}
@@ -1112,7 +1298,7 @@ const fileType = {
                   ])
                 ];
               })()
-            ])
+            ]
           ]
         ]]
       ]]