Skip to Content
Technical Articles
Author's profile photo Ekansh Saxena

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

 

Assigned Tags

      9 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Nabheet Madan
      Nabheet Madan

      Great quick tip..Thanks man

      Author's profile photo Ekansh Saxena
      Ekansh Saxena
      Blog Post Author

      My pleasure ?

      Author's profile photo saisravya b
      saisravya b

      Hi Ekansh,

      As per my requirement in textarea having the data once click on button its need to copy in clipboard . I have used the document.execommant('copy') but its not working. Now I am trying to use your logic for ctrl v for copy the test to clipboard.

      My application is having images and text both but I am trying to execute the logic readAsDataURL is getting failed below is the error.

      Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

      I am trying to debug unable to understand when this method getting triggered getImageFromClipboardAsBlob however I found the oBlob is undefined due to this getting error.

      Kindly help me out on this .

       

      Thanks &Regards,

      Sravya

      Author's profile photo Ekansh Saxena
      Ekansh Saxena
      Blog Post Author

      Hello Sravya,

      Sorry, I am not able to understand your query. If possible, create a JSBin or JSFiddle.

      For getImageFromClipboardAsBlob, it is just an extra method which is not called in my implementation but I provided it here so that if someone requires a blob object instead of base64 (possible use case is to upload to server), it can be utilized.

       

      Regards,

      Ekansh

      Author's profile photo saisravya b
      saisravya b

      Hi Ekansh,

      From the textarea I have to copy the data to clipboard. I have followed the below reference link but not working.

      https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript.

       

      In the above mentioned link please go through the " Simple Example"

      Do you have any reference blogs on this requirement kindly help me out.

      Thanks,

      Sravya

       

      Author's profile photo Ekansh Saxena
      Ekansh Saxena
      Blog Post Author

      Hi,

      It worked for me. Please check this https://codepen.io/ekansh005/pen/zbKbBV

      Regards,

      Ekansh

      Author's profile photo saisravya b
      saisravya b

      Hi Ekansh,

      Thanks for sharing.

      Instead of input I am using text Area and the development editor is webide . Directly DOM manipulation is not possible in webide? it is not working to me.

      I am using chrome browser document.execCommand('copy') - result is false

      document.queryCommandSupported('copy') - result is true.

       

      Unable to understand why it is not working on webide Can you please suggest me on this.

       

      Thanks,

      Sravya

      Author's profile photo Ekansh Saxena
      Ekansh Saxena
      Blog Post Author

      Hello Sravya,

      It worked for me in WebIDE as well as I tried there first and then created codepen to share the code with you.

      WebIDE shows you Linting error that you should not manipulate DOM directly but this does not interfere with actual implementation.

      Please make sure that you set focus on the text area before you selectText and then execute copy command.

      Regards,

      Ekansh

      Author's profile photo saisravya b
      saisravya b

      Hi Ekansh,

      Thank you very much for your worthwhile support.

      Previously I have not provide any hard coded value to text area . Now its working fine.

      Thanks,

      Sravya