Getting error "Unknown property 'Product2StandardController.imageURL'" trying to access property from standard controller extension class

Question

This is a follow up to my previous question here: How to add an "Upload Image" button to an object that automatically inserts the URL of the image into a field

I am trying to add a file upload widget to the Product2 object that stores the uploaded file URL in a rich text field.

I received the following answer from the user Hemant Jain: https://salesforce.stackexchange.com/a/194146/49567

I am not clear on the details of how this should be implemented, but I assume it is a widget that is embedded in the Product page layout. To embed a visualforce widget into a page layout, you must use the standard controller for that object. However, to add a custom method like that, you need to extend the standard controller with an extension class.

I ran into some issues trying to use this code and made some modifications to resolve the errors (see my comments on the answer) and also replaced the JQuery in the Visualforce page with vanilla javascript. However, I am now getting the error "Unknown property 'Product2StandardController.imageURL'" in my Visualforce page.

Here is my Apex extension class:

public class ProductPhotosExtension {
    private final Product2 prod;

    public ProductPhotosExtension(ApexPages.StandardController stdController) {
        this.prod = (Product2)stdController.getRecord();
    }

    public PageReference upload() {
        String theURL = ApexPages.currentPage().getParameters().get('theURL');
        theURL = theURL.substring(theURL.indexOf(',') +1);

        Blob encodedBlob = EncodingUtil.base64Decode(theURL);

        Document document = new Document();
        document.body = encodedBlob;

        document.AuthorId = UserInfo.getUserId();
        document.FolderId = 'the id of our product photos folder';
        document.Name = prod.Name;

        try {
            insert document;
            String imageURL = '/servlet/servlet.FileDownload?file=';
            imageURL = imageURL + document.id;
        } catch (DMLException e) { ApexPages.addMessage(new ApexPages.message(ApexPages.severity.ERROR, 'Error uploading file')); return null;
        }

        finally { document.body = null; document = new Document(); }
        return null;
    }
}

Here is my Visualforce page:

<apex:page standardController="Product2" extensions="ProductPhotosExtension">
    <input id="fileImageId" type="file" accept="image/*"/>

    <apex:actionFunction name="callUploadMethod" action="{!upload}"
                         oncomplete="fillRichTextArea('{!imageURL}')">
        <apex:param name="theURL" value=""/>
    </apex:actionFunction>

    <div id="waitMessage" style="display: none">
        Please wait...
    </div>

    <script>
        var input_div = document.getElementById('fileImageId');
        var wait_div = document.getElementById('waitMessage');
        input_div.onchange(function(event) {
            var file = event.target.files[0];
            var reader = new FileReader();
            reader.onload = function(event) {
                dataurl = event.target.result;
                wait_div.style.display = 'block';
                callUploadMethod(dataurl);
            }
            reader.readAsDataURL(file);
        });

        function fillRichTextArea(imageURL) {
            var heightValue = "375";
            var widthValue = "500";
            for(var i in CKEDITOR.instances) {
                CKEDITOR.instances[i].insertHtml(
                    "<img src='" + imageURL + "' height='" + heightValue + 
                    " width=" + widthValue + "'/>"
                );
            wait_div.style.display = 'none';
        }                
    </script>
</apex:page>

If I remove oncomplete="fillRichTextArea('{!imageURL}')", I get the error "(under ) must occur between tags."

I am not sure how to fix this problem. Some feedback on how to get this working would be greatly appreciated.

Answer 1

You have to define the variable like this -

public String imageURL {get;set;}

I think this should be helpful for you