How To Add Image Upload Control In React Quill Rich Text Editor

Introduction

In this article, we will learn how can we allow users to upload images in a rich text editor in the SPFx web part.

When you copy and paste the image in React quill text editor, it will be pasted successfully and if you inspect this image from the developer tool of the browser you can see there will be a base64 string of images.

And when you save it, it will not be saved in the rich text column of your SharePoint list. Even only copy-paste in a rich text column in the list directly will also not save the image. SharePoint column will store the image in a rich text editor if the reference is of any SharePoint itself or any image URL which is accessible anonymously.

So, let’s see how can we achieve image upload functionality in the SPFx web part’s rich text editor control.

Follow the below steps to achieve this functionality:

Steps

Step 1

Upload package of the react quill using the below command:

npm i react-quill

Step 2

Import package in SPFx web part as below:

import ReactQuill from 'react-quill';

Step 3

Declare a global variable. This variable will be used as context for our rich text editor control.

var quillObj: any;

Step 4

Add react quill control in render method as below:

<ReactQuill
ref={(el) => {
quillObj = el;
}}
value={this.state.Description}
modules={{
toolbar: {
container: [
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
['bold', 'italic', 'underline'],
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
[{ 'align': [] }],
['link', 'image'],
['clean'],
[{ 'color': [] }]
],
handlers: {
image: this.imageHandler
}
},
table: true
}}
placeholder="Add a description of your event"
onChange={(content, delta, source, editor) => this.onDescriptionChange(content, editor)}
id="txtDescription"
/>

In the above code, you can see ['link', 'image'] in the container options. When you add an Image in the container array, it will display the image upload icon in the rich text control as shown in the below screenshot.

Step 5

Now when clicks on the Image upload icon, we need to define which method should be called. So we need to define this method in handlers. So in control, we need to define handlers in the toolbar section:

handlers: {
image: this.imageHandler
}

Step 6

Now imageHandler method will have code as below,

public async imageHandler() {
const input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');
input.click();
input.onchange = async () => {
var file: any = input.files[0];
var formData = new FormData();
formData.append('image', file);
var fileName = file.name;
const res = await this.uploadFiles(file, fileName, quillObj);
};
}

When the user clicks on the image icon of rich text control, it will call the above method. This method will create a control for file upload and call on the click method of file upload control.
So, on clicking the image icon of the rich text box, it will open the file selection popup and allow to select only the image file.
In imageHandler method, we also defined what should be done once the user selects the image from the file selection popup.

Step 7

Now, when the user selects the image, we need to upload the selected image in the particular SharePoint document library. So, create new document library if you want to upload an image in the specific document library, else you can also use the default available Shared Documents library.

Step 8

Here in the above code also you can see we are calling uploadFiles method. The code in the uploadfiles method will be as below,

public async uploadFiles(uploadFileObj, filename, quillObj) {
var libraryName = "ImageFiles";
var context = this.props.context;
var siteUrl = this.props.context.pageContext.site.absoluteUrl;
var currentdate = new Date();
var fileNamePredecessor = currentdate.getDate().toString() + currentdate.getMonth().toString() + currentdate.getFullYear().toString() + currentdate.getTime().toString();
filename = fileNamePredecessor + filename;
//To Upload in root folder
var apiUrl = `${siteUrl}/_api/Web/Lists/getByTitle('${libraryName}')/RootFolder/Files/Add(url='${filename}', overwrite=true)`;
const digestCache: IDigestCache = this.props.context.serviceScope.consume(DigestCache.serviceKey);
digestCache.fetchDigest(
this.props.context.pageContext.web.serverRelativeUrl)
.then(async (digest: string): Promise<void> => {
try {
if (uploadFileObj != '') {
fetch(apiUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json;odata=verbose',
"X-RequestDigest": digest
},
body: uploadFileObj // This is your file object
}).then((response) => {
console.log(response);
const range = quillObj.getEditorSelection();
var res = siteUrl + "/" + listName + "/" + filename;
quillObj.getEditor().insertEmbed(range.index, 'image', res);
}).catch((error) =>
console.log(error)
);
}
}
catch (error) {
console.log('uploadFiles : ' + error);
}
})
}

In the above code, the document library name is ImageFiles. Once the file is uploaded successfully, we will return the URL of the uploaded image to a rich text editor and will render the image in rich text control using the below line of code

quillObj.getEditor().insertEmbed(range.index, 'image', res);

The image will be rendered at the particular place where the cursor’s position using quillObj which we have defined as a global variable and then used while rendering control.
Now when the user selects the image, it will first be uploaded to the SharePoint document library and then use the uploaded files URL to load the image in the rich text box.

When you inspect the image in rich text control, you can see the URL of the image, not the base 64 string of the image.

While saving into the list, when you get the value of rich text control, it will return the image control with the URL of the image. So in the list also it will store the URL of an image.

Conclusion

This is how we can use image upload functionality in the react quill rich text editor in the SPFx custom web part.

Hope this article will be helpful!