Enhance file upload functionality: Implemented local handling of file uploads in the new record flow to prevent premature API calls. Added support for displaying file upload counts in modular lists and ensured proper upload handling after record creation. Updated related components for improved user experience and error handling.

Author: kodinkat

dt-assets/build/components/index.es.js

@@ -1,4 +1,4 @@
-import { E as e, C as s, x as D, B as o, D as l, a as i, b as n, d as r, e as c, f as p, u, w as C, A as M, g as T, h as m, i as x, j as S, y as d, k as g, t as B, r as h, l as v, m as A, n as b, o as F, p as L, z as f, q as y, c as U, v as j } from "./index-C6N3z3OQ.js";
+import { E as e, C as s, x as D, B as o, D as l, a as i, b as n, d as r, e as c, f as p, u, w as C, A as M, g as T, h as m, i as x, j as S, y as d, k as g, t as B, r as h, l as v, m as A, n as b, o as F, p as L, z as f, q as y, c as U, v as j } from "./index-v5iDo3ut.js";
 export {
   e as ApiService,
   s as ComponentService,

dt-assets/build/components/index.js

@@ -1321,6 +1321,17 @@
               }
             } else if (field_settings.type === 'image') {
               values = [`<img src='${field_value.thumb}' class='list-image'>`];
+            } else if (field_settings.type === 'file_upload') {
+              const fileCount = Array.isArray(field_value)
+                ? field_value.length
+                : Array.isArray(field_value?.values)
+                  ? field_value.values.length
+                  : 0;
+              if (fileCount > 0) {
+                values = [
+                  `${window.SHAREDFUNCTIONS.escapeHTML(String(fileCount))} ${fileCount === 1 ? 'file' : 'files'}`,
+                ];
+              }
             }
           } else if (
             !field_value &&

dt-assets/build/components/index.umd.cjs

@@ -16,6 +16,20 @@ jQuery(function ($) {
   window.post_type_fields =
     window.new_record_localized.post_type_settings.fields;
 
+  // New record flow: keep file uploads local until record is created.
+  // This prevents API upload attempts against non-existent post IDs.
+  const fileUploadComponents = Array.from(
+    document.querySelectorAll('dt-file-upload'),
+  );
+  fileUploadComponents.forEach((component) => {
+    // Keep configured auto/manual UI behavior, but clear API bindings so
+    // uploads are deferred until after the record is created.
+    component.removeAttribute('post-type');
+    component.removeAttribute('post-id');
+    component.removeAttribute('meta-key');
+    component.removeAttribute('key-prefix');
+  });
+
   // focus first field in the form
   document.querySelector('.form-fields [name]').focus();
 
@@ -199,6 +213,7 @@ jQuery(function ($) {
 
       // build form values
       const form = event.target;
+      const pendingFileUploads = [];
       Array.from(form.querySelectorAll('*')).forEach((el) => {
         // skip fields like `field_name[query]` that are from typeaheads
         // and skip values not from web components
@@ -210,6 +225,22 @@ jQuery(function ($) {
           return;
         }
 
+        // file_upload fields on new record are uploaded only after create succeeds
+        if (el.tagName === 'DT-FILE-UPLOAD') {
+          const files =
+            typeof el.getPendingFilesForUpload === 'function'
+              ? Array.from(el.getPendingFilesForUpload())
+              : Array.from(el.stagedFiles || []);
+          if (files.length > 0) {
+            pendingFileUploads.push({
+              fieldKey: el.name.trim(),
+              files,
+              component: el,
+            });
+          }
+          return;
+        }
+
         if (el.value) {
           new_post[el.name.trim()] =
             window.DtWebComponents.ComponentService.convertValue(
@@ -254,11 +285,80 @@ jQuery(function ($) {
 
       window.componentService.api
         .createPost(window.new_record_localized.post_type, new_post)
-        .then((response) => {
+        .then(async (response) => {
+          const createdPostId = parseInt(
+            response?.ID || response?.id || response?.post_id,
+            10,
+          );
+
+          console.groupCollapsed('[new-record] upload debug');
+          console.log('post_type', window.new_record_localized.post_type);
+          console.log('createPost response', response);
+          console.log('resolved createdPostId', createdPostId);
+          console.log(
+            'pending file upload fields',
+            pendingFileUploads.map((upload) => ({
+              fieldKey: upload.fieldKey,
+              files: upload.files.map((file) => ({
+                name: file.name,
+                size: file.size,
+                type: file.type,
+              })),
+            })),
+          );
+          console.groupEnd();
+
+          if (pendingFileUploads.length > 0) {
+            if (!createdPostId) {
+              console.error(
+                '[new-record] missing createdPostId from createPost response',
+                response,
+              );
+              throw new Error(
+                'Unable to determine created record ID for file uploads.',
+              );
+            }
+            for (const upload of pendingFileUploads) {
+              const keyPrefix = `${window.new_record_localized.post_type}/${createdPostId}/${upload.fieldKey}`;
+              console.log('[new-record] uploadFiles request', {
+                postType: window.new_record_localized.post_type,
+                postId: createdPostId,
+                fieldKey: upload.fieldKey,
+                keyPrefix,
+                fileCount: upload.files.length,
+              });
+              try {
+                await window.componentService.api.uploadFiles(
+                  window.new_record_localized.post_type,
+                  createdPostId,
+                  upload.files,
+                  upload.fieldKey,
+                  keyPrefix,
+                );
+              } catch (uploadError) {
+                console.error('[new-record] uploadFiles failed', {
+                  fieldKey: upload.fieldKey,
+                  error: uploadError,
+                  args: uploadError?.args,
+                });
+                upload.component.setAttribute(
+                  'error',
+                  uploadError?.message || 'Upload failed',
+                );
+                throw uploadError;
+              }
+            }
+          }
+
           window.location = response.permalink;
         })
         .catch(function (error) {
-          const message = error.responseJSON?.message || error.responseText;
+          console.error('[new-record] submit failed', error);
+          const message =
+            error?.message ||
+            error?.responseJSON?.message ||
+            error?.responseText ||
+            'Unable to save record.';
           $('.js-create-post-button')
             .removeClass('loading')
             .addClass('alert')

dt-assets/js/modular-list.js

@@ -81,16 +81,20 @@
     width: auto;
     height: auto;
     min-width: 33%;
+    max-height: 90vh;
     background: #fefefe;
     border: 1px solid #cacaca;
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
+    overflow: hidden;
 }
 .modal-back {
     transform: rotateY(180deg);
 }
 .dt-admin-modal-box-content {
     padding: 1rem;
+    max-height: calc(90vh - 2rem);
+    overflow-y: auto;
 }
 .tile-rundown-elements {
     margin-top: -1px;