SharePoint is an advanced tool with many facilities in-built. But there are some things which cannot be done with the SharePoint default settings and features. One of them is pasting the image in SharePoint list’s multi-line rich text box column. This can be achieved in a different way using custom JavaScript.
Here we have used references of below files:
1. richtext.js
2. font-awesome.min.css
3. min.css
Here the process goes like this. First of all, add a text area with the “onpaste” event just similar to below:
<textarea class=”content” name=”example” onpaste=”pasteImagetoEditor(this)” id=”txtEditor”></textarea>
Call richText() method on page load. This function is defined in richtext.js file. This function bind the all required properties to textarea of class “content”. In loadElement() funcation. we are create a div where image needs to be pasted and then make that div invisible and holds the image to be pasted.
$(document).ready(function(){
$(‘.content’).richText()
loadEditorElement();
});
function loadEditorElement(){
if (!window.Clipboard) {
imageEle = document.createElement(“div”);
imageEle.setAttribute(“contenteditable”, “”);
imageEle.style.opacity = 0; //To hide the element and append it to the body,
document.body.appendChild(imageEle);
}
// Add the paste event listener
window.addEventListener(“paste”, pasteImagetoEditor);
}
Now, generates the blob of the clipboard data, from which we can fetch name of image copied. In this function, we pass blob to an ArrayBuffer.
function pasteImagetoEditor(ele) {
if (ele.clipboardData) {
// Get clipboard items
var image = ele.clipboardData.items;
if (image) {
for (var imgCount = 0; imgCount < image.length; imgCount ++) {
if (image[imgCount].type.indexOf(“image”) !== -1) {
// Represent image as a file,
imgBlob = image[imgCount].getAsFile();
var imgName = imgBlob.name;
var modifiedDate = imgBlob.lastModified;
imageName = modifiedDate +”_”+imgName; //This is unique name for image and create a temporary URL to the object
var objUrl = window.URL || window.webkitURL;
var source = objUrl.createObjectURL(imgBlob);
}
readImageFile(imageName,imgBlob);
}
}
}
}
//Function to read image file and buffer it
var fileName;
function readImageFile(imageName,imgBlob) {
fileName = imageName;
//Read File contents using file reader
var reader = new FileReader();
reader.onload = function(e) {
uploadFileinLibrary(e.target.result, fileName);
}
reader.onerror = function(e) {
console.log(“Error: ” + e.target.error);
}
reader.readAsArrayBuffer(imgBlob);
}
Now the image must change into Base 64 encoder. It is mandatory to convert image into 64 bit code and upload image in document library.
var attachmentFiles;
function uploadFileinLibrary(arrayBuffer, fileName) {
//Get Client Context,Web and List object.
var clientContext = new SP.ClientContext();
var oWeb = clientContext.get_web();
var oList = oWeb.get_lists().getByTitle(‘DocumentLibrary’);
var bytes = new Uint8Array(arrayBuffer);
var out = ”;
for (var img = 0, length = bytes.length; img < length; img += 1) {
out += String.fromCharCode(bytes[img]);
}
base64 = btoa(out); //Image is converted into base64.
var createFileInfo = new SP.FileCreationInformation();
createFileInfo.set_content(base64);
createFileInfo.set_url(fileName);
var uploadedDocument = oList.get_rootFolder().get_files().add(createFileInfo)
clientContext.load(uploadedDocument);
clientContext.executeQueryAsync(QuerySuccesstoUploadImg, QueryFailuretoUploadImg);
}
//Succeed to upload image in document library
function QuerySuccesstoUploadImg(){
GetImagetoPaste(fileName);
}
//Failed to upload image in document library
function QueryFailuretoUploadImg(sender, args){
//Request failed to upload image.
console.log(“Error – ” + args.get_message() + ” . Stack Trace – ” + args.get_stackTrace());
}
Once the image is uploaded in document library we will fetch the image to paste in the field and create image tag and add “src” attribute in which we will pass our image url. Here is one point to notice that we must append our image to the “richText-editor” class because this is the class in which all the action performed.
function GetImagetoPaste(nameofFile) {
var getSpContext = new SP.ClientContext();
var getSpList = getSpContext.get_web().get_lists().getByTitle(“DocumentLibrary”);
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml(“<View><Query><Where><Eq><FieldRef Name=’FileLeafRef’/><Value Type=’File’>” + nameofFile+ “</Value></Eq></Where></Query></View>”);
this.getReturnedItems = getSpList.getItems(camlQuery);
getSpContext.load(getReturnedItems);
getSpContext.executeQueryAsync(onQuerySucceededGetImage,onQueryFailedImage);
}
//Succeed to get uploaded image from the document library
function onQuerySucceededGetImage(){
var getEnumImage = getReturnedItems.getEnumerator();
while (getEnumImage.moveNext()) {
var getImage = getEnumImage.get_current();
var nameImage = getImage.get_item(“FileLeafRef”);
imageUrl = “URL”+nameImage;
var img = $(document.createElement(‘img’));
img.attr(‘src’, imageUrl);
$(img).appendTo(‘.richText-editor’);
}
}
//Failed to get uploaded image from the document library
function onQueryFailedImage(sender, args){
console.log(‘Request failed to get image – ‘ + args.get_message() + ‘ . Stack Trace – ‘ + args.get_stackTrace());
}
Output will look like as below:
