How to get image from clipboard in SAPUI5 app

Hello All,

In today’s digital world, we perform so many actions as part of our daily routine which we don’t even consider as special rather hygiene. One among these small things is to take a screenshot and paste it in app, be it Gmail, Outlook or MS Office. It works as charm and saves your time for saving and uploading it for one time use. Since all of our users are so used to it, they expect this kind of functionality in business apps as well. So here I go with one POC app which displays image when you press ctrl+v (windows) or cmd+v (mac).

We had a requirement that user has some screenshot copied in clipboard and he wants to attach it in our transactional app. To achieve this, we will be using the ‘paste’ event of window.

When you press ‘ctrl + v’ and the current browser tab is in focus, the ‘press’ event will be fired and we would be attaching our listener to this.

var that = this;
window.addEventListener("paste", function (e) {
	that.onPaste(e);
}, false);

The fired event (namely ‘e’ here) contains the ‘clipboardData’ object which in turn contains an ‘items’ array if clipboard is not empty. This array contains clipboard data which can be iterated to pick the desired object. Once the image is copied to clipboard from any application, it is available in this array and can be retrieved as blob object using ‘getAsFile()’ method of browser’s data transfer API.

Here I have created two helper functions to retrieve the latest clipboard image as Blob and as Base64 encoded string (dataUri) which can be called from the event listener function (‘onPaste’ in our case). Once you have the base64 string or the blob (or file object), you can add it as attachment to SAP or display it in app.

onPaste: function (pasteEvent) {
	var that = this;
	this.getImageFromClipboardAsBase64(pasteEvent)
		.then(function (sBase64) {
			that.getView().getModel().setProperty("/imgSrc", sBase64);
		});
},

getImageFromClipboardAsBlob: function (pasteEvent) {
	return new Promise(function (resolve, reject) {
		if (pasteEvent.clipboardData && pasteEvent.clipboardData.items) {
			var aItems = pasteEvent.clipboardData.items;
			for (var i = 0; i < aItems.length; i++) {
				// Skip content if not image
				if (aItems[i].type.indexOf("image") == -1) continue;
				// Retrieve image on clipboard as blob
				var oBlob = aItems[i].getAsFile();
				resolve(oBlob);
			}
			reject("noImageInClipboard");
		} else {
			reject("noItemFound");
		}
	});
},

getImageFromClipboardAsBase64: function (pasteEvent) {
	return new Promise(function (resolve, reject) {
		if (pasteEvent.clipboardData && pasteEvent.clipboardData.items) {
			var aItems = pasteEvent.clipboardData.items;
			var bImageFound = false;
			for (var i = 0; i < aItems.length; i++) {
				// Skip content if not image
				if (aItems[i].type.indexOf("image") == -1) {
					continue;
				}
				bImageFound = true;
				// Retrieve image on clipboard as blob
				var oBlob = aItems[i].getAsFile();
				var oReader = new FileReader();
				oReader.readAsDataURL(oBlob);
				oReader.onloadend = function () {
					var sBase64data = oReader.result;
					resolve(sBase64data);
				};
			}
			if (!bImageFound) {
				reject("noImageInClipboard");
			}
		} else {
			reject("noItemFound");
		}
	});
}

So here is the result.

You can find the sample implementation here.

https://github.com/ekansh005/sapui5-clipboard-paste-image