=A little form recovery magic

Jake Vanderwerf

2026-05-12 c32ed859f4abd1591c882f4f2a6ee16b1ec275e2

 assets/js/concise/UploadManager.js

@@ -109,7 +109,7 @@
                  break;
            }
            if (refs.details) {
               if (Object.hasOwn(data.field.config, 'showMeta') && !data.field.config.showMeta) {
               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')) {
@@ -139,7 +139,8 @@

            if (manyRefs.inputs) {
               for (let input of manyRefs.inputs) {
                  let wrapper = input.closest('[data-field]')??el;
                  let wrapper = input.closest('[data-field]')??input.closest('.radio-button')??el;

                  window.prefixInput(input, `${data.id??data.uploadId}-`, wrapper);
               }
            }
@@ -298,17 +299,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
               });
            }
         }
@@ -324,7 +391,7 @@
      if (event === 'data-ready') {
         this.stores.ready.push(storeName);
         if (this.storesReady()) {
            this.checkRecovery().then(()=>{});
            this.checkRecovery().then(() => {});
         }
      }
   }
@@ -348,7 +415,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: {
@@ -432,6 +499,20 @@

      Object.preventExtensions(upload);
      await this.stores.uploads.save(upload);

      if (this.fields.has(upload.field)) {
         let field = this.fields.get(upload.field);
         console.log('Upload Status: ', upload.status);
         switch (upload.status) {
            case 'local_processing':
               this.notify('upload-received', {
                  field: field.element,
                  id: upload.id
               });
         }
      }


      return upload;
   }

@@ -461,6 +542,8 @@
    LISTENERS
   *********************************************************************/
   handleClick(e) {
      if (!window.targetCheck(e, this.selectors.fields.field)) return;

      //Open the file input if it's a dropzone
      let dropZone = window.targetCheck(e, this.selectors.fields.dropZone);
      if (dropZone && !e.target.matches('input, button, a')){
@@ -606,7 +689,7 @@
      }
   }

   async queueUploads(endpoint, fieldId) {
   async queueUploads(endpoint, fieldId, dependsOn = null) {
      let data = new FormData();
      const field = this.fields.get(fieldId);
      if (!field) return;
@@ -622,12 +705,16 @@

      if (isUpload) {
         data.append('mode', field.config.mode);
         data.append('field_name', field.config.name);

         data.append('field_name', field.config.repeaterPath || field.config.name);
         data.append('fieldId', field.id);
         data.append('field_type', field.config.type);
         data.append('subtype', field.config.subtype);
         data.append('item_id', field.config.itemID);
         data.append('destination', field.config.destination);
         if (dependsOn) {
            data.append('depends_on', dependsOn);
         }
      }

      let posts, uploadMap, files;
@@ -661,6 +748,13 @@
         if (details) {
            details.open = false;
         }


         this.notify('groups_uploaded', {
            fieldId: fieldId,
            posts: posts,
            content: field.config.content,
         });
      }
      if (operationId) {
         field.operationId = operationId;
@@ -693,7 +787,7 @@
         canMerge: mergable,
         sendNow: endpoint === 'uploads/groups',
         headers: {
            'action_nonce': window.auth.getNonce('dash')
            'X-Action-Nonce': window.auth.getNonce('dash')
         },
         append: '_upload'
      }
@@ -727,6 +821,7 @@
         const fields = this.collectGroupFieldsFromDOM(groupElement, group.id);

         const post = {
            groupId: group.id,
            images: [],
            fields: fields
         };
@@ -762,6 +857,7 @@
      const remaining = uploads.filter(u => !u.group);
      for (const upload of remaining) {
         const post = {
            groupId: window.generateID('group'),
            images: [],
            fields: {}
         };
@@ -912,23 +1008,33 @@
      if (data.config.type !== 'single') {
         this.initSortable(data.id);
      }
      this.maybeLockUploads(data.id);

      return data.id;
   }

   extractFieldConfig(fieldElement, autoUpload, imageMeta) {
      return {
   extractFieldConfig(el, autoUpload, imageMeta) {
      const config = {
         autoUpload: autoUpload,
         showMeta: imageMeta,
         destination: fieldElement.dataset.destination || 'meta', //TODO: why do we need this?
         content: this.extractFieldContent(fieldElement),
         mode: fieldElement.dataset.mode || 'direct',
         type: fieldElement.dataset.type || 'single',
         name: fieldElement.dataset.field,
         itemID: this.extractFieldItemId(fieldElement)??0,
         maxFiles: parseInt(fieldElement.dataset.maxFiles)??25,
         subType: fieldElement.dataset.subtype?? 'image'
         destination: el.dataset.destination || 'meta',
         content: this.extractFieldContent(el),
         mode: el.dataset.mode || 'direct',
         type: el.dataset.type || 'single',
         name: el.dataset.field,
         itemID: this.extractFieldItemId(el) ?? 0,
         maxFiles: ('max-files' in el.dataset) ? parseInt(el.dataset.maxFiles) : 0,
         subType: el.dataset.subtype ?? 'image',
         repeaterPath: null
      };

      const repeaterRow = el.closest('[data-index]');
      const repeater = repeaterRow?.closest('[data-field][data-repeater-id]');
      if (repeater && repeaterRow) {
         config.repeaterPath = `${repeater.dataset.field}:${repeaterRow.dataset.index}:${config.name}`;
      }

      return config;
   }

   extractFieldContent(fieldElement) {
@@ -944,12 +1050,17 @@
   determineFieldId(fieldElement) {
      let content = this.extractFieldContent(fieldElement);
      content = (content === null) ? '' : content+'_';

      let itemID = this.extractFieldItemId(fieldElement);
      itemID = (itemID === null) ? '' : itemID+'_';

      const field = fieldElement.dataset.field || '';

      // If inside a repeater row, include repeater name + index for uniqueness
      const repeaterRow = fieldElement.closest('[data-index]');
      const repeater = repeaterRow?.closest('[data-field][data-repeater-id]');
      if (repeater && repeaterRow) {
         return `${content}${itemID}${repeater.dataset.field}_${repeaterRow.dataset.index}_${field}`;
      }

      return `${content}${itemID}${field}`;
   }

@@ -1009,8 +1120,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 });
         }
      };

