Integrating a Visual HTML Editor With Filestack for Simple OCR Processing

When building web applications, it is common to include ways for users to work with images and text. A helpful approach is to give users a visual way to write text and then connect it to tools that can handle images, too. One such approach is to combine a visual HTML WYSIWYG editor like Froala with Filestack’s services. Filestack makes it easy to upload images, process them, and even perform Optical Character Recognition (OCR). OCR tries to read text inside images and turn it into editable text. This blog will show how to integrate Froala and Filestack to make this possible. We will keep things simple and to the point, focusing only on what a developer needs to know, without extra marketing language.

What Are Froala and Filestack?

Froala is a visual HTML editor. It allows users to type text, format it, and add images without needing to know HTML tags. It is often used in web forms, blogs, and other places where rich text editing is needed. By using Froala, developers can let end-users create content without having to learn code.

Filestack, on the other hand, is a tool that handles file uploads and different transformations. For example, it can help convert images, resize them, and run OCR to extract text. It is a convenient tool since you do not have to set up your own backend to handle these tasks. You can just call its API from your code.

Why Combine Froala and Filestack?

When building a web app, you might want a single place where users can write text and also add images. That way, they can include images that contain text they want to extract. With Froala as your visual HTML editor, the user can write some notes and upload images right there in the editor. Filestack can then handle the uploaded image, run OCR on it, and return the extracted text. Finally, you can show that OCR text in a separate part of the page or even insert it back into the editor as text.

Basic Requirements

To follow along, you need a working HTML page, access to Froala Editor, and a Filestack account. With Filestack, you will get an API key, and from that, you can set security rules if needed. You will need three important values from Filestack:

1. API Key: This is the main key to interact with Filestack’s services. Get your Filestack API here for free.
2. Policy and Signature: These are security elements. You can generate them to control which Filestack actions are allowed in your application.

Once you have these values, you can load Froala and Filestack scripts into your HTML file and write some JavaScript to tie them together.

Structure of the Code

The example code sets up a Froala editor inside a <div> element with the ID editor. It also includes another <div> with the ID ocrResult. This ocrResult area will show the text that comes from the OCR process. Once the user uploads an image using the Froala editor’s file picker (which is powered by Filestack), we use Filestack’s API to run OCR on the image. If the image has any readable text, we print it in that ocrResult section.

The code loads several scripts:

• Froala Editor CSS and JS
• Filestack JS and Filestack drag-and-drop JS
• Filestack transforms UI JS and CSS

It then creates a new Froala editor instance with certain configuration options. In particular, the filestackOptions object tells Froala to upload images only to Filestack. When a file is successfully uploaded, a filestack.uploadedToFilestack event is triggered. We listen for this event and, once it fires, we grab the handle of the uploaded file from the response. The handle is a unique identifier for the file on Filestack’s servers.

Using this handle, we form an OCR URL. This URL includes the API key, policy, signature, and the ocr conversion call. When we fetch that URL, Filestack returns a JSON object containing the recognized text. We extract the text and place it into the ocrResult area.

Below is a code sample that shows how to integrate a visual HTML editor (Froala) with Filestack’s OCR capability. It uses a basic HTML page with Froala’s editor, Filestack scripts, and a bit of JavaScript to tie them together. Make sure to replace the API_KEY, POLICY, and SIGNATURE values with your own from Filestack.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Froala + Filestack + OCR</title>

  <!-- Load Froala Editor CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />

  <!-- Load Filestack File Picker JS & CSS -->
  <script src="https://static.filestackapi.com/filestack-js/3.32.0/filestack.min.js"></script>       
  <script src="https://static.filestackapi.com/filestack-drag-and-drop-js/1.1.1/filestack-drag-and-drop.min.js"></script>

  <!-- Load Filestack Transformation UI JS & CSS -->
  <script src="https://static.filestackapi.com/transforms-ui/2.x.x/transforms.umd.min.js"></script>
  <link rel="stylesheet" href="https://static.filestackapi.com/transforms-ui/2.x.x/transforms.css" />

  <!-- Load Froala Editor JS -->
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/js/froala_editor.pkgd.min.js"></script>

  <style>
    #editor {
      margin-top: 20px;
    }
    #ocrResult {
      margin-top: 20px;
      padding: 10px;
      border: 1px solid #ccc;
      white-space: pre-wrap;
      font-family: monospace;
    }
  </style>
