upload images with lightning:inputRichText

Question

I'm not sure if I am just completely missing something or no one asks this question but I can't find a solution to this. I have a requirement to be able to upload images into the body of a rich text field which is being used to facilitate back and fourth communication in a SFDC community <> console.

I've built a lightning app which works well except I can't figure out how I'm supposed to upload images into the field. Is lightning:inputRichText even capable of doing so? There is no documentation that says it doesn't and it's supposed to replace the legacy ui:richText field (which does not allow for local import anyways). I've also tried the CKEditor approach and that also does not support local import, not to mention with lockerservice enabled it does not render.

I'm totally stumped, any help is appreciated.

Here is my component in case it helps:

<aura:component controller="caseCommentsController" implements="force:appHostable,forceCommunity:availableForAllPageTypes,force:hasRecordId" access="global">

<!-- display case comments -->
<div class="container slds-p-top--medium">
    <div id="list" class="row">
        <aura:iteration items="{!v.comments}" var="comment">
            <c:caseCommentsList comment="{!comment}"/>
        </aura:iteration>
    </div>   
</div> 

<!-- input form using components -->
<div class="container slds-p-top--large">
    <form class="slds-form--stacked">
        <div class="slds-form-element">
            <div class="slds-form-element__control">
                <!-- ui:inputText aura:id="caseid" disabled="true"
                           value="{!v.newComment.Case__c}"/ -->               
            </div>
        </div>
     <div class="slds-form-element">
       <div class="slds-form-element__control">
         <lightning:inputRichText aura:id="addComment" 
                                  disabledCategories="FORMAT_FONT"
                                  placeholder="Add a comment..."
                                  value="{!v.newComment.Comment__c}"/>                              
        </div>
      </div>
      <div class="slds-form-element">
        <ui:button label="Add Comment" 
                   class="slds-button slds-button--neutral"
                   labelClass="label"
                   press="{!c.createComment}"/>
      </div>    
</form>

Answer 1

Did you try copying and pasting the image ? I am in similar scenario - the image is pasted Ok, but the lightning page renders just with the link of the image instead of actually showing the image. I dont think the 'attach' option to upload image is not available on lightning:inputRichtext yet.

Answer 2

You can add a file input field in addition to the lightning:inputRichText. Handle file upload with JS controller and add the base64 of the image to a src attribute. Then finally append this element to the end of the lightning:inputRichText value. Doing this the uploaded image will appear at the end of the rich text.

Lightning component:

<lightning:input name="file1" type="file" label="Add image" multiple="false" accept="image/png" onchange="{! c.handleFilesChange }"/>
<lightning:inputRichText value="{!v.richtextvalue}" />

JS controller:

handleFilesChange : function (component, event, helper) {
    var files = event.getSource().get("v.files");
    if(files){
        var file = files[0]
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function () {
            var template = component.get("v.richtextvalue");
            if(template===undefined) template = '';
            template += '<img src="'+reader.result+'"/>';
            component.set("v.richtextvalue",template);
        };
        reader.onerror = function (error) {
            console.log('Error: ', error);
        };
    }
},

Note that when saving this richtextvalue to a richtext field on an object, sf will take your base64 src and convert it to a url pointing to the image which they saved to documentforce.com This url is sadly not publicly accessible and will return a 404 when used outside your salesforce org. So thread carefully.

Answer 3

Have a look at the code below

<lightning:inputRichText variant="bottom-toolbar" value="{!v.myVal}" placeholder="Type something interesting">
        <lightning:insertImageButton/>
</lightning:inputRichText>

This should give the upload image within the rich text