Skip to content

fileuploader fixed #121

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
veronika-tseleva-cleantalk merged 4 commits into from
Aug 21, 2026
Merged

fileuploader fixed #121

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
978dde1
Fix. fileuploader fixed
nikatseleva Aug 20, 2026
70c5cd8
Fix. fileuploader fixed
nikatseleva Aug 20, 2026
2235c5d
Fix. fileuploader fixed
nikatseleva Aug 20, 2026
de8f149
Fix. fileuploader fixed
nikatseleva Aug 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
127 changes: 53 additions & 74 deletions dist/doboard-widget-bundle.js
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions dist/doboard-widget-bundle.min.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/doboard-widget-bundle.min.js.map
View file
Open in desktop

Large diffs are not rendered by default.

127 changes: 53 additions & 74 deletions js/src/fileuploader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -417,119 +417,98 @@ class FileUploader {

async makeScreenshot() {
if (!this.files || !Array.isArray(this.files) || this.files.length >= this.maxFiles) {
console.log('SpotFix: File count limit reached or file uploader is not fully initialized.');
console.log('SpotFix: File count limit reached.');
Comment thread
veronika-tseleva-cleantalk marked this conversation as resolved.
return;
}

if (typeof this.getTotalSize === 'function' && this.getTotalSize() >= this.maxTotalSize) {
console.log('SpotFix: File count or total size limit reached. Automatic screenshot cancelled.');
console.log('SpotFix: Size limit reached.');
return;
}

let blob = null;

let bgColor = window.getComputedStyle(document.body).backgroundColor;
if (bgColor === 'rgba(0, 0, 0, 0)' || bgColor === 'transparent') {
bgColor = '#ffffff';
}
if (bgColor === 'rgba(0, 0, 0, 0)' || bgColor === 'transparent') bgColor = '#ffffff';

try {
const domtoimageLib = await this.loadDomToImage();
if (!domtoimageLib) throw new Error('domtoimageLib failed to load');

blob = await domtoimageLib.toBlob(document.body, {
bgcolor: bgColor,
width: window.innerWidth,
height: window.innerHeight,
style: {
transform: `translate(${-window.scrollX}px, ${-window.scrollY}px)`,
backgroundColor: bgColor
},
filter: (node) => {
if (node.classList && node.classList.contains('doboard_task_widget')) {
return false;
if (domtoimageLib) {
blob = await domtoimageLib.toBlob(document.body, {
bgcolor: bgColor,
width: window.innerWidth,
height: window.innerHeight,
style: {
transform: `translate(${-window.scrollX}px, ${-window.scrollY}px)`,
backgroundColor: bgColor
},
filter: (node) => {
if (node.classList && node.classList.contains('doboard_task_widget')) return false;
if (node.tagName === 'NOSCRIPT') return false;
return true;
}
return true;
}
});

if (!blob) throw new Error('dom-to-image-more returned an empty result');

} catch (primaryError) {
console.warn('SpotFix: dom-to-image-more failed, trying html2canvas...', primaryError);
});
}
} catch (error) {
console.warn(error.message);
blob = null;
}

if (!blob) {
try {
if (typeof html2canvas === 'undefined') {
throw new Error('html2canvas is not defined in the global scope');
}
if (typeof html2canvas === 'undefined') throw new Error('html2canvas is not defined');

if (document.fonts && document.fonts.ready) await document.fonts.ready;

const canvas = await html2canvas(document.body, {
useCORS: true,
allowTaint: true,
allowTaint: false,
logging: false,
scale: window.devicePixelRatio || 1,
backgroundColor: bgColor,
scale: window.devicePixelRatio || 1,
x: window.scrollX,
y: window.scrollY,
width: window.innerWidth,
height: window.innerHeight,
scrollX: 0,
scrollY: 0,
windowWidth: document.documentElement.offsetWidth,
windowHeight: document.documentElement.offsetHeight,

ignoreElements: (element) => {
if (element.classList && element.classList.contains('doboard_task_widget')) {
return true;
}
return false;
onclone: (clonedDoc) => {
const currentOrigin = window.location.origin;
const transparentPixel = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';

clonedDoc.querySelectorAll('img').forEach(img => {
try {
if (img.src && img.src.startsWith('http')) {
const url = new URL(img.src);
if (url.origin !== currentOrigin && !img.crossOrigin) {
img.src = transparentPixel;
img.removeAttribute('srcset');
}
}
} catch(e) {}
});
clonedDoc.querySelectorAll('iframe').forEach(ifr => ifr.remove());
clonedDoc.querySelectorAll('.doboard_task_widget').forEach(w => w.style.display = 'none');
}
});

blob = await new Promise(res => canvas.toBlob(res, 'image/png'));
if (!blob) throw new Error('html2canvas returned empty canvas');

if (!blob) throw new Error('html2canvas returned an empty canvas');

} catch (fallbackError) {
console.error('SpotFix Error: Both screenshot libraries failed.', fallbackError);
} catch (error) {
console.error(error);
return null;
}
}

if (blob) {
const now = new Date();
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const day = String(now.getDate()).padStart(2, '0');
const month = String(now.getMonth() + 1).padStart(2, '0');
const year = now.getFullYear();
const fileName = `Screenshot_${hours}-${minutes}_${day}_${month}_${year}.png`;

const file = new File([blob], fileName, {
type: 'image/png',
lastModified: Date.now(),
});
const fileName = `Screenshot_${now.getHours()}-${now.getMinutes()}_${now.getDate()}_${now.getMonth() + 1}_${now.getFullYear()}.png`;
const file = new File([blob], fileName, { type: 'image/png', lastModified: Date.now() });

if (typeof this.validateFile === 'function' && this.validateFile(file)) {

if (this.uploaderWrapper && this.uploaderWrapper.style && this.uploaderWrapper.style.display !== 'block') {
this.uploaderWrapper.style.display = 'block';
}

if (typeof this.clearError === 'function') {
this.clearError();
}

try {
if (typeof this.addFile === 'function') {
this.addFile(file);
}
} catch (addFileError) {
console.warn('SpotFix: Cannot add screenshot to DOM (uploader elements missing)', addFileError.message);
}

} else {
console.warn('SpotFix: Automatic screenshot was not added because the total file size would exceed the limit.');
if (this.uploaderWrapper?.style) this.uploaderWrapper.style.display = 'block';
if (typeof this.clearError === 'function') this.clearError();
if (typeof this.addFile === 'function') this.addFile(file);
}
}
}
Expand Down
Loading