Apex Code Development You need to sign in to do that
Don't have an account?
JDallas upload images with lightning:inputRichText
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.
Whats weird is the editor we use here allpows for this functionality!!! I'm totally stumped, any help is appreciated.
Here is my component in case it helps:
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.
Whats weird is the editor we use here allpows for this functionality!!! 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">
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:attribute name="comments" type="Case_Comments__c[]"/>
<aura:attribute name="newComment" type="Case_Comments__c"
default="{ 'sobjectType': 'Case_Comments__c'
}"/>
<!-- 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}"/>
<!-- ui:inputRichText aura:id="addComment" required="true" 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>
</div><!-- ./container-->
</aura:component>
Did you try copying and pasting the image? The image gets pasted Ok, but the lightning page renders just with the link of the image instead of actually showing the image. I don't think the 'attach' option to upload image is not available on lightning:inputRichtext yet.
Hope this helps.
Please mark this as solved if it's resolved so that others get benefitted.
Thanks,
Nagendra.
It works but I would have rather used lightning which Salesforce keeps pushing on us, unfortunately it's only half baked.
I also face similar situation but Somehow I makeshift thing by explicitly defining richtext body in JS Controller.
this.body = `<p> <img src ="data:image/${this.fileNames.substring(this.fileNames.lastIndexOf('.')+1)};base64,${this.filesUploaded[0]['VersionData']}" style="width: ${this.width}px; height: ${this.height}px;" > </p> <p> first </p>`I explicitly put img tag and add my file in base 64 format. It works for me.