underpost 3.2.9 → 3.2.10

package/src/cli/run.js

@@ -24,6 +24,7 @@ import { range, setPad, timer } from '../client/components/core/CommonJs.js';
 import os from 'os';
 import Underpost from '../index.js';
 import dotenv from 'dotenv';
+import { MongoBootstrap } from '../db/mongo/MongoBootstrap.js';
 
 const waitForPort = (port, host = '127.0.0.1', { maxAttempts = 30, interval = 2000 } = {}) =>
   new Promise((resolve, reject) => {
@@ -97,6 +98,7 @@ const logger = loggerFactory(import.meta);
  * @property {string} deployId - The deployment ID.
  * @property {string} instanceId - The instance ID.
  * @property {string} user - The user to run as.
+ * @property {string} group - The group to use.
  * @property {string} pid - The process ID.
  * @property {boolean} disablePrivateConfUpdate - Whether to disable private configuration updates.
  * @property {string} monitorStatus - The monitor status option.
@@ -165,6 +167,7 @@ const DEFAULT_OPTION = {
   deployId: '',
   instanceId: '',
   user: '',
+  group: '',
   pid: '',
   disablePrivateConfUpdate: false,
   monitorStatus: '',
@@ -225,7 +228,7 @@ class UnderpostRun {
         // Detect MongoDB primary pod using method
         let primaryMongoHost = 'mongodb-0.mongodb-service';
         try {
-          const primaryPodName = Underpost.db.getMongoPrimaryPodName({
+          const primaryPodName = MongoBootstrap.getPrimaryPodName({
             namespace: options.namespace,
             podName: 'mongodb-0',
           });
@@ -505,14 +508,16 @@ class UnderpostRun {
     },
     /**
      * @method docker-image
-     * @description Dispatches the Docker image CI workflow (`docker-image.ci.yml`) for the `engine` repository via `workflow_dispatch`.
-     * @param {string} path - The input value, identifier, or path for the operation.
+     * @description Dispatches the Docker image CI workflow (`docker-image[.<runtime>].ci.yml`) via `workflow_dispatch`.
+     * Repository resolution is delegated to `Underpost.repo.resolveInstanceRepo(path)`.
+     * @param {string} path - Optional runtime / workflow suffix (e.g. `cyberia-server`, `cyberia-client`).
      * @param {Object} options - The default underpost runner options for customizing workflow
      * @memberof UnderpostRun
      */
     'docker-image': (path, options = DEFAULT_OPTION) => {
+      const repo = Underpost.repo.resolveInstanceRepo(path);
       Underpost.repo.dispatchWorkflow({
-        repo: `${process.env.GITHUB_USERNAME}/engine`,
+        repo,
         workflowFile: `docker-image${path ? `.${path}` : ''}.ci.yml`,
         ref: 'master',
         inputs: {},
@@ -536,16 +541,14 @@ class UnderpostRun {
      * @memberof UnderpostRun
      */
     pull: (path, options = DEFAULT_OPTION) => {
+      // shellExec is fail-fast by default — any non-zero exit throws and
+      // propagates up to the workflow step. No per-call flag required.
       if (!fs.existsSync(`/home/dd`) || !fs.existsSync(`/home/dd/engine`)) {
         fs.mkdirSync(`/home/dd`, { recursive: true });
-        shellExec(`cd /home/dd && underpost clone ${process.env.GITHUB_USERNAME}/engine`, {
-          silent: true,
-        });
+        shellExec(`cd /home/dd && underpost clone ${process.env.GITHUB_USERNAME}/engine`, { silent: true });
       } else {
         shellExec(`underpost run clean`);
-        shellExec(`cd /home/dd/engine && underpost pull . ${process.env.GITHUB_USERNAME}/engine`, {
-          silent: true,
-        });
+        shellExec(`cd /home/dd/engine && underpost pull . ${process.env.GITHUB_USERNAME}/engine`, { silent: true });
       }
       if (!fs.existsSync(`/home/dd/engine/engine-private`))
         shellExec(`cd /home/dd/engine && underpost clone ${process.env.GITHUB_USERNAME}/engine-private`, {
@@ -554,9 +557,7 @@ class UnderpostRun {
       else
         shellExec(
           `cd /home/dd/engine/engine-private && underpost pull . ${process.env.GITHUB_USERNAME}/engine-private`,
-          {
-            silent: true,
-          },
+          { silent: true },
         );
     },
     /**
@@ -643,6 +644,11 @@ echo -e "[code]\nname=Visual Studio Code\nbaseurl=https://packages.microsoft.com
     /**
      * @method sync
      * @description Cleans up, and then runs a deployment synchronization command (`underpost deploy --kubeadm --build-manifest --sync...`) using parameters parsed from `path` (deployId, replicas, versions, image, node).
+     *
+     * Forwards `--image-pull-policy <policy>` to the underlying `deploy --build-manifest` invocation when `options.imagePullPolicy` is set,
+     * which then plumbs through `buildManifest` and `deploymentYamlPartsFactory` to override the container `imagePullPolicy` in the generated
+     * `deployment.yaml`. Useful when you want to force `Always` so the kubelet re-pulls a mutable tag on every rollout. Example:
+     *   `node bin run sync dd-core --kubeadm --image-pull-policy Always`
      * @param {string} path - The input value, identifier, or path for the operation (used as a comma-separated string containing deploy parameters).
      * @param {Object} options - The default underpost runner options for customizing workflow
      * @memberof UnderpostRun
@@ -700,13 +706,14 @@ echo -e "[code]\nname=Visual Studio Code\nbaseurl=https://packages.microsoft.com
 
       const skipFullBuildFlag = options.skipFullBuild ? ' --skip-full-build' : '';
       const pullBundleFlag = options.pullBundle ? ' --pull-bundle' : '';
+      const imagePullPolicyFlag = options.imagePullPolicy ? ` --image-pull-policy ${options.imagePullPolicy}` : '';
 
       shellExec(
         `${baseCommand} deploy${clusterFlag} --build-manifest --sync --info-router --replicas ${replicas} --node ${node}${
           image ? ` --image ${image}` : ''
         }${versions ? ` --versions ${versions}` : ''}${
           options.namespace ? ` --namespace ${options.namespace}` : ''
-        }${timeoutFlags}${cmdString}${gitCleanFlag}${skipFullBuildFlag}${pullBundleFlag} ${deployId} ${env}`,
+        }${timeoutFlags}${cmdString}${gitCleanFlag}${skipFullBuildFlag}${pullBundleFlag}${imagePullPolicyFlag} ${deployId} ${env}`,
       );
 
       if (isDeployRunnerContext(path, options)) {
@@ -717,7 +724,7 @@ echo -e "[code]\nname=Visual Studio Code\nbaseurl=https://packages.microsoft.com
         shellExec(
           `${baseCommand} deploy${clusterFlag}${cmdString} --replicas ${replicas} --disable-update-proxy ${deployId} ${env} --versions ${versions}${
             options.namespace ? ` --namespace ${options.namespace}` : ''
-          }${timeoutFlags}${gitCleanFlag}`,
+          }${timeoutFlags}${gitCleanFlag}${imagePullPolicyFlag}`,
         );
         if (!targetTraffic)
           targetTraffic = Underpost.deploy.getCurrentTraffic(deployId, { namespace: options.namespace });
@@ -1023,6 +1030,9 @@ EOF
           cmd: _cmd,
           volumes: _volumes,
           metadata: _metadata,
+          lifecycle: _lifecycle,
+          readinessProbe: _readinessProbe,
+          livenessProbe: _livenessProbe,
         } = instance;
         if (id !== _id) continue;
         const _deployId = `${deployId}-${_id}`;
@@ -1087,6 +1097,20 @@ EOF
           ),
         );
 
+        // Resolve env-scoped lifecycle/probe blocks: each can be either
+        //   { ...envObj }                        // shared shape
+        //   { development: {...}, production: {...} }   // env-specific
+        const pickEnv = (v) => (v && (v.development || v.production) ? v[env] : v);
+
+        // Convention: an instance config may place `imagePullPolicy` inside
+        // the env-scoped lifecycle block (alongside postStart/preStop).
+        // Extract it onto the container spec (where K8S expects it) and
+        // strip it from the lifecycle hash so the rendered YAML stays valid.
+        // CLI override (`--image-pull-policy`) wins over the conf value.
+        const { lifecycle: lifecycleForManifest, imagePullPolicy: lifecycleImagePullPolicy } =
+          Underpost.deploy.extractInstanceImagePullPolicy(pickEnv(_lifecycle));
+        const instanceImagePullPolicy = options.imagePullPolicy || lifecycleImagePullPolicy;
+
         let deploymentYaml = `---
 ${Underpost.deploy
   .deploymentYamlPartsFactory({
@@ -1099,6 +1123,11 @@ ${Underpost.deploy
     namespace: options.namespace,
     volumes: _volumes,
     cmd: resolvedCmd,
+    lifecycle: lifecycleForManifest,
+    readinessProbe: pickEnv(_readinessProbe),
+    livenessProbe: pickEnv(_livenessProbe),
+    containerPort: _toPort,
+    imagePullPolicy: instanceImagePullPolicy,
   })
   .replace('{{ports}}', buildKindPorts(_fromPort, _toPort))}
 `;
@@ -1187,14 +1216,34 @@ EOF
         volumes: _volumes,
         metadata: _metadata,
         runtime: _runtime,
+        lifecycle: _lifecycle,
+        readinessProbe: _readinessProbe,
+        livenessProbe: _livenessProbe,
       } = instance;
 
-      // Resolve Dockerfile source: use runtime-specific path when instance defines a runtime.
-      const dockerfileSourcePath = _runtime ? `src/runtime/${_runtime}/Dockerfile` : `${rootPath}/Dockerfile`;
-      if (fs.existsSync(dockerfileSourcePath)) {
+      // Resolve Dockerfile source. Dev/prod variant rules:
+      //   - When the instance defines a `runtime`, look under
+      //     `src/runtime/<runtime>/`. In `--dev` mode prefer `Dockerfile.dev`
+      //     when it exists, falling back to `Dockerfile`.
+      //   - When `runtime` is not set, look in the project root with the
+      //     same `.dev` → no-suffix precedence.
+      // Dockerfile.dev is a full Dockerfile (not an overlay) — each runtime
+      // owns the contract between its dev image and its prod image (debug
+      // build flags, extra tooling, default ports, etc.).
+      const dockerfileBase = _runtime ? `src/runtime/${_runtime}` : rootPath;
+      const dockerfileCandidates = options.dev
+        ? [`${dockerfileBase}/Dockerfile.dev`, `${dockerfileBase}/Dockerfile`]
+        : [`${dockerfileBase}/Dockerfile`];
+      const dockerfileSourcePath = dockerfileCandidates.find((p) => fs.existsSync(p));
+      if (dockerfileSourcePath) {
+        if (options.dev && !dockerfileSourcePath.endsWith('.dev')) {
+          logger.warn(
+            `[instance-build-manifest] --dev requested but no Dockerfile.dev present; falling back to ${dockerfileSourcePath}`,
+          );
+        }
         fs.copyFileSync(dockerfileSourcePath, dockerfileManifestPath);
       } else {
-        logger.warn(`[instance-build-manifest] Dockerfile not found at ${dockerfileSourcePath}`);
+        logger.warn(`[instance-build-manifest] Dockerfile not found; tried: ${dockerfileCandidates.join(', ')}`);
       }
 
       const _deployId = `${deployId}-${_id}`;
@@ -1239,6 +1288,17 @@ EOF
         ),
       );
 
+      // Env-aware lifecycle / probe selection. Each block may either be
+      // a single object (shared across envs) or `{ development, production }`.
+      const pickEnv = (v) => (v && (v.development || v.production) ? v[env] : v);
+
+      // Convention: an instance config may place `imagePullPolicy` inside
+      // the env-scoped lifecycle block (alongside postStart/preStop).
+      // Extract it onto the container spec and strip it from the lifecycle hash.
+      const { lifecycle: lifecycleForManifest, imagePullPolicy: lifecycleImagePullPolicy } =
+        Underpost.deploy.extractInstanceImagePullPolicy(pickEnv(_lifecycle));
+      const instanceImagePullPolicy = options.imagePullPolicy || lifecycleImagePullPolicy;
+
       const deploymentYaml =
         `---\n` +
         Underpost.deploy
@@ -1252,6 +1312,11 @@ EOF
             namespace: options.namespace,
             volumes: _volumes,
             cmd: resolvedCmd,
+            lifecycle: lifecycleForManifest,
+            readinessProbe: pickEnv(_readinessProbe),
+            livenessProbe: pickEnv(_livenessProbe),
+            containerPort: _toPort,
+            imagePullPolicy: instanceImagePullPolicy,
           })
           .replace('{{ports}}', buildKindPorts(_fromPort, _toPort));
 
@@ -1330,9 +1395,9 @@ EOF`);
       // crictl is in the kubernetes repo but excluded by default — install it explicitly
       shellExec(`sudo yum install -y cri-tools --disableexcludes=kubernetes`);
       // Ensure CRI-O uses systemd cgroup driver (matches kubelet default)
-      shellExec(
-        `sudo sed -i 's/^#\?cgroup_manager =.*/cgroup_manager = "systemd"/' /etc/crio/crio.conf 2>/dev/null || true`,
-      );
+      shellExec(`sudo sed -i 's/^#\?cgroup_manager =.*/cgroup_manager = "systemd"/' /etc/crio/crio.conf`, {
+        silentOnError: true,
+      });
       shellExec(`sudo systemctl enable --now crio`);
       logger.info('CRI-O installed and started.');
       // Write crictl config so all crictl calls default to the CRI-O socket
@@ -2180,15 +2245,23 @@ EOF`);
      * @memberof UnderpostRun
      */
     kill: (path = '', options = DEFAULT_OPTION) => {
-      if (options.pid) return shellExec(`sudo kill -9 ${options.pid}`);
+      if (options.pid)
+        return shellExec(`sudo kill -9 ${options.pid}`, {
+          silentOnError: true,
+        });
       for (const _path of path.split(',')) {
         if (_path.split('+')[1]) {
           let [port, sumPortOffSet] = _path.split('+');
           port = parseInt(port);
           sumPortOffSet = parseInt(sumPortOffSet);
           for (const sumPort of range(0, sumPortOffSet))
-            shellExec(`sudo kill -9 $(lsof -t -i:${parseInt(port) + parseInt(sumPort)})`);
-        } else shellExec(`sudo kill -9 $(lsof -t -i:${_path})`);
+            shellExec(`sudo kill -9 $(lsof -t -i:${parseInt(port) + parseInt(sumPort)})`, {
+              silentOnError: true,
+            });
+        } else
+          shellExec(`sudo kill -9 $(lsof -t -i:${_path})`, {
+            silentOnError: true,
+          });
       }
     },
     /**
@@ -2545,6 +2618,60 @@ EOF`;
         }
       }
     },
+
+    /**
+     * @method setup-shared-dir
+     * @description Run once for initial shared-directory setup. Creates the group, adds the user,
+     * creates the directory, sets ownership, applies the SGID bit, and configures default ACLs so
+     * all future files inside the directory automatically inherit group write permissions.
+     * Use `reload-shared-dir` for subsequent permission repairs without recreating the group.
+     * @param {string} path - Target directory to set up (defaults to `/home/dd/engine`).
+     *   Customise via the `path` argument or leave empty to use the default.
+     * @param {Object} options - The default underpost runner options for customizing workflow.
+     *   Key fields: `options.user` (default `'admin'`), `options.group` (default `'engine-dev'`).
+     * @memberof UnderpostRun
+     */
+    'setup-shared-dir': (path = '/home/dd/engine', options = DEFAULT_OPTION) => {
+      const dir = path || '/home/dd/engine';
+      const user = options.user || 'admin';
+      const group = options.group || 'engine-dev';
+
+      logger.info(`[setup-shared-dir] dir=${dir} user=${user} group=${group}`);
+
+      shellExec(`sudo groupadd ${group} 2>/dev/null || true`);
+      shellExec(`sudo usermod -aG ${group} ${user}`);
+      shellExec(`sudo mkdir -p ${dir}`);
+      shellExec(`sudo chown -R ${user}:${group} ${dir}`);
+      shellExec(`sudo chmod -R 2775 ${dir}`);
+      shellExec(`sudo setfacl -d -m g:${group}:rwx ${dir}`);
+      shellExec(`sudo setfacl -m g:${group}:rwx ${dir}`);
+
+      logger.info(`[setup-shared-dir] Shared directory setup complete: ${dir}`);
+    },
+
+    /**
+     * @method reload-shared-dir
+     * @description Re-applies recursive permissions and ACLs to repair permission drift on an
+     * already-configured shared directory. Does **not** recreate the group, add users, or modify
+     * ownership. Use this after VS Code permission errors or when existing files lose group write
+     * access due to tool or process interference.
+     * @param {string} path - Target directory to repair (defaults to `/home/dd/engine`).
+     *   Customise via the `path` argument or leave empty to use the default.
+     * @param {Object} options - The default underpost runner options for customizing workflow.
+     *   Key fields: `options.group` (default `'engine-dev'`).
+     * @memberof UnderpostRun
+     */
+    'reload-shared-dir': (path = '/home/dd/engine', options = DEFAULT_OPTION) => {
+      const dir = path || '/home/dd/engine';
+      const group = options.group || 'engine-dev';
+
+      logger.info(`[reload-shared-dir] dir=${dir} group=${group}`);
+
+      shellExec(`sudo chmod -R 2775 ${dir}`);
+      shellExec(`sudo setfacl -R -m g:${group}:rwx ${dir}`);
+
+      logger.info(`[reload-shared-dir] Shared directory permissions reloaded: ${dir}`);
+    },
   };
 
   static API = {

package/src/cli/test.js

@@ -4,6 +4,7 @@
  * @namespace UnderpostTest
  */
 
+import fs from 'fs-extra';
 import { timer } from '../client/components/core/CommonJs.js';
 import { MariaDB } from '../db/mariadb/MariaDB.js';
 import { getNpmRootPath } from '../server/conf.js';
@@ -42,7 +43,13 @@ class UnderpostTest {
      */
     run() {
       actionInitLog();
-      shellExec(`cd ${getNpmRootPath()}/underpost && npm run test`);
+      const underpostTestPath = `${getNpmRootPath()}/underpost`;
+      if (fs.existsSync(underpostTestPath)) {
+        shellExec(`cd ${underpostTestPath} && npm run test`);
+      } else {
+        logger.warn(`Global underpost not found at ${underpostTestPath}, running local npm test instead`);
+        shellExec('npm test');
+      }
     },
     /**
      * @method callback
@@ -148,8 +155,7 @@ class UnderpostTest {
           const pods = Underpost.kubectl.get(podName, kindType);
           let result = pods.find((p) => p.STATUS === status || (status === 'Running' && p.STATUS === 'Completed'));
           logger.info(
-            `Testing pod ${podName}... ${result ? 1 : 0}/1 - elapsed time ${deltaMs * (index + 1)}s - attempt ${
-              index + 1
+            `Testing pod ${podName}... ${result ? 1 : 0}/1 - elapsed time ${deltaMs * (index + 1)}s - attempt ${index + 1
             }/${maxAttempts}`,
             pods[0] ? pods[0].STATUS : 'Not found kind object',
           );

package/src/client/Default.index.js

@@ -19,6 +19,12 @@ const DefaultTemplate = async () => {
     });
   });
   return html`
+    <style>
+      .feature-icon {
+        font-size: 2.5rem;
+        margin-bottom: 1rem;
+      }
+    </style>
     <div class="landing-container">
       <div class="content-wrapper">
         <h1 class="animated-text">
@@ -27,17 +33,17 @@ const DefaultTemplate = async () => {
         </h1>
         <div class="features">
           <div class="feature-card">
-            <i class="icon">🚀</i>
+            <i class="fas fa-rocket feature-icon"></i>
             <h3>Fast &amp; Reliable</h3>
             <p>Lightning-fast performance with 99.9% uptime</p>
           </div>
           <div class="feature-card">
-            <i class="icon">🎨</i>
+            <i class="fas fa-palette feature-icon"></i>
             <h3>Beautiful UI</h3>
             <p>Modern and intuitive user interface</p>
           </div>
           <div class="feature-card">
-            <i class="icon">⚡</i>
+            <i class="fas fa-bolt feature-icon"></i>
             <h3>Powerful Features</h3>
             <p>Everything you need in one place</p>
           </div>

package/src/client/components/core/Auth.js

@@ -319,6 +319,10 @@ class Auth {
       // Close any open login/signup modals
       if (s(`.modal-log-in`)) s(`.btn-close-modal-log-in`).click();
       if (s(`.modal-sign-up`)) s(`.btn-close-modal-sign-up`).click();
+      if (!s(`.main-body-btn-ui-open`).classList.contains('hide'))
+        s(`.main-body-btn-ui-open`).click();
+      if (!s(`.main-body-btn-ui-bar-custom-open`).classList.contains('hide'))
+        s(`.main-body-btn-ui-bar-custom-open`).click();
     });
   }
 

package/src/client/components/core/PanelForm.js

@@ -73,7 +73,7 @@ class PanelForm {
       parentIdModal: undefined,
       route: 'home',
       htmlFormHeader: async () => '',
-      firsUpdateEvent: async () => {},
+      firsUpdateEvent: async () => { },
       share: {
         copyLink: false,
         copySourceMd: false,
@@ -196,12 +196,12 @@ class PanelForm {
               <img
                 class="abs center"
                 style="${renderCssAttr({
-                  style: {
-                    width: '100px',
-                    height: '100px',
-                    opacity: 0.2,
-                  },
-                })}"
+              style: {
+                width: '100px',
+                height: '100px',
+                opacity: 0.2,
+              },
+            })}"
                 src="${defaultUrlImage}"
               />
             `,
@@ -332,16 +332,10 @@ class PanelForm {
             }, 50);
           },
           initEdit: async function ({ data }) {
-            // Clear file input when entering edit mode
-            const fileFormData = formData.find((f) => f.inputType === 'file');
-            if (fileFormData && s(`.${fileFormData.id}`)) {
-              s(`.${fileFormData.id}`).value = '';
-              s(`.${fileFormData.id}`).inputFiles = null;
-              htmls(
-                `.file-name-render-${fileFormData.id}`,
-                `<div class="abs center"><i style="font-size: 25px" class="fa-solid fa-cloud"></i></div>`,
-              );
-            }
+            // Do NOT clear the file input here - the file should remain as-is when entering edit mode.
+            // If user wants to remove the file, they use the "clean file" button.
+            // If user wants to replace the file, they select a new file.
+            // Unconditionally clearing the file here would cause the server to receive fileId: null on save.
             setTimeout(() => {
               s(`.modal-${options.route}`).scrollTo({ top: 0, behavior: 'smooth' });
             }, 50);
@@ -388,15 +382,15 @@ class PanelForm {
             // It will be filtered from the tags array to keep visibility control separate from content tags
             const tags = data.tags
               ? uniqueArray(
-                  data.tags
-                    .replaceAll('/', ',')
-                    .replaceAll('-', ',')
-                    .replaceAll(' ', ',')
-                    .split(',')
-                    .map((t) => t.trim())
-                    .filter((t) => t)
-                    .concat(prefixTags),
-                )
+                data.tags
+                  .replaceAll('/', ',')
+                  .replaceAll('-', ',')
+                  .replaceAll(' ', ',')
+                  .split(',')
+                  .map((t) => t.trim())
+                  .filter((t) => t)
+                  .concat(prefixTags),
+              )
               : prefixTags;
             let originObj, originFileObj, indexOriginObj;
             if (editId) {
@@ -434,7 +428,17 @@ class PanelForm {
             for (const file of inputFiles) {
               indexFormDoc++;
               let fileId = undefined; // Reset for each iteration - only set if user uploaded a file
+              // Track whether the file input was explicitly cleared (null) vs never had a file (undefined)
+              // In edit mode, null means user cleared the file - we need to tell server to remove it
+              const isFileCleared = data.fileId === null && editId;
               await (async () => {
+                // When file is null and not the first iteration or not in edit mode, skip upload
+                if (!file && !isFileCleared) return;
+                // When user cleared file in edit mode, set fileId=null so server removes the reference
+                if (isFileCleared) {
+                  fileId = null;
+                  return;
+                }
                 const body = new FormData();
                 // Only append md file if it was created (has content)
                 if (md) body.append('md', md);
@@ -485,8 +489,8 @@ class PanelForm {
                 message: documentMessage,
                 data: documentData,
               } = originObj && indexFormDoc === 0
-                ? await DocumentService.put({ id: originObj._id, body })
-                : await DocumentService.post({
+                  ? await DocumentService.put({ id: originObj._id, body })
+                  : await DocumentService.post({
                     body,
                   });
               const newDoc = {
@@ -514,12 +518,12 @@ class PanelForm {
                 fileId: {
                   fileBlob: file
                     ? {
-                        data: {
-                          data: await getDataFromInputFile(file),
-                        },
-                        mimetype: file.type,
-                        name: file.name,
-                      }
+                      data: {
+                        data: await getDataFromInputFile(file),
+                      },
+                      mimetype: file.type,
+                      name: file.name,
+                    }
                     : undefined,
                   filePlain: undefined,
                 },
@@ -738,36 +742,36 @@ class PanelForm {
             <div
               class="in fll ssr-shimmer-search-box"
               style="${renderCssAttr({
-                style: {
-                  width: '80%',
-                  height: '30px',
-                  top: '-13px',
-                  left: '10px',
-                },
-              })}"
+            style: {
+              width: '80%',
+              height: '30px',
+              top: '-13px',
+              left: '10px',
+            },
+          })}"
             ></div>
           </div>`,
           createdAt: html`<div class="fl">
             <div
               class="in fll ssr-shimmer-search-box"
               style="${renderCssAttr({
-                style: {
-                  width: '50%',
-                  height: '30px',
-                  left: '-5px',
-                },
-              })}"
+            style: {
+              width: '50%',
+              height: '30px',
+              left: '-5px',
+            },
+          })}"
             ></div>
           </div>`,
           mdFileId: html`<div class="fl section-mp">
             <div
               class="in fll ssr-shimmer-search-box"
               style="${renderCssAttr({
-                style: {
-                  width: '80%',
-                  height: '30px',
-                },
-              })}"
+            style: {
+              width: '80%',
+              height: '30px',
+            },
+          })}"
             ></div>
           </div>`.repeat(random(2, 4)),
           ssr: true,