Skip to content

Adding attachments in task creating step #95

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 8 commits into from
Apr 15, 2026
Merged

Adding attachments in task creating step #95

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
6e8c48c
Upd. added file and screenshots to create_issue
veronika-tseleva-cleantalk Apr 9, 2026
c733a6d
Upd. added file and screenshots to create_issue
veronika-tseleva-cleantalk Apr 9, 2026
12fa08a
Fix. remove comments
veronika-tseleva-cleantalk Apr 9, 2026
e89af1c
Merge branch 'dev' into adding-attachments-in-task-creating-step
veronika-tseleva-cleantalk Apr 10, 2026
458b9cb
Fix. fixed conflicts
veronika-tseleva-cleantalk Apr 10, 2026
3eca8be
Fix. fixed extra renders
veronika-tseleva-cleantalk Apr 13, 2026
37f6bc7
Fix. fixed extra renders
veronika-tseleva-cleantalk Apr 13, 2026
1ebc8b0
Fix. fixed conflicts
veronika-tseleva-cleantalk Apr 15, 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
94 changes: 66 additions & 28 deletions dist/doboard-widget-bundle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8732,10 +8732,13 @@ async function handleCreateTask(sessionId, taskDetails) {
const result = await createTaskDoboard(sessionId, taskDetails);
if (result && result.taskId && taskDetails.taskDescription) {
const sign = `<br><br><br><em>The spot has been posted at the following URL <a href="${window.location.href}"><span class="task-link task-link--done">${window.location.href}</span></a></em>`;
await addTaskComment({

const commentResponse = await addTaskComment({
projectToken: taskDetails.projectToken,
accountId: taskDetails.accountId,
}, result.taskId, taskDetails.taskDescription+sign);
}, result.taskId, taskDetails.taskDescription + sign);

result.initialComment = commentResponse;
}
return result;
} catch (err) {
Expand Down Expand Up @@ -9179,7 +9182,7 @@ class CleanTalkWidgetDoboard {
} else {
// Load all tasks
const isWidgetClosed = localStorage.getItem('spotfix_widget_is_closed');
if((isWidgetClosed && !this.selectedText) || !isWidgetClosed){
if(((isWidgetClosed && !this.selectedText) || !isWidgetClosed) && type !== 'create_issue'){
this.allTasksData = await getAllTasks(this.params, this.nonRequesting);
}
}
Expand Down Expand Up @@ -9377,6 +9380,23 @@ class CleanTalkWidgetDoboard {
return;
}

if (this.fileUploader?.hasFiles() && submitTaskResult?.initialComment?.commentId) {
const sessionId = localStorage.getItem('spotfix_session_id');
try {
const attachmentsSendResult = await this.fileUploader.sendAttachmentsForComment(
this.params,
sessionId,
submitTaskResult.initialComment.commentId
);

if (!attachmentsSendResult.success) {
console.error(attachmentsSendResult);
}
} catch (uploadErr) {
console.error(uploadErr);
}
}

// Return the submit button normal state
submitButton.disabled = false;
submitButton.style.cursor = 'pointer';
Expand Down Expand Up @@ -9912,35 +9932,44 @@ class CleanTalkWidgetDoboard {
this.bindCreateTaskEvents();
this.bindShowLoginFormEvents();

this.fileUploader = new FileUploader(this.escapeHtml);
this.fileUploader.init();

const savedDescription = localStorage.getItem('spotfix-description-ls') || '';
const fileUploaderDesc = this.fileUploader;


// Create description editor iframe
window.DescriptionEditorIframe.create({
savedContent: savedDescription,
onChange: function(content) {
localStorage.setItem('spotfix-description-ls', content);
},
handlers: {
onAttachmentClick: function() {
// Attachment button clicked in description editor
// Currently disabled
if (window.DescriptionEditorIframe.iframe && !this.nonRequesting) {
window.DescriptionEditorIframe.remove();
}
if(!this.nonRequesting) {
// Create description editor iframe
window.DescriptionEditorIframe.create({
savedContent: savedDescription,
onChange: function(content) {
localStorage.setItem('spotfix-description-ls', content);
},
onScreenshotClick: function() {
// Screenshot button clicked in description editor
// Currently disabled
handlers: {
onAttachmentClick: function() {
fileUploaderDesc?.fileInput?.click();
},
onScreenshotClick: function() {
fileUploaderDesc?.makeScreenshot();
},
}
}
}).catch(function(error) {
console.error('Failed to create description editor:', error);
});
}).catch(function(error) {
console.error('Failed to create description editor:', error);
});
}


break;
case 'wrap':
await this.getTaskCount();
document.querySelector('.doboard_task_widget-wrap').addEventListener('click', (e) => {
document.querySelector('.doboard_task_widget-wrap').addEventListener('click', async (e) => {
const widgetElementClasses = e.currentTarget.classList;
if (widgetElementClasses && !widgetElementClasses.contains('hidden')) {
this.createWidgetElement('all_issues');
if(this.type_name !== 'all_issues') await this.createWidgetElement('all_issues');
}
});
hideContainersSpinner(false);
Expand All @@ -9960,7 +9989,7 @@ class CleanTalkWidgetDoboard {
let issuesQuantityOnPage = 0;
const sessionId = localStorage.getItem('spotfix_session_id');

const notifications = await getNotificationsDoboard(this.params.projectToken, sessionId, this.params.accountId, this.params.projectId);
const notifications = this.nonRequesting ? [] : await getNotificationsDoboard(this.params.projectToken, sessionId, this.params.accountId, this.params.projectId);

this.allTasksData = await getAllTasks(this.params, this.nonRequesting);
const tasks = this.allTasksData;
Expand Down Expand Up @@ -10518,8 +10547,8 @@ class CleanTalkWidgetDoboard {
logoutUserDoboard(this.params.projectToken);
}) || '';

document.getElementById('addNewTaskButton')?.addEventListener('click', () => {
spotFixShowWidget();
document.getElementById('addNewTaskButton')?.addEventListener('click', async () => {
if(this.type_name !== 'create_issue') await this.createWidgetElement('create_issue');
}) || '';

document.getElementById('maximizeWidgetContainer')?.addEventListener('click', () => {
Expand Down Expand Up @@ -12944,6 +12973,13 @@ class SpotFixTemplatesLoader {
<label for="doboard_task_widget-description" style="top:1px" class="doboard_task_widget-field-textarea-label" >Description</label>
</div>

<div class="doboard_task_widget__file-upload__wrapper" id="doboard_task_widget__file-upload__wrapper">
<div class="doboard_task_widget__file-upload__list-header">Attached files</div>
<div class="doboard_task_widget__file-upload__file-list" id="doboard_task_widget__file-upload__file-list"></div>
<div class="doboard_task_widget__file-upload__error" id="doboard_task_widget__file-upload__error"></div>
<input type="file" class="doboard_task_widget__file-upload__file-input-button" id="doboard_task_widget__file-upload__file-input-button" multiple accept="*/*">
</div>

<div class="doboard_task_widget-login">

<span class="doboard_task_widget-login-icon" >Sign up here to receive notifications.</span>
Expand Down Expand Up @@ -13682,7 +13718,9 @@ class SpotFixSourcesLoader {

getCSSCode() {
// global gulp wrapper var
return spotFixCSS;
if(spotFixCSS) {
return spotFixCSS;
}
}

loadAll() {
Expand Down Expand Up @@ -13934,13 +13972,13 @@ class DescriptionEditorIframe {
window.tinymce.init({
target: document.getElementById("tinymce-editor"),
icons: "icon_pack_SpotFix",
plugins: "link lists",
plugins: 'link lists',
menubar: false,
statusbar: false,
toolbar_location: "bottom",
height: 200,
width: "100%",
toolbar: "emoticons bullist numlist bold italic strikethrough underline blockquote",
toolbar: "attachmentButton screenshotButton emoticons bullist numlist bold italic strikethrough underline blockquote",
file_picker_types: "file image media",
setup: function(editor) {
editor.ui.registry.addButton("attachmentButton", { icon: "paperclip", tooltip: "Add file", onAction: function() { window.parent.postMessage({ type: "spotfix:tinymce-action", source: "spotfix-description-editor-iframe", action: "attachment", eventData: { type: "attachment" } }, "*"); } });
Expand Down
21 changes: 14 additions & 7 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.

7 changes: 5 additions & 2 deletions js/src/handlers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,10 +84,13 @@ async function handleCreateTask(sessionId, taskDetails) {
const result = await createTaskDoboard(sessionId, taskDetails);
if (result && result.taskId && taskDetails.taskDescription) {
const sign = `<br><br><br><em>The spot has been posted at the following URL <a href="${window.location.href}"><span class="task-link task-link--done">${window.location.href}</span></a></em>`;
await addTaskComment({

const commentResponse = await addTaskComment({
projectToken: taskDetails.projectToken,
accountId: taskDetails.accountId,
}, result.taskId, taskDetails.taskDescription+sign);
}, result.taskId, taskDetails.taskDescription + sign);

result.initialComment = commentResponse;
}
return result;
} catch (err) {
Expand Down
4 changes: 2 additions & 2 deletions js/src/iframe/DescriptionEditorIframe.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -209,13 +209,13 @@ class DescriptionEditorIframe {
window.tinymce.init({
target: document.getElementById("tinymce-editor"),
icons: "icon_pack_SpotFix",
plugins: "link lists",
plugins: 'link lists',
menubar: false,
statusbar: false,
toolbar_location: "bottom",
height: 200,
width: "100%",
toolbar: "emoticons bullist numlist bold italic strikethrough underline blockquote",
toolbar: "attachmentButton screenshotButton emoticons bullist numlist bold italic strikethrough underline blockquote",
file_picker_types: "file image media",
setup: function(editor) {
editor.ui.registry.addButton("attachmentButton", { icon: "paperclip", tooltip: "Add file", onAction: function() { window.parent.postMessage({ type: "spotfix:tinymce-action", source: "spotfix-description-editor-iframe", action: "attachment", eventData: { type: "attachment" } }, "*"); } });
Expand Down
4 changes: 3 additions & 1 deletion js/src/loaders/SpotFixSourcesLoader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,9 @@ class SpotFixSourcesLoader {

getCSSCode() {
// global gulp wrapper var
return spotFixCSS;
if(spotFixCSS) {
return spotFixCSS;
}
}

loadAll() {
Expand Down
7 changes: 7 additions & 0 deletions js/src/loaders/SpotFixTemplatesLoader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,13 @@ class SpotFixTemplatesLoader {
<label for="doboard_task_widget-description" style="top:1px" class="doboard_task_widget-field-textarea-label" >Description</label>
</div>

<div class="doboard_task_widget__file-upload__wrapper" id="doboard_task_widget__file-upload__wrapper">
<div class="doboard_task_widget__file-upload__list-header">Attached files</div>
<div class="doboard_task_widget__file-upload__file-list" id="doboard_task_widget__file-upload__file-list"></div>
<div class="doboard_task_widget__file-upload__error" id="doboard_task_widget__file-upload__error"></div>
<input type="file" class="doboard_task_widget__file-upload__file-input-button" id="doboard_task_widget__file-upload__file-input-button" multiple accept="*/*">
</div>

<div class="doboard_task_widget-login">

<span class="doboard_task_widget-login-icon" >Sign up here to receive notifications.</span>
Expand Down
72 changes: 49 additions & 23 deletions js/src/widget.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ class CleanTalkWidgetDoboard {
} else {
// Load all tasks
const isWidgetClosed = localStorage.getItem('spotfix_widget_is_closed');
if((isWidgetClosed && !this.selectedText) || !isWidgetClosed){
if(((isWidgetClosed && !this.selectedText) || !isWidgetClosed) && type !== 'create_issue'){
this.allTasksData = await getAllTasks(this.params, this.nonRequesting);
}
}
Expand Down Expand Up @@ -272,6 +272,23 @@ class CleanTalkWidgetDoboard {
return;
}

if (this.fileUploader?.hasFiles() && submitTaskResult?.initialComment?.commentId) {
const sessionId = localStorage.getItem('spotfix_session_id');
try {
const attachmentsSendResult = await this.fileUploader.sendAttachmentsForComment(
this.params,
sessionId,
submitTaskResult.initialComment.commentId
);

if (!attachmentsSendResult.success) {
console.error(attachmentsSendResult);
}
} catch (uploadErr) {
console.error(uploadErr);
}
}

// Return the submit button normal state
submitButton.disabled = false;
submitButton.style.cursor = 'pointer';
Expand Down Expand Up @@ -807,35 +824,44 @@ class CleanTalkWidgetDoboard {
this.bindCreateTaskEvents();
this.bindShowLoginFormEvents();

this.fileUploader = new FileUploader(this.escapeHtml);
this.fileUploader.init();

const savedDescription = localStorage.getItem('spotfix-description-ls') || '';
const fileUploaderDesc = this.fileUploader;


// Create description editor iframe
window.DescriptionEditorIframe.create({
savedContent: savedDescription,
onChange: function(content) {
localStorage.setItem('spotfix-description-ls', content);
},
handlers: {
onAttachmentClick: function() {
// Attachment button clicked in description editor
// Currently disabled
if (window.DescriptionEditorIframe.iframe && !this.nonRequesting) {
window.DescriptionEditorIframe.remove();
}
if(!this.nonRequesting) {
// Create description editor iframe
window.DescriptionEditorIframe.create({
savedContent: savedDescription,
onChange: function(content) {
localStorage.setItem('spotfix-description-ls', content);
},
onScreenshotClick: function() {
// Screenshot button clicked in description editor
// Currently disabled
handlers: {
onAttachmentClick: function() {
fileUploaderDesc?.fileInput?.click();
},
onScreenshotClick: function() {
fileUploaderDesc?.makeScreenshot();
},
}
}
}).catch(function(error) {
console.error('Failed to create description editor:', error);
});
}).catch(function(error) {
console.error('Failed to create description editor:', error);
});
}


break;
case 'wrap':
await this.getTaskCount();
document.querySelector('.doboard_task_widget-wrap').addEventListener('click', (e) => {
document.querySelector('.doboard_task_widget-wrap').addEventListener('click', async (e) => {
const widgetElementClasses = e.currentTarget.classList;
if (widgetElementClasses && !widgetElementClasses.contains('hidden')) {
this.createWidgetElement('all_issues');
if(this.type_name !== 'all_issues') await this.createWidgetElement('all_issues');
}
});
hideContainersSpinner(false);
Expand All @@ -855,7 +881,7 @@ class CleanTalkWidgetDoboard {
let issuesQuantityOnPage = 0;
const sessionId = localStorage.getItem('spotfix_session_id');

const notifications = await getNotificationsDoboard(this.params.projectToken, sessionId, this.params.accountId, this.params.projectId);
const notifications = this.nonRequesting ? [] : await getNotificationsDoboard(this.params.projectToken, sessionId, this.params.accountId, this.params.projectId);

this.allTasksData = await getAllTasks(this.params, this.nonRequesting);
const tasks = this.allTasksData;
Expand Down Expand Up @@ -1413,8 +1439,8 @@ class CleanTalkWidgetDoboard {
logoutUserDoboard(this.params.projectToken);
}) || '';

document.getElementById('addNewTaskButton')?.addEventListener('click', () => {
spotFixShowWidget();
document.getElementById('addNewTaskButton')?.addEventListener('click', async () => {
if(this.type_name !== 'create_issue') await this.createWidgetElement('create_issue');
}) || '';

document.getElementById('maximizeWidgetContainer')?.addEventListener('click', () => {
Expand Down