=more CRUDSkeleton

Jake Vanderwerf

2026-02-10 bf69b2c2daeb2d5c1f9b1b3dfe99bfb62a739a9a

 assets/js/concise/UploadManager.js

@@ -10,6 +10,7 @@
      this.initStores();
      this.initWorker();


      //Maps for DOM references
      this.fields = new Map();
      this.uploads = new Map();
@@ -19,6 +20,8 @@
      this.selectionHandlers = new Map();
      this.sortables = new Map();

      this.changes = new Map();

      this.previewUrls = new Set();
      this.initElements();
      this.initListeners();
@@ -37,9 +40,12 @@
            video: 'video',
            file: 'label > span',
            details: 'details',
            alt: '[name="image-alt-text"]',
            title: '[name="image-title"]',
            description: '[name="image-caption"]',
         },
         manyRefs: {
            inputs: 'input',
            inputs: 'input, select, textarea',
         },
         setup({el, refs, manyRefs, data}) {
            const isNewUpload = Object.hasOwn(data, 'file');
@@ -103,7 +109,29 @@
                  break;
            }
            if (refs.details) {
               refs.details.append(T.create('uploadMeta'));
               if (Object.hasOwn(data, 'field') && Object.hasOwn(data.field,'config') && Object.hasOwn(data.field.config, 'showMeta') && !data.field.config.showMeta) {
                  refs.details.remove();
               } else {
                  if(Object.hasOwn(data, 'id')) {
                     refs.details.dataset.attachmentId = data.id;
                  } else if (Object.hasOwn(data, 'uploadId')) {
                     refs.details.dataset.uploadId = data.uploadId;
                  }
                  refs.details.setAttribute('data-ignore', '');


                  if (mimeType !== 'image' && refs.alt) {
                     refs.alt.closest('.field')?.remove();
                  } else if (Object.hasOwn(data, 'image-alt-text') && refs.alt) {
                     refs.alt.value = data['image-alt-text'];
                  }
                  if ((Object.hasOwn(data, 'title') || Object.hasOwn(data, 'file')) && refs.title) {
                     refs.title.value = data.title||data.file.name;
                  }
                  if (Object.hasOwn(data, 'image-caption') && refs.description) {
                     refs.description.value = data['image-caption'];
                  }
               }
            }


