141 lines
5.1 KiB
JavaScript
141 lines
5.1 KiB
JavaScript
/**
|
|
* FilePond Direct Fix - Emergency fix for XHR forms
|
|
*/
|
|
(function() {
|
|
// Directly attempt to initialize uninitialized FilePond elements
|
|
// without relying on any existing logic
|
|
|
|
console.log('FilePond Direct Fix loaded');
|
|
|
|
// Function to directly create FilePond instances
|
|
function initializeFilePondElements() {
|
|
console.log('Direct FilePond initialization attempt');
|
|
|
|
// Find uninitialized FilePond elements
|
|
const elements = document.querySelectorAll('.filepond-root:not(.filepond--hopper)');
|
|
if (elements.length === 0) {
|
|
return;
|
|
}
|
|
|
|
console.log(`Found ${elements.length} uninitialized FilePond elements`);
|
|
|
|
// Process each element
|
|
elements.forEach((element, index) => {
|
|
const input = element.querySelector('input[type="file"]:not(.filepond--browser)');
|
|
if (!input) {
|
|
console.log(`Element #${index + 1}: No suitable file input found`);
|
|
return;
|
|
}
|
|
|
|
console.log(`Element #${index + 1}: Found file input:`, input);
|
|
|
|
// Get settings
|
|
let settings = {};
|
|
try {
|
|
const settingsAttr = element.getAttribute('data-grav-file-settings');
|
|
if (settingsAttr) {
|
|
settings = JSON.parse(settingsAttr);
|
|
console.log('Parsed settings:', settings);
|
|
}
|
|
} catch (e) {
|
|
console.error('Failed to parse settings:', e);
|
|
}
|
|
|
|
// Get URLS
|
|
const uploadUrl = element.getAttribute('data-file-url-add');
|
|
const removeUrl = element.getAttribute('data-file-url-remove');
|
|
|
|
console.log('Upload URL:', uploadUrl);
|
|
console.log('Remove URL:', removeUrl);
|
|
|
|
try {
|
|
// Create FilePond instance directly
|
|
const pond = FilePond.create(input);
|
|
|
|
// Apply minimal configuration to make uploads work
|
|
if (pond) {
|
|
console.log(`Successfully created FilePond on element #${index + 1}`);
|
|
|
|
// Basic configuration to make it functional
|
|
pond.setOptions({
|
|
name: settings.paramName || input.name || 'files',
|
|
server: {
|
|
process: uploadUrl,
|
|
revert: removeUrl
|
|
},
|
|
// Transform options
|
|
imageTransformOutputMimeType: 'image/jpeg',
|
|
imageTransformOutputQuality: settings.resizeQuality || 90,
|
|
imageTransformOutputStripImageHead: true,
|
|
// Resize options
|
|
imageResizeTargetWidth: settings.resizeWidth || null,
|
|
imageResizeTargetHeight: settings.resizeHeight || null,
|
|
imageResizeMode: 'cover',
|
|
imageResizeUpscale: false
|
|
});
|
|
}
|
|
} catch (e) {
|
|
console.error(`Failed to create FilePond on element #${index + 1}:`, e);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Monitor form submissions and DOM changes
|
|
function setupMonitoring() {
|
|
// Create MutationObserver to watch for DOM changes
|
|
if (window.MutationObserver) {
|
|
const observer = new MutationObserver((mutations) => {
|
|
let shouldCheck = false;
|
|
|
|
for (const mutation of mutations) {
|
|
if (mutation.type === 'childList' && mutation.addedNodes.length) {
|
|
for (const node of mutation.addedNodes) {
|
|
if (node.nodeType === 1) {
|
|
if (node.classList && node.classList.contains('filepond-root') ||
|
|
node.querySelector && node.querySelector('.filepond-root')) {
|
|
shouldCheck = true;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
if (shouldCheck) break;
|
|
}
|
|
|
|
if (shouldCheck) {
|
|
console.log('DOM changes detected that might include FilePond elements');
|
|
// Delay to ensure DOM is fully updated
|
|
setTimeout(initializeFilePondElements, 50);
|
|
}
|
|
});
|
|
|
|
// Start observing
|
|
observer.observe(document.body, {
|
|
childList: true,
|
|
subtree: true
|
|
});
|
|
|
|
console.log('MutationObserver set up for FilePond elements');
|
|
}
|
|
}
|
|
|
|
// Set up the emergency fix
|
|
function init() {
|
|
// Set up monitoring
|
|
setupMonitoring();
|
|
|
|
// Expose global function for manual reinit
|
|
window.directFilePondInit = initializeFilePondElements;
|
|
|
|
// Initial check
|
|
setTimeout(initializeFilePondElements, 500);
|
|
}
|
|
|
|
// Start when DOM is ready
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', init);
|
|
} else {
|
|
setTimeout(init, 0);
|
|
}
|
|
})();
|