From 27fb820ae9081fb56957cf75e79eccd8a99edd52 Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Sat, 14 Feb 2026 19:14:48 +0000
Subject: [PATCH] =minor css changes, queue merge logic restructured, and double checking changes actually changed in cRUD.js before sending to server
---
assets/js/concise/UploadManager.js | 267 ++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 212 insertions(+), 55 deletions(-)
diff --git a/assets/js/concise/UploadManager.js b/assets/js/concise/UploadManager.js
index e5f8643..b2f7c7c 100644
--- a/assets/js/concise/UploadManager.js
+++ b/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();
@@ -108,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')) {
@@ -138,7 +139,8 @@
if (manyRefs.inputs) {
for (let input of manyRefs.inputs) {
- window.prefixInput(input, `${data.id??data.uploadId}-`);
+ let wrapper = input.closest('[data-field]')??el;
+ window.prefixInput(input, `${data.id??data.uploadId}-`, wrapper);
}
}
}
@@ -154,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) {
@@ -175,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);
});
}
}
@@ -294,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
});
}
}
@@ -344,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: {
@@ -535,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
@@ -601,7 +672,7 @@
}
}
- async queueUploads(endpoint, fieldId) {
+ async queueUploads(endpoint, fieldId, dependsOn = null) {
let data = new FormData();
const field = this.fields.get(fieldId);
if (!field) return;
@@ -617,12 +688,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;
@@ -656,6 +731,13 @@
if (details) {
details.open = false;
}
+
+
+ this.notify('groups_uploaded', {
+ fieldId: fieldId,
+ posts: posts,
+ content: field.config.content,
+ });
}
if (operationId) {
field.operationId = operationId;
@@ -663,10 +745,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;
}
@@ -683,7 +770,7 @@
canMerge: mergable,
sendNow: endpoint === 'uploads/groups',
headers: {
- 'action_nonce': window.auth.getNonce('dash')
+ 'X-Action-Nonce': window.auth.getNonce('dash')
},
append: '_upload'
}
@@ -707,16 +794,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) {
@@ -738,13 +830,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: {}
};
@@ -759,7 +855,10 @@
post.images.push(imageData);
uploadMap.push(upload.id);
}
- posts.push(post);
+
+ if (post.images.length > 0) {
+ posts.push(post);
+ }
}
return {posts, uploadMap, files};
@@ -897,18 +996,27 @@
}
extractFieldConfig(fieldElement, autoUpload, imageMeta) {
- return {
+ const config = {
autoUpload: autoUpload,
showMeta: imageMeta,
- destination: fieldElement.dataset.destination || 'meta', //TODO: why do we need this?
+ destination: fieldElement.dataset.destination || 'meta',
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'
+ itemID: this.extractFieldItemId(fieldElement) ?? 0,
+ maxFiles: parseInt(fieldElement.dataset.maxFiles) ?? 25,
+ subType: fieldElement.dataset.subtype ?? 'image',
+ repeaterPath: null
};
+
+ const repeaterRow = fieldElement.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) {
@@ -924,12 +1032,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}`;
}
@@ -989,8 +1102,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 });
}
};
@@ -1133,19 +1247,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)
@@ -1167,6 +1283,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
@@ -1337,6 +1460,9 @@
}
getSubtypeFromURL(url) {
+ if (!url || url === '') {
+ return '';
+ }
const imgs = ['.webp', '.jpg', '.jpeg', '.png', '.gif', '.svg'];
const videos = ['.mp4', '.ogg', '.mov', '.webm', '.avi'];
@@ -1360,11 +1486,40 @@
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 => el.dataset.id || el.dataset.uploadId)
+ .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);
@@ -1390,6 +1545,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);
@@ -1401,10 +1558,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);
}
@@ -1746,6 +1904,7 @@
avoidImplicitDeselect: true,
group: { name: fieldId, pull: true, put: true },
dragClass: 'dragging',
+ ignore: '.empty-group',
onStart: (evt) => {
// Get the dragged item's ID
@@ -1777,6 +1936,7 @@
emptyZone.addEventListener('dragover', (e) => {
e.preventDefault();
+ e.stopPropagation();
e.dataTransfer.dropEffect = 'move';
emptyZone.classList.add('drag-over');
});
@@ -1789,6 +1949,7 @@
emptyZone.addEventListener('drop', async (e) => {
e.preventDefault();
+ e.stopPropagation();
emptyZone.classList.remove('drag-over');
// Get selected items from our tracking
@@ -1834,18 +1995,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;
--
Gitblit v1.10.0