Add preview and usage counter to blogs uploads

I received several complaints from users who struggle to identify uploaded images in the File Uploads section of blogs. This happens because pasted images get cryptic filenames like editor_image_ + UUID, making it challenging to identify and delete unused images.

To solve this problem, I used the customizer to load additional JavaScript that adds more information to this view, helping users make informed decisions about which images can be safely deleted.

JSON to import in customizer

#

{
    "name": "Blog File Uploads",
    "title": "Add preview and counter to Blog File Uploads",
    "description": "Adding a bit more value for users to Blogs File Uploads",
    "services": [
        "Connections",
        "Customizer"
    ],
    "state": "enabled",
    "extensions": [
        {
            "name": "Blogs",
            "type": "com.ibm.customizer.ui",
            "payload": {
                "include-files": [
                    "stoeps-customizer-css/blog-upload-preview.js",
                    "stoeps-customizer-css/blog-upload.css"
                ],
                "match": {
                    "url": "roller-ui/authoring/uploadFiles.do"
                },
                "cache-headers": {
                    "cache-control": "max-age=0"
                }
            },
            "path": "blogs",
            "state": "enabled"
        }
    ]
}

There is a very good article on the different options of Customizer payloads. I used it to find the "match":{"url": "roller-ui/..."} option to include the JavaScript and CSS only for the upload URL.

Installation Files

#

Download these files and copy them to the customizer NFS share (/pv-connections/customizer) in the folder stoeps-customizer-css (or adjust paths in the customizer app):

• blog-upload.css
• blog-upload-preview.js

How It Works

#

After injecting blog-upload-preview.js, a new button appears that lets users add a preview column to the images and displays a counter showing how often each image is used within the blog.

When you click the button, the view transforms:

You can view any image at its full size by clicking on it. The enlarged view closes when you click anywhere outside the image.

With this enhancement, you can easily identify unused images and directly select them for deletion, making blog maintenance significantly easier.