@@ -1153,19 +1265,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)
@@ -1186,65 +1300,73 @@
    RECOVERY
   *************************************************************/
   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);
         }
         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
      const bySource = new Map();
      pendingUploads.forEach(upload => {
         const src = upload.src || 'unknown';
         if (!bySource.has(src)) bySource.set(src, []);
         bySource.get(src).push(upload);
      });

      let data = {
         bySource: bySource,
         pendingUploads: pendingUploads
      };

      document.body.append(this.templates.create('restoreNotification', data));
      let notification = document.querySelector('dialog.restore-uploads');
      this.restoreModal = new window.jvbModal(notification);
      this.restoreSelection = new window.jvbHandleSelection(notification,
         {
            wrapper: {
               wrapper: '.restore-field',
               id: 'selection'
            },
            items: '.item-grid.restore',
            selectAll: {
               bulkControls: '.selection-actions',
               checkbox: '#select-all-restore',
               count: '.selection-count'
            }
      });
      this.restoreModal.handleOpen();
   }
   //TODO: Old method of checkRecovery. All recovery logic has moved to the FormController.js
   // 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
   //    const bySource = new Map();
   //    pendingUploads.forEach(upload => {
   //       const src = upload.src || 'unknown';
   //       if (!bySource.has(src)) bySource.set(src, []);
   //       bySource.get(src).push(upload);
   //    });
   //
   //    let data = {
   //       bySource: bySource,
   //       pendingUploads: pendingUploads
   //    };
   //
   //    document.body.append(this.templates.create('restoreNotification', data));
   //    let notification = document.querySelector('dialog.restore-uploads');
   //    this.restoreModal = new window.jvbModal(notification);
   //    this.restoreSelection = new window.jvbHandleSelection(notification,
   //       {
   //          wrapper: {
   //             wrapper: '.restore-field',
   //             id: 'selection'
   //          },
   //          items: '.item-grid.restore',
   //          selectAll: {
   //             bulkControls: '.selection-actions',
   //             checkbox: '#select-all-restore',
   //             count: '.selection-count'
   //          }
   //    });
   //    this.restoreModal.handleOpen();
   // }

   async handleRestoreSelected() {
      if (!this.restoreSelection) return;

      let selected = Array.from(this.restoreSelection.selectedItems);
      if (selected.length === 0) {
         return;
      }

      await this.restoreSelectedUploads(selected);
   }
   async handleRestoreAll() {
      if (!this.restoreModal) return;
      const allUploads = Array.from(this.restoreModal.modal.querySelectorAll('.item.upload')).map(item => item.dataset.uploadId);

      await this.restoreSelectedUploads(allUploads);
   }

   // async handleRestoreSelected() {
   //    if (!this.restoreSelection) return;
   //
   //    let selected = Array.from(this.restoreSelection.selectedItems);
   //    if (selected.length === 0) {
   //       return;
   //    }
   //
   //    await this.restoreSelectedUploads(selected);
   // }
   // async handleRestoreAll() {
   //    if (!this.restoreModal) return;
   //    const allUploads = Array.from(this.restoreModal.modal.querySelectorAll('.item.upload')).map(item => item.dataset.uploadId);
   //
   //    await this.restoreSelectedUploads(allUploads);
   // }
   //
   async restoreSelectedUploads(selectedUploads) {
      let currentPage = window.location.href;

@@ -1257,8 +1379,20 @@
      let fieldId = uploads[0].field;
      let field = document.querySelector(`[data-uploader="${fieldId}"]`);
      if (!field) {
         console.log('No field found for '+fieldId);
         return;
         if ('crudManager' in window && fieldId.startsWith(window.crudManager.content)) {
            let [content, itemId, fieldName] = fieldId.split('_');
            if (parseInt(itemId) > 0) {
               window.crudManager.openEditModal(itemId);
               field = document.querySelector(`[data-uploader="${fieldId}"]`);
            } else {
               console.log('No field found for '+fieldId);
               return;
            }
         } else {
            console.log('No field found for '+fieldId);
            return;
         }

      }
      let fieldData = this.fields.get(fieldId);
      if (fieldData.groupUI.container) {
@@ -1307,17 +1441,25 @@
         });
         await this.addToGroup(upload.id, null);
      }
   }
   //
   // cleanupRestore() {
   //    this.restoreModal.handleClose();
   //    this.restoreSelection.destroy();
   //    this.restoreSelection = null;
   //    this.restoreModal.destroy();
   //    this.restoreModal.modal.remove();
   //    this.restoreModal = null;
   // }

      this.cleanupRestore();
   async restoreUploads(uploadIds) {
      const uploads = uploadIds.map(id => this.stores.uploads.get(id)).filter(Boolean);
      if (uploads.length === 0) return;
      await this.restoreSelectedUploads(uploads.map(u => u.id));
   }

   cleanupRestore() {
      this.restoreModal.handleClose();
      this.restoreSelection.destroy();
      this.restoreSelection = null;
      this.restoreModal.destroy();
      this.restoreModal.modal.remove();
      this.restoreModal = null;
   async clearUploads(uploadIds) {
      await Promise.all(uploadIds.map(id => this.clearUpload(id)));
   }
   /*******************************************************************************
    STATUS MANAGEMENT
@@ -1364,6 +1506,9 @@
   }

   getSubtypeFromURL(url) {
      if (!url || url === '') {
         return '';
      }
      const imgs = ['.webp', '.jpg', '.jpeg', '.png', '.gif', '.svg'];
      const videos = ['.mp4', '.ogg', '.mov', '.webm', '.avi'];

@@ -1383,15 +1528,55 @@
    * @param button
    */
   async handleRemoveItem(button) {
      console.log('Handling remove upload');
      const item = button.closest(this.selectors.items.item);
      if (!item) return;

      const uploadId = item.dataset.uploadId;
      const attachmentId = item.dataset.id;

      if (!uploadId && !attachmentId) return;
      if (!confirm('Remove this item?')) return;
      await this.removeUpload(uploadId);

      if (uploadId) {
         await this.removeUpload(uploadId);
      } else {
         const fieldId = this.getFieldIdFromElement(button);
         item.remove();

         if (fieldId) {
            this.updateHiddenInput(fieldId);
            this.maybeLockUploads(fieldId);
         }
      }

      this.a11y.announce('Item removed');
   }

   updateHiddenInput(fieldId) {
      const field = this.fields.get(fieldId);
      if (!field?.ui.hidden) return;

      const remaining = Array.from(field.ui.grid?.querySelectorAll(this.selectors.items.item) || [])
         .map(el => {
            if (Object.hasOwn(el.dataset, 'id') && el.dataset.id > 0) {
               return el.dataset.id;
            }

            if (Object.hasOwn(el.dataset, 'upload-id') && el.dataset.uploadId > 0) {
               return el.dataset.uploadId;
            }
            //For timeline
            return el.dataset.itemId;
         })
         .filter(Boolean);

      const newValue = remaining.join(',');
      if (field.ui.hidden.value === newValue) return;

      field.ui.hidden.value = newValue;
      field.ui.hidden.dispatchEvent(new Event('change', { bubbles: true }));
   }
   async setBulkUpload(uploads, key, value) {
      const promises = Array.from(uploads).map(async (upload) => {
         if (typeof upload === 'string') upload = await this.stores.uploads.get(upload);
@@ -1417,6 +1602,8 @@
   async removeUpload(uploadId) {
      let upload = this.stores.uploads.get(uploadId);
      if (!upload) return;
      const fieldId = upload.field; // grab before clearing

      if (upload.group) {
         let group = this.stores.groups.get(upload.group);
         group.uploads = group.uploads.filter(id => id !== uploadId);
@@ -1428,10 +1615,11 @@
      }

      await this.clearUpload(uploadId);
      this.maybeLockUploads(upload.field);
      this.updateHiddenInput(fieldId);
      this.maybeLockUploads(fieldId);

      let handler = this.selectionHandlers.get(upload.field);
      if (handler){
      let handler = this.selectionHandlers.get(fieldId);
      if (handler) {
         handler.deselect(uploadId);
      }

@@ -1676,9 +1864,9 @@

      let uploads = this.stores.uploads.filterByIndex({field: fieldId});
      let count = uploads.length;
      let max = field.config.maxFiles??25;
      let max = field.config.maxFiles??0;

      field.ui.dropZone.hidden = count >= max;
      field.ui.dropZone.hidden = max > 0 && count >= max;
   }
   /*******************************************************************************
    OPERATION METHODS
@@ -1864,18 +2052,14 @@
         return;
      }

      // Get current order from DOM
      let items = Array.from(target.children)
         .filter(el => el.matches(this.selectors.items.item) && !el.classList.contains('ghost'))
         .map(upload => upload.dataset.uploadId)
         .filter(id => id);

      if (!groupId) {
         let hiddenInput = this.fields.get(fieldId)?.ui.hidden;
         if (hiddenInput) {
            hiddenInput.value = items.join(',');
         }
         this.updateHiddenInput(fieldId);
      } else {
         let items = Array.from(target.children)
            .filter(el => el.matches(this.selectors.items.item) && !el.classList.contains('ghost'))
            .map(upload => upload.dataset.uploadId)
            .filter(id => id);

         let group = this.stores.groups.get(groupId);
         if (group) {
            group.uploads = items;