0

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.

  • 1
    the error message is because there is no controller property with a public getter named imageURL – cropredy Oct 2 '17 at 22:14
  • OK, I added private String imageURL; to the top of the contents of my ProductPhotosExtension class, removed the String prefix from the imageURL reference in the try/catch block, and added a public getter method public String getImageURL() { return imageURL; } Now I get the error "(under ) must occur between tags" in my VF page. Not sure what this error means or how to fix. Please advise. – ag415 Oct 2 '17 at 22:25
  • Your comment is unclear, probably some of your formatting disappeared. I think you need to have apex:actionFunction tag inside apex:form tag, is that it? – eyescream Oct 2 '17 at 22:28
  • Yeah, that solved the error. Thank you. The VF page and Apex controller are saving without errors now. Looks like the answer Hemant Jain gave me was incomplete and was (is?) missing some code. There's a few issues with the javascript I need to work out. I made a mistake, input_div.onchange(function(event) { should be input_div.onchange = function(event) {. – ag415 Oct 2 '17 at 22:37
  • Yeah. It all saves fine but it doesn't actually work. I need it to take the uploaded image, save it in the Documents object and then insert the URL into the field, but it's not doing that. The widget embeds fine and I'm able to click "browse" and add a file, but nothing happens after that. When I refresh the page the rich text field is still blank. It seems like the code snippet he posted was part of some larger implementation and I don't know how he had it working. Looks like its back to the drawing board... – ag415 Oct 2 '17 at 22:40
1

You have to define the variable like this -

public String imageURL {get;set;}

I think this should be helpful for you

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.