googleads
Handling images in Handsontable - JavaScript Spreadsheet Library
preloder
Standard Technical Tips & Tricks

Handling images in Handsontable

In this article, we are going to see what is Handsontable, how to integrate Handsontable and most importantly, how to handle images in Handsontable cells. Let’s get into it! For starters, let us see

What is Handsontable?

Handsontable is a free and open source JavaScript plugin, which is a made up of several spreadsheet components for apps and websites. It is written in JavaScript and not constrained by any external framework. With Handsontable, you can easily do all CRUD operations and provide end-users with an Excel-like experience.

Why this article? 

Sometime back, I had this requirement to handle images in the table. To be precise, I had to edit the inline table with images. Although Handsontable provides many cool features like Excel, handling images in Handsontable is quite difficult. In my website (project), I used Handsontable to display user data grid with inline edit feature. The exact requirement was to upload an image from a cell. On searching for a solution I got to know that we can customize cell the editor with the Handsontable. With a custom cell editor, I worked on uploading an image and it was successful. Let me walk you through the steps I followed:

Installing Handsontable:

There are many ways to install Handsontable. For an instant fix, you can work on jSFiddle.

  1. Install using Bower package manager.
 

  1. Download Handsontable from GitHUB
 

  1. Embed script with CDN url.
 

 

Basic Example of Handsontable:

 

Handling image in Handsontable:

Basically, we can build a new editor from scratch, by creating a new editor class, which inherits from BaseEditor, or if you just want to enhance an existing editor, you can extend its class and override only a few of its methods.

For my process I will create an UploadEditor which works exactly like regular TextEditor except that it displays an images input instead of text area.  While customising the editor we should override the following methods:

  1. setValue
  2. getValue
  3. focus
  4. close

Let’s begin with the UploadEditor. Following is the code for the same:

 

Here I have created a new editor class, that inherits from TextEditor and then override some of its methods to replace the <textarea> with input:file. But, Handsontable cannot handle file input like <textarea>, so we have written some external script to handle file input and you may notice that it calls internal createElements() method, which creates <textarea> node and appends it to DOM during editor initialization.

Here is the code to render custom html/image in Table Cell:

 

Here, did you see that I have written custom render function named coverRenderer()? This will add the image url into HTML IMG tag so that the required image will be displayed in table cell.

Following is the script to render the Handsontable that has been created for the purpose:

 

To save the image into the local server, inside the server.php,

 

HTML Code:

 

Conclusion:

As you can see, the CustomEditor is a cool feature available in Handsontable. Using this feature we can create our own editor. The example that we discussed above provides a clearer picture on how to achieve inline editing and customising the Handsontable plugin to handle images in Handsontable. For more information, refer Handsontable Documents.

Happy Reading!!!

The following two tabs change content below.

Manikandan Thangaraj

A Passionate full stack developer with 9 years of experience in full stack web application development and expertise in technologies like PHP and Angular. He has huge craze in learning new things about technologies and constantly shares his knowledge with others.

Leave a Reply

Your email address will not be published. Required fields are marked *

[contact-form-7 id="120788" title="Web Page Form"]

Schedule Your Call