</head>
<body>
  
  <h1>Froala Editor with Filestack OCR Integration</h1>

  <!-- Froala Editor Container -->
  <div id="editor"></div>

  <!-- OCR Result Container -->
  <div id="ocrResult">OCR Result will appear here after image upload...</div>

  <script>
    // Replace with your Filestack credentials:
    const API_KEY = 'YOUR_FILESTACK_API_KEY';
    const POLICY = 'YOUR_FILESTACK_POLICY';
    const SIGNATURE = 'YOUR_FILESTACK_SIGNATURE';
    
    new FroalaEditor('#editor', {
      filestackOptions: {
        uploadToFilestackOnly: true,
        filestackAPI: API_KEY
      },
      events: {
        'filestack.uploadedToFilestack': function (response) {
          console.log("File uploaded to Filestack:", response);

          const fileData = response.filesUploaded && response.filesUploaded[0];
          const handle = fileData && fileData.handle;

          if (!handle) {
            document.getElementById('ocrResult').textContent = 'Could not find a handle for the uploaded file.';
            return;
          }

          // Build OCR URL
          const ocrUrl = `https://cdn.filestackcontent.com/${API_KEY}/security=p:${POLICY},s:${SIGNATURE}/ocr/${handle}`;

          // Fetch OCR result
          fetch(ocrUrl)
            .then((res) => {
              if (!res.ok) {
                throw new Error(`HTTP error! Status: ${res.status}`);
              }
              return res.json();
            })
            .then((ocrResult) => {
              const ocrText = ocrResult.text || 'No text found';
              document.getElementById('ocrResult').textContent = ocrText;
            })
            .catch((error) => {
              console.error('Error with OCR:', error);
              document.getElementById('ocrResult').textContent = `Error: ${error.message}`;
            });
        }
      },
    });
  </script>
</body>
</html>

Step-by-Step Explanation

1. Set up the HTML structure:
   You create a basic HTML page with two main parts. The first part is the editor area, where Froala will be placed. The second part is a separate <div> where the OCR text will appear.
2. Load the scripts and styles:
   Include the CSS and JS files for Froala and Filestack. Doing this from a CDN is the simplest. Your <head> section might have several <link> and <script> tags that import Froala and Filestack code.
3. Initialize the Froala Editor:
   After the page loads, you create a new Froala editor instance by calling new FroalaEditor('#editor', { ... }). Inside this object, you can set various options. One important option is filestackOptions. By giving Froala the filestackAPI and setting uploadToFilestackOnly: true, you direct all uploads to Filestack.
4. Handle the Uploaded Event:
   Froala’s events allow you to run code after an image is uploaded. For this, you use the filestack.uploadedToFilestack event. In the code, there is a callback function that runs when the event fires. Inside that function, we look at response.filesUploaded[0].handle. This handle is a string that identifies the uploaded file on Filestack’s storage. If we have that handle, we can move on to the OCR step.
5. Call the OCR Endpoint:
   We build a URL that looks like this:
   https://cdn.filestackcontent.com/yourApiKey/security=p:yourPolicy,s:yourSignature/ocr/fileHandle
   When we fetch this URL, Filestack tries to perform OCR on the file. If OCR is possible, it returns a JSON object with a text field. If it cannot find any text, it might return a message that no text was found.
6. Show the OCR Result:
   Once we get the OCR text, we set document.getElementById('ocrResult').textContent = ocrText;. This replaces the placeholder text with the actual recognized text. If there was an error, we show an error message.

Working With the OCR Text

After you have extracted the text from the image, you can decide what to do with it. In this simple example, we only show it below the editor. But you could do more:

• Insert the OCR text back into the editor so the user can edit it.
• Store the OCR text in a database.
• Send the OCR text somewhere else in your application.

The main idea is that you now have machine-readable text from an image that was uploaded through a visual HTML editor.

Common Problems and Tips

1. Missing API Key or Security Information:
   Make sure to replace API_KEY, POLICY, and SIGNATURE in the code with your own values from Filestack. If these are missing or wrong, the OCR call will fail.
2. Browser Console Errors:
   If something does not work, open the browser’s JavaScript console. Check for error messages. Common issues include wrong URLs, missing files, or network errors.
3. No Text in Images:
   OCR works best on images that have clear, readable text. If the image contains handwritten notes or very small text, OCR might fail or return no text. Try using images with printed text for the best results.
4. Performance:
   For large images, OCR can take a few seconds. During this time, do not assume that the application has frozen. Wait for the promise to resolve and handle both success and error cases.

Why This Matters

In many web apps, users want to share images that contain text. For example, a teacher might scan a page from a textbook or a student might upload notes written on a whiteboard. By combining a visual HTML editor with Filestack’s OCR, you can make that text searchable and editable right inside your web application. This can save time and make your content more dynamic.

Conclusion

Integrating a visual HTML editor like Froala with Filestack’s OCR feature is not hard. With a few lines of code, you can add a feature where users upload images and get back machine-readable text. This text can then be displayed, edited, or stored as needed. The code example provided is a good starting point. From here, you can adjust the logic, handle errors more gracefully, or improve the UI. But at its core, this shows how simple it can be to bring text recognition into a web app’s workflow.

Remember to test with different images. Also, keep security in mind and do not expose secret keys on the client side if possible. With these steps, you can create a more useful and user-friendly web editing experience.

Get your Filestack API here for free.