@@ -111,31 +139,13 @@

            if (manyRefs.inputs) {
               for (let input of manyRefs.inputs) {
                  window.prefixInput(input, `${data.uploadId}-`);
                  let wrapper = input.closest('[data-field]')??el;
                  window.prefixInput(input, `${data.id??data.uploadId}-`, wrapper);
               }
            }
         }
      });

      T.define('uploadMeta', {
         refs: {
            alt: '[name="alt_text"]',
            title: '[name="image-title"]',
            description: '[name="image-caption"]',
         },
         setup({el, refs, manyRefs, data}) {
            if (Object.hasOwn(data, 'alt') && refs.alt) {
               refs.alt.value = data.alt;
            }
            if (Object.hasOwn(data, 'title') && refs.title) {
               refs.title.value = data.title;
            }
            if (Object.hasOwn(data, 'description') && refs.description) {
               refs.description.value = data.description;
            }
         }
      });

      T.define('imageGroup', {
         refs: {
            selectAll: '[data-select-all]',
@@ -146,7 +156,8 @@
         setup({el, refs, manyRefs, data}) {
            el.dataset.groupId = data.groupId;
            if (refs.selectAll) {
               window.prefixInput(refs.selectAll, `select-all-${data.groupId}`, true);
               let wrapper = refs.selectAll.closest('.field');
               window.prefixInput(refs.selectAll, `select-all-${data.groupId}`, wrapper,true);
            }
            let fields = T.create('groupMetadata', {groupId: data.groupId});
            if (fields) {
@@ -167,7 +178,8 @@
         setup({el, refs, manyRefs, data}) {
            if (refs.inputs) {
               refs.inputs.forEach(input => {
                  window.prefixInput(input, `${data.groupId}-`);
                  let wrapper = input.closest('[data-field]');
                  window.prefixInput(input, `${data.groupId}-`, wrapper);
               });
            }
         }
@@ -209,7 +221,7 @@
            grid: '.item-grid'
         },
         async setup({el, refs, manyRefs, data}) {
            let fieldId = images.registerField(el, false, `recovery_${data.index}`);
            let fieldId = images.registerField(el, false, false, `recovery_${data.index}`);
            if (data.isCurrent) {
               el.open = true;

@@ -286,17 +298,83 @@
      this.queue.subscribe((event, operation) => {
         if ((event === 'operation-status' || event === 'cancel-operation')
            && ['image_upload', 'video_upload', 'document_upload'].includes(operation.type)) {
            const data = operation.data instanceof FormData
               ? this.stores.uploads.formDataToObject(operation.data)
               : operation.data;
            let uploadIds = [];

            let uploads = data['upload_ids'];
            if (!uploads || uploads.length === 0) return;
            if (event === 'cancel-operation') return this.handleOperationCancelled(uploads);
            this.setBulkUpload(uploads, 'status', operation.status).then(()=>{});
            if (operation.data) {
               // Handle FormData
               if (operation.data instanceof FormData) {
                  const dataObj = this.stores.uploads.formDataToObject(operation.data);
                  uploadIds = dataObj['upload_ids'] || [];
               }
               // Handle regular object
               else {
                  uploadIds = operation.data['upload_ids'] || [];
               }
            }

            // If not in data, check result (for completed operations from backend)
            if (uploadIds.length === 0 && operation.result && operation.result.upload_ids) {
               uploadIds = operation.result.upload_ids;
            }

            // Still no upload_ids? Log warning and bail
            if (!uploadIds || uploadIds.length === 0) {
               console.warn('[UploadManager] No upload_ids found for operation:', {
                  id: operation.id,
                  type: operation.type,
                  status: operation.status,
                  hasData: !!operation.data,
                  hasResult: !!operation.result
               });
               return;
            }

            // Handle cancellation
            if (event === 'cancel-operation') {
               return this.handleOperationCancelled(uploadIds);
            }

            // Update upload status based on operation status
            this.setBulkUpload(uploadIds, 'status', operation.status).then(() => {
               // Log for debugging
               console.log(`[UploadManager] Updated ${uploadIds.length} uploads to status: ${operation.status}`);
            });

            // Handle completion
            if (operation.status === 'completed') {
               uploads.forEach(upload => {
                  this.removeUpload(upload).then(()=>{});
               // For group uploads, mark as processed but keep for reference
               if (operation.type === 'process_upload_groups') {
                  uploadIds.forEach(uploadId => {
                     this.setBulkUpload([uploadId], 'serverProcessed', true).then(() => {});
                  });

                  // Log created posts if available
                  if (operation.result && operation.result.created_posts) {
                     console.log('[UploadManager] Created posts:', operation.result.created_posts);
                  }

                  // Remove uploads after a delay to allow UI to update
                  setTimeout(() => {
                     uploadIds.forEach(uploadId => {
                        this.removeUpload(uploadId).then(() => {});
                     });
                  }, 2000);
               }
               // For direct uploads, remove immediately
               else {
                  uploadIds.forEach(uploadId => {
                     this.removeUpload(uploadId).then(() => {});
                  });
               }
            }

            // Handle failures
            if (operation.status === 'failed' || operation.status === 'failed_permanent') {
               console.error('[UploadManager] Operation failed:', {
                  id: operation.id,
                  type: operation.type,
                  uploadIds: uploadIds,
                  error: operation.error_message
               });
            }
         }
@@ -336,7 +414,7 @@
         fields: {
            field: '[data-upload-field]',
            input: 'input[type="file"]',
            dropZone: '.file-upload-container',
            dropZone: '.file-upload-wrapper',
            preview: '.preview-wrap',
            grid: '.item-grid.preview',
            progress: {
@@ -417,6 +495,7 @@
      };

      const upload = { ...defaults, ...data };

      Object.preventExtensions(upload);
      await this.stores.uploads.save(upload);
      return upload;
@@ -488,8 +567,15 @@
         }
      }
   handleChange(e) {

      let fieldId = this.getFieldIdFromElement(e.target);
      if (!fieldId) return;
      if (!fieldId) {
         let isMeta = e.target.closest('[data-upload-id], [data-attachment-id]');
         if (isMeta) {
            this.queueUploadMeta(e);
         }
         return;
      }

      if (e.target.matches(this.selectors.fields.input)) {
         const files = Array.from(e.target.files);
@@ -505,12 +591,11 @@
      }

      let field = this.fields.get(fieldId);
      if (!field || !field.config.autoUpload) return;

      if (field.config.destination === 'post_group') {
         this.handleGroupMetaChange(e.target);
      } else {
         this.queueUploadMeta(e).then(()=>{});
         this.queueUploadMeta(e);
      }
   }
   handleGroupMetaChange(input) {
@@ -520,6 +605,7 @@

      // Capture values immediately (before debouncer)
      const inputName = input.name;
      if (!inputName) return;
      const inputValue = input.value;

      // Extract the field name from the input name
@@ -641,6 +727,13 @@
         if (details) {
            details.open = false;
         }


         this.notify('groups_uploaded', {
            fieldId: fieldId,
            posts: posts,
            content: field.config.content,
         });
      }
      if (operationId) {
         field.operationId = operationId;
@@ -648,10 +741,15 @@
         await this.setBulkUpload(uploads, 'status', 'uploading');
         await this.setBulkGroup(fieldId, 'operationId', operationId);
         this.fields.set(field.id, field);


         this.notify('sent-to-queue', {
            field: field,
            operation: operationId,
         });
      } else {
         await this.setBulkUpload(uploads, 'status', 'failed');
      }
      this.notify('sent-to-queue', fieldId);
      return operationId;
   }

@@ -668,7 +766,7 @@
         canMerge: mergable,
         sendNow: endpoint === 'uploads/groups',
         headers: {
            'action_nonce': window.auth.getNonce('dash')
            'X-Action-Nonce': window.auth.getNonce('dash')
         },
         append: '_upload'
      }
@@ -692,16 +790,21 @@
      let uploadMap = [];
      let files = [];

      for (const group of groups) {
      const validGroups = groups.filter(group => {
         const groupUploads = this.getGroupUploadsInOrder(group);
         return groupUploads.length > 0 && groupUploads.some(u => this.formatFile(u));
      });

      for (const group of validGroups) {
         const groupElement = this.groups.get(group.id)?.element;
         const fields = this.collectGroupFieldsFromDOM(groupElement, group.id);

         const post = {
            groupId: group.id,
            images: [],
            fields: fields
         };

         // Use helper to get uploads in stored order
         const groupUploads = this.getGroupUploadsInOrder(group);

         for (const upload of groupUploads) {
@@ -723,13 +826,17 @@
               uploadMap.push(upload.id);
            }
         }
         posts.push(post);

         if (post.images.length > 0) {
            posts.push(post);
         }
      }

      // Handle remaining uploads not in any group
      const remaining = uploads.filter(u => !u.group);
      for (const upload of remaining) {
         const post = {
            groupId: window.generateID('group'),
            images: [],
            fields: {}
         };
@@ -744,7 +851,10 @@
            post.images.push(imageData);
            uploadMap.push(upload.id);
         }
         posts.push(post);

         if (post.images.length > 0) {
            posts.push(post);
         }
      }

      return {posts, uploadMap, files};
@@ -799,38 +909,69 @@
      return { uploadMap, files };
   }

   async queueUploadMeta(e) {
      const uploadId = e.target.closest(this.selectors.items.item)?.dataset.uploadId;
      const upload = this.stores.uploads.get(uploadId);
      if (!uploadId || !upload) return;
   queueUploadMeta(e) {
      let attachmentId = e.target.closest('[data-attachment-id]')?.dataset.attachmentId;
      let isUpload = false;
      if (!attachmentId) {
         attachmentId = e.target.closest('[data-upload-id]')?.dataset.uploadId;
         isUpload = true;
         if (!attachmentId) return;

      const field = this.fields.get(upload.field);
      if (!field) return;

      let data = {};
      data[e.target.name] = e.target.value;
      }

      upload.fields = { ...upload.fields, ...data };
      await this.setUpload(upload.id, upload);
      if (!this.changes.has(attachmentId)) {
         let object = {};
         if (isUpload) {
            object['uploadId'] = attachmentId;
         } else {
            object['attachmentId'] = attachmentId;
         }
         this.changes.set(attachmentId, object);
      }

      let queueData = {};
      queueData[upload.attachmentId ?? upload.id] = upload.fields;
      return await this.sendToQueue('uploads/meta', queueData, 'Uploading Meta', '', true);
      let field = e.target.closest('[data-field]');
      let name = field.dataset.field;

      this.changes.get(attachmentId)[name] = e.target.value;

      this.scheduleSave();
   }
   scheduleSave() {
      window.debouncer.schedule(
         `upload-meta`,
         async () => {
            if (this.changes.size > 0) {
               let items = {};
               for (let [id, meta] of this.changes.entries()) {
                  console.log(id, meta);
                  items[id] = meta;
               }
               let data = {
                  user: window.auth.getUser(),
                  items: items
               };
               await this.sendToQueue('uploads/meta', data, 'Uploading Meta', 'Uploading Meta', true);
               this.changes.clear();
            }
         },
         2000
      );
   }

   /*********************************************************************
    FIELD LOGIC
   *********************************************************************/
   scanFields(container, autoUpload = true) {
   scanFields(container, autoUpload = true, imageMeta = true) {
      const fields = container.querySelectorAll(this.selectors.fields.field);
      fields.forEach(uploader => this.registerField(uploader, autoUpload));
      fields.forEach(uploader => this.registerField(uploader, autoUpload, imageMeta));
   }

   registerField(element, autoUpload = true, id = null) {
   registerField(element, autoUpload = true, imageMeta = true, id = null) {
      const data = {
         element: element,
         id: (id) ? id : this.determineFieldId(element),
         config: this.extractFieldConfig(element, autoUpload),
         config: this.extractFieldConfig(element, autoUpload, imageMeta),
         uploads: new Set(),
         operationId: null,
         groups: [],
@@ -850,9 +991,10 @@
      return data.id;
   }

   extractFieldConfig(fieldElement, autoUpload) {
   extractFieldConfig(fieldElement, autoUpload, imageMeta) {
      return {
         autoUpload: autoUpload,
         showMeta: imageMeta,
         destination: fieldElement.dataset.destination || 'meta', //TODO: why do we need this?
         content: this.extractFieldContent(fieldElement),
         mode: fieldElement.dataset.mode || 'direct',
@@ -942,8 +1084,9 @@

      const processNext = async () => {
         while (queue.length > 0) {
            const file = queue.shift();
            results.push(await this.processImage(file, maxWidth, maxHeight));
            const entry = queue.shift();
            const blob = await this.processImage(entry.file, maxWidth, maxHeight);
            results.push({ uploadId: entry.uploadId, blob: blob });
         }
      };

@@ -1060,7 +1203,7 @@
               id: uploadId,
               field: fieldId,
               status: 'local_processing',
               blob: null,
               // blob: null,
               fields: {
                  originalName: file.name,
                  originalSize: file.size,
@@ -1086,19 +1229,21 @@
      const otherEntries = uploadEntries.filter(e => !e.file.type.startsWith('image/'));

      // Process images in batches
      const processedBlobs = await this.processImages(
         imageEntries.map(e => e.file)
      const processedImages = await this.processImages(
         imageEntries.map(e => ({ file: e.file, uploadId: e.uploadId }))
      );

      // Update image uploads with processed blobs
      for (let i = 0; i < imageEntries.length; i++) {
         const { uploadId, upload } = imageEntries[i];
         upload.blob = processedBlobs[i];
         upload.fields.size = processedBlobs[i].size;
         upload.status = 'queued';
         await this.setUpload(uploadId, upload);
         processed++;
         this.updateFieldProgress(fieldId, processed, totalFiles, 'Processing files...');
      for (const { uploadId, blob } of processedImages) {
         const entry = imageEntries.find(e => e.uploadId === uploadId);
         if (entry) {
            entry.upload.blob = blob;
            entry.upload.fields.size = blob.size;
            entry.upload.status = 'queued';
            await this.setUpload(uploadId, entry.upload);
            processed++;
            this.updateFieldProgress(fieldId, processed, totalFiles, 'Processing files...');
         }
      }

      // Handle non-image files (no processing needed)
@@ -1120,6 +1265,13 @@
   *************************************************************/
   async checkRecovery() {
      const pendingUploads = this.stores.uploads.filterByIndex({status: ['local_processing', 'queued', 'uploading']});
      const allGroups = Array.from(this.stores.groups.data.values());
      for (const group of allGroups) {
         const hasUploads = this.stores.uploads.filterByIndex({group: group.id}).length > 0;
         if (!hasUploads) {
            await this.stores.groups.delete(group.id);
         }
      }
      if (pendingUploads.length === 0) return;

      // Group by source page
@@ -1699,6 +1851,7 @@
         avoidImplicitDeselect: true,
         group: { name: fieldId, pull: true, put: true },
         dragClass: 'dragging',
         ignore: '.empty-group',

         onStart: (evt) => {
            // Get the dragged item's ID
@@ -1730,6 +1883,7 @@

      emptyZone.addEventListener('dragover', (e) => {
         e.preventDefault();
         e.stopPropagation();
         e.dataTransfer.dropEffect = 'move';
         emptyZone.classList.add('drag-over');
      });
@@ -1742,6 +1896,7 @@

      emptyZone.addEventListener('drop', async (e) => {
         e.preventDefault();
         e.stopPropagation();
         emptyZone.classList.remove('drag-over');

         // Get selected items from our tracking