Hi Niklas,
This sounds exactly like what I'm trying to do but I seem to have run into a snag.
It seems everything works up until the dialog opens and tries to run the Ajax with the script include.
I can see that the UI Script passes into the Ajax the data from the screenshot correctly and the page reloads as outlined within the dialog, but no attachment is created.
Below is what I have done (as outlined by yourself and @Guhan Narayanan) in my personal instance, can you let me know if you can see where I am going wrong?
Any help would be really appreciated!!
Thanks
Incident Form
- Annotation field added to top of form
UI Script - addPasteEvent
- Global - Ticked
function addPasteEvent() {
// Get browser type and IE version
var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
var isChrome = !!window.chrome && !isOpera;
var isFirefox = typeof InstallTrigger !== 'undefined'; // Firefox 1.0+
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
var isIE = /*@cc_on!@*/false || !!document.documentMode;
var ieVersion = "";
if(isIE) {
ieVersion = getInternetExplorerVersion();
if(ieVersion != "11"){
alert("Cannot paste using Ineternet Explorer 10 or earlier. Please upgrade to Internet Explorer 11 for to be able to paste images directly into the task");
return false;
}
}
// Add paste event for all supported browser types
if(isChrome){
document.getElementById("pasteArea").addEventListener('paste', pasteAttachmentChrome, false);
}else if(isIE){
document.getElementById("pasteArea").addEventListener('paste', pasteAttachmentIE, false);
}else if (isFirefox){
document.getElementById("pasteArea").addEventListener('paste', pasteAttachmentFF, false);
}
//add event handler for removing and adding informative text in annotaction field
document.getElementById("pasteArea").addEventListener('blur', addInformativeText, false);
document.getElementById("pasteArea").addEventListener('focus', removeInformativeText, false);
}
function addInformativeText(){
document.getElementById("pasteArea").innerHTML = "Click here then paste screenshot (ctrl + v)";
}
function removeInformativeText(){
document.getElementById("pasteArea").innerHTML = "";
}
function pasteAttachmentChrome(){
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
// find pasted image among pasted items
var blob = null;
for (var i = 0; i < items.length; i++) {
if (items[i].type.indexOf("image") === 0) {
blob = items[i].getAsFile();
}
}
// load image if there is a pasted image
if (blob !== null) {
var reader = new FileReader();
reader.onload = function(event) {
var base64Image = event.target.result;
attachClipboardData(base64Image);
};
reader.readAsDataURL(blob);
}else{
pastedNotImage();
}
}
function pasteAttachmentIE(){
if(typeof window.clipboardData != 'undefined') {
var clip = window.clipboardData;
if (clip) {
if(clip.files.length == 0){
pastedNotImage();
}else if ( clip.files[0].type.indexOf('image/') !== -1) {
var url = URL.createObjectURL(clip.files[0]);
var blob = url.substring(4);
var reader = new window.FileReader();
reader.onloadend = function() {
var base64Image = reader.result;
attachClipboardData(base64Image);
};
reader.readAsDataURL(clip.files[0]);
}
}
}
}
function pasteAttachmentFF(event){
//setTimeout(getImage, 1)
var base64img = setTimeout(getImage, 1);
}
function getImage(){
var pasteCatcher = document.getElementById("pasteArea");
var image = pasteCatcher.getElementsByTagName("img");
if(image.length == 0) pastedNotImage();
attachClipboardData(image[0].src);
}
function pastedNotImage(){
alert("No image pasted");
}
function attachClipboardData(data){
var recordSysID = g_form.getUniqueValue();
var recordTable = g_form.getTableName();
var temp = data.toString().replace(/data:/g,'').split(';');
var contentType = temp[0];
var fileName = 'Screen shot.'+contentType.split('/')[1];
var content = temp[1].toString().replace(/base64,/g,'');
showLoadingDialog();
var attach = new GlideAjax('attachScreen');
attach.addParam('sysparm_name','attachScreenshot');
attach.addParam('sysparm_tableName',recordTable);
attach.addParam('sysparm_sys_id',recordSysID);
attach.addParam('sysparm_content_type',contentType);
attach.addParam('sysparm_value',content);
attach.addParam('sysparm_filename',fileName);
attach.getXML(getResponse);
function getResponse(response) {
window.location.reload();
}
}
function getInternetExplorerVersion() {
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
var rv = -1;
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // If Internet Explorer, return version number
{
if (isNaN(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))))){
//For IE 11 >
if (navigator.appName == 'Netscape') {
ua = navigator.userAgent;
var re = new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null) {
rv = parseFloat(RegExp.$1);
return rv;
}
}
else {
return fale;
}
}
else {
//For < IE11
return parseInt(ua.substring(msie + 5, ua.indexOf(".", msie)));
}
return false;
}}
Script Includes - attachScreen
- Client Callable - Ticked
var attachScreen = Class.create();
attachScreen.prototype = {
initialize : function() {
},
attachScreenshot : function() {
var StringUtil = GlideStringUtil;
var value = StringUtil.base64DecodeAsBytes(this.getParameter('sysparm_value'));
var tableName = this.getParameter('sysparm_tableName');
var sys_id = this.getParameter('sysparm_sys_id');
var filename = this.getParameter('sysparm_filename');
var content_type = this.getParameter('sysparm_content_type');
var attachment = new Attachment();
attachment.write(tableName, sys_id, filename, content_type, value);
},
type : 'attachScreen'
};
Client Script - addScreen
- Table - Incident
- Type - On Load
function onLoad() {
addPasteEvent();
}
