trick Archives - European Sharepoint 2013 Hosting Blog

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

1	npm i react-quill

Step 2

Import package in SPFx web part as below:

import ReactQuill from <span class="string">'react-quill'</span>;

1	import ReactQuill from <span class="string">'react-quill'</span>;

Step 3

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

var quillObj: any;

1	var quillObj: any;

Step 4

Add react quill control in render method as below:

&lt;ReactQuill  

              <span class="keyword">ref</span>={(el) =&gt; {  

                quillObj = el;  

              }}  

              value={<span class="keyword">this</span>.state.Description}  

              modules={{  

                toolbar: {  

                  container: [  

                    [{ <span class="string">'header'</span>: [1, 2, 3, 4, 5, 6, <span class="keyword">false</span>] }],  

                    [<span class="string">'bold'</span>, <span class="string">'italic'</span>, <span class="string">'underline'</span>],  

                    [{ <span class="string">'list'</span>: <span class="string">'ordered'</span> }, { <span class="string">'list'</span>: <span class="string">'bullet'</span> }],  

                    [{ <span class="string">'align'</span>: [] }],  

                    [<span class="string">'link'</span>, <span class="string">'image'</span>],  

                    [<span class="string">'clean'</span>],  

                    [{ <span class="string">'color'</span>: [] }]  

                  ],  

                  handlers: {  

                    image: <span class="keyword">this</span>.imageHandler  

                  }  

                },  

                table: <span class="keyword">true</span>  

              }}  

              placeholder=<span class="string">"Add a description of your event"</span>  

              onChange={(content, delta, source, editor) =&gt; <span class="keyword">this</span>.onDescriptionChange(content, editor)}  

              id=<span class="string">"txtDescription"</span>  

            /&gt;

<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: <span class="keyword">this</span>.imageHandler  

}

handlers: {

image: this.imageHandler

}

Step 6

Now imageHandler method will have code as below,

<span class="keyword">public</span> async imageHandler() {  

    <span class="keyword">const</span> input = document.createElement(<span class="string">'input'</span>);  

  

    input.setAttribute(<span class="string">'type'</span>, <span class="string">'file'</span>);  

    input.setAttribute(<span class="string">'accept'</span>, <span class="string">'image/*'</span>);  

    input.click();  

  

    input.onchange = async () =&gt; {  

      var file: any = input.files[0];  

      var formData = <span class="keyword">new</span> FormData();  

  

      formData.append(<span class="string">'image'</span>, file);  

  

      var fileName = file.name;  

  

      <span class="keyword">const</span> res = await <span class="keyword">this</span>.uploadFiles(file, fileName, quillObj);  

    };  

  }

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,

<span class="keyword">public</span> async uploadFiles(uploadFileObj, filename, quillObj) {  

    var libraryName = <span class="string">"ImageFiles"</span>;  

    var context = <span class="keyword">this</span>.props.context;  

    var siteUrl = <span class="keyword">this</span>.props.context.pageContext.site.absoluteUrl;  

  

    var currentdate = <span class="keyword">new</span> Date();  

    var fileNamePredecessor = currentdate.getDate().toString() + currentdate.getMonth().toString() + currentdate.getFullYear().toString() + currentdate.getTime().toString();  

  

    filename = fileNamePredecessor + filename;  

  

    <span class="comment">//To Upload in root folder</span>  

    var apiUrl = `${siteUrl}/_api/Web/Lists/getByTitle(<span class="string">'${libraryName}'</span>)/RootFolder/Files/Add(url=<span class="string">'${filename}'</span>, overwrite=<span class="keyword">true</span>)`;  

    <span class="keyword">const</span> digestCache: IDigestCache = <span class="keyword">this</span>.props.context.serviceScope.consume(DigestCache.serviceKey);  

    digestCache.fetchDigest(  

      <span class="keyword">this</span>.props.context.pageContext.web.serverRelativeUrl)  

      .then(async (digest: <span class="keyword">string</span>): Promise&lt;<span class="keyword">void</span>&gt; =&gt; {  

        <span class="keyword">try</span> {  

          <span class="keyword">if</span> (uploadFileObj != <span class="string">''</span>) {  

            fetch(apiUrl, {  

              method: <span class="string">'POST'</span>,  

              headers: {  

                <span class="string">'Content-Type'</span>: <span class="string">'application/json;odata=verbose'</span>,  

                <span class="string">"X-RequestDigest"</span>: digest  

              },  

              body: uploadFileObj <span class="comment">// This is your file object</span>  

            }).then((response) =&gt; {  

              console.log(response);  

              <span class="keyword">const</span> range = quillObj.getEditorSelection();  

  

              var res = siteUrl + <span class="string">"/"</span> + listName + <span class="string">"/"</span> + filename;  

  

              quillObj.getEditor().insertEmbed(range.index, <span class="string">'image'</span>, res);  

            }).<span class="keyword">catch</span>((error) =&gt;  

              console.log(error)  

            );  

          }  

        }  

        <span class="keyword">catch</span> (error) {  

          console.log(<span class="string">'uploadFiles : '</span> + error);  

        }  

  

      })  

  }

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.

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

Posts tagged trick

SharePoint 2013 Hosting – HostForLIFE :: How To Add Image Upload Control In React Quill Rich Text Editor?

Steps

SharePoint 2013 Hosting – HostForLIFE :: How to Clear Your SharePoint Designer 2010/2013 Cache?

BLOGROLL

Featured On

Posts tagged trick

SharePoint 2013 Hosting – HostForLIFE :: How To Add Image Upload Control In React Quill Rich Text Editor?

Steps

SharePoint 2013 Hosting – HostForLIFE :: How to Clear Your SharePoint Designer 2010/2013 Cache?

BLOGROLL

Featured On

Tags