function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Raghavendra M 13Raghavendra M 13 

How can i solve the below error?

User-added image
 
NagendraNagendra (Salesforce Developers) 
Hi Raghavendra,

Sorry for this issue you are encountering.

May I request you please elaborate what exactly you are trying to achieve and when exactly you are getting this error so that we can look into it and can help you accordingly.

Happy to help further.

Thanks,
Nagendra
Raghavendra M 13Raghavendra M 13
When i am trying to Upload Multiple Images using Lightning Compoent

Problem:When Uploading image size is greater than 100 kb am facing above error
krisstannum1krisstannum1
Can you upload the code too?
Raghavendra M 13Raghavendra M 13
My code have more than 32000 characters can you send me your mail id i will send my code to your mail
Raghavendra M 13Raghavendra M 13
Apex Controller:
public class UploadAttachLightingCTRL
{
   @AuraEnabled
    public static Id saveChunk(Id parentId, String fileName, String base64Data, String contentType, String fileId) {
        // check if fileId id ''(Always blank in first chunk), then call the saveTheFile method,
        //  which is save the check data and return the attachemnt Id after insert, 
        //  next time (in else) we are call the appentTOFile() method
        //   for update the attachment with reamins chunks   
        if (fileId == '') {
            fileId = saveTheFile(parentId, fileName, base64Data, contentType);
        } else {
            appendToFile(fileId, base64Data);
        }
 
        return Id.valueOf(fileId);
    }
 
    public static Id saveTheFile(Id parentId, String fileName, String base64Data, String contentType) {
        base64Data = EncodingUtil.urlDecode(base64Data, 'UTF-8');
 
        Attachment oAttachment = new Attachment();
        oAttachment.parentId = parentId;
 
        oAttachment.Body = EncodingUtil.base64Decode(base64Data);
        oAttachment.Name = 'Uploaded Image_' +''+fileName;
        oAttachment.ContentType = contentType;
 
        insert oAttachment;
 
        return oAttachment.Id;
    }
 
    private static void appendToFile(Id fileId, String base64Data) {
        base64Data = EncodingUtil.urlDecode(base64Data, 'UTF-8');
 
        Attachment a = [
            SELECT Id, Body
            FROM Attachment
            WHERE Id =: fileId
        ];
 
        String existingBody = EncodingUtil.base64Encode(a.Body);
 
        a.Body = EncodingUtil.base64Decode(existingBody + base64Data);
 
        update a;
    }  
}
Component:
<aura:component implements="lightning:actionOverride,force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" controller="UploadAttachLightingCTRL">
    
    <aura:attribute name="parentId" type="Id" />
    <aura:attribute name="showLoadingSpinner" type="boolean" default="false" />
    
    <aura:attribute name="redirectaccount" type="string"/>

    
    <aura:attribute name="fileName" type="String" default="No File Selected.." />
    <aura:attribute name="fileNameone" type="String" default="No File Selected.." />
    <aura:attribute name="fileNametwo" type="String" default="No File Selected.." />
    <aura:attribute name="fileNamethree" type="String" default="No File Selected.." />
    <aura:attribute name="fileNamefour" type="String" default="No File Selected.." />
    
     <aura:attribute name="validfilelist" type="list"/>
     <aura:attribute name="validfilelisttwo" type="list"/>

    
    <aura:handler name="init" value="{!this}" action="{!c.onload}"/>
    <div style="padding: 1.25rem;border-radius:5px;background-color:white;">
        <h3 class="slds-section__title slds-theme_shade">
            <span class="slds-truncate slds-p-horizontal_small" title="Upload Attachment ">Upload Attachment</span>
        </h3>
        
        <center>
            <lightning:input aura:id="fileId" onchange="{!c.handleFilesChange}" type="file" name="file" multiple="false"/>      
            <div class="slds-text-body_small slds-text-color_error">{!v.fileName} </div>
            
            <!--use aura:if for show-hide the loading spinner image--> 
            <aura:if isTrue="{!v.showLoadingSpinner}">
                <div class="slds-text-body_small slds-text-color_error">Uploading... 
                    <img src="/auraFW/resources/aura/images/spinner.gif" class="spinner-img" alt="Loading"/>'
                </div>
            </aura:if>
            
            <!-- ######################### File one ################################ -->
            <lightning:input aura:id="fileId1" onchange="{!c.handleFilesChangetwo}" type="file" name="file1"  multiple="false"/>      
            <div class="slds-text-body_small slds-text-color_error">{!v.fileNameone} </div>
            
            <!--use aura:if for show-hide the loading spinner image--> 
            <aura:if isTrue="{!v.showLoadingSpinner}">
                <div class="slds-text-body_small slds-text-color_error">Uploading... 
                    <img src="/auraFW/resources/aura/images/spinner.gif" class="spinner-img" alt="Loading"/>'
                </div>
            </aura:if>
            
            <!-- ###################################### File two  ###################################-->
            <lightning:input aura:id="fileId2" onchange="{!c.handleFilesChangethree}" type="file" name="file2"  multiple="false"/>      
            <div class="slds-text-body_small slds-text-color_error">{!v.fileNametwo} </div>
            
            <!--use aura:if for show-hide the loading spinner image--> 
            <aura:if isTrue="{!v.showLoadingSpinner}">
                <div class="slds-text-body_small slds-text-color_error">Uploading... 
                    <img src="/auraFW/resources/aura/images/spinner.gif" class="spinner-img" alt="Loading"/>'
                </div>
            </aura:if>
            
            <!-- ###################################### File three  ###################################-->
            <lightning:input aura:id="fileId3" onchange="{!c.handleFilesChangefour}" type="file" name="file3"  multiple="false"/>      
            <div class="slds-text-body_small slds-text-color_error">{!v.fileNamethree} </div>
            
            <!--use aura:if for show-hide the loading spinner image--> 
            <aura:if isTrue="{!v.showLoadingSpinner}">
                <div class="slds-text-body_small slds-text-color_error">Uploading... 
                    <img src="/auraFW/resources/aura/images/spinner.gif" class="spinner-img" alt="Loading"/>'
                </div>
            </aura:if>
            
            <!-- ###################################### File Four  ###################################-->
            <lightning:input aura:id="fileId4" onchange="{!c.handleFilesChangefive}" type="file" name="file4"  multiple="false"/>      
            <div class="slds-text-body_small slds-text-color_error">{!v.fileNamefour} </div>
            
            <!--use aura:if for show-hide the loading spinner image--> 
            <aura:if isTrue="{!v.showLoadingSpinner}">
                <div class="slds-text-body_small slds-text-color_error">Uploading... 
                    <img src="/auraFW/resources/aura/images/spinner.gif" class="spinner-img" alt="Loading"/>'
                </div>
            </aura:if>
            
            <br/>
            
            <button class="slds-button slds-button_brand" onclick="{!c.doSave}">Upload Attachment</button>
        </center>
    </div>
</aura:component>
 
Raghavendra M 13Raghavendra M 13
Controller:
({
    onload : function(component, event, helper) 
    {
         component.set("v.parentId", component.get("v.recordId")); 
    },
    
    
    doSave: function(component, event, helper) 
    {
        var count=0;
        if(component.find("fileId").get("v.files") != null)
        {
            if(component.find("fileId").get("v.files").length > 0)
            {
                helper.uploadHelper(component, event,"one");
                count=1;
            } 
        }
        
       if(component.find("fileId1").get("v.files") != null)
       {
           if(component.find("fileId1").get("v.files").length > 0)
           {
               helper.uploadHelper(component, event,"two");
               count =1;
           } 
       }
       
       if(component.find("fileId2").get("v.files") != null)
       { 
            if(component.find("fileId2").get("v.files").length > 0)
            {
                helper.uploadHelper(component, event,"three");
                count =1;
            }
       }
        
        if(component.find("fileId3").get("v.files") != null)
        {
            if(component.find("fileId3").get("v.files").length > 0)
            {
                helper.uploadHelper(component, event,"four");
                count =1;
            }  
        }
        
        if(component.find("fileId4").get("v.files") != null)
        {
            if(component.find("fileId4").get("v.files").length > 0)
            {
                helper.uploadHelper(component, event,"five");
                count =1;
            }
        }
        
        if(count==0)
        {
            alert('Please upload at least one image.');
        }
        if(count==1)
        {
            var navEvt = $A.get("e.force:navigateToSObject");
            navEvt.setParams({
                "recordId":  component.get("v.recordId"),
                "slideDevName": "related"
            });
            navEvt.fire();  
        }
        
    },
    
    handleFilesChange: function(component, event, helper) 
    {
        var fileName = 'No File Selected..';
        var validfilelist = component.get("v.validfilelist");
        var count=0;
        var uploadfiel1 = component.find("fileId1").get("v.name");
       
        if(event.getSource().get("v.files") != null)
        {
            if(event.getSource().get("v.files").length > 0) 
            {
                fileName = event.getSource().get("v.files")[0]['name'];
                validfilelist = fileName.split('.');
                
                for(var i=0;i<validfilelist.length;i++)
                {
                   if(validfilelist[i] == 'png' || validfilelist[i] == 'jpg' || validfilelist[i] == 'PNG' || validfilelist[i] == 'JPG')
                   {               
                       if(uploadfiel1 == 'file1')
                           component.set("v.fileName", fileName);
                       
                       count=1;
                   }
                }
                if(count == 0)
                {
                    alert("Please select jpg or png format files only");
                    event.getSource().set("v.files", null);
                    component.set("v.fileName", 'No File Selected..');
                    return;
                }
            }
        }
     },
    
    handleFilesChangetwo: function(component, event, helper) 
    {
        var fileName = 'No File Selected..';
        var validfilelist = component.get("v.validfilelisttwo");
        var count=0;
       
        if(event.getSource().get("v.files") != null)
        {
            if(event.getSource().get("v.files").length > 0) 
            {
                fileName = event.getSource().get("v.files")[0]['name'];
                validfilelist = fileName.split('.');
                
                for(var i=0;i<validfilelist.length;i++)
                {
                   if(validfilelist[i] == 'png' || validfilelist[i] == 'jpg' || validfilelist[i] == 'PNG' || validfilelist[i] == 'JPG')
                   {               
                       component.set("v.fileNameone",fileName);
                       count=1;
                   }
                }
                if(count == 0)
                {
                    alert("Please select jpg or png format files only");
                    event.getSource().set("v.files", null);
                    component.set("v.fileNameone", 'No File Selected..');
                    return;
                }
            }
        }
     },
    
    handleFilesChangethree: function(component, event, helper) 
    {
        var fileName = 'No File Selected..';
        var validfilelist = component.get("v.validfilelisttwo");
        var count=0;
       
        if(event.getSource().get("v.files") != null)
        {
            if(event.getSource().get("v.files").length > 0) 
            {
                fileName = event.getSource().get("v.files")[0]['name'];
                validfilelist = fileName.split('.');
                
                for(var i=0;i<validfilelist.length;i++)
                {
                   if(validfilelist[i] == 'png' || validfilelist[i] == 'jpg' || validfilelist[i] == 'PNG' || validfilelist[i] == 'JPG')
                   {               
                       component.set("v.fileNametwo",fileName);
                       count=1;
                   }
                }
                if(count == 0)
                {
                    alert("Please select jpg or png format files only");
                    event.getSource().set("v.files", null);
                    component.set("v.fileNametwo", 'No File Selected..');
                    return;
                }
            }
        }
     },
    
    handleFilesChangefour: function(component, event, helper) 
    {
        var fileName = 'No File Selected..';
        var validfilelist = component.get("v.validfilelisttwo");
        var count=0;
       
        if(event.getSource().get("v.files") != null)
        {
            if(event.getSource().get("v.files").length > 0) 
            {
                fileName = event.getSource().get("v.files")[0]['name'];
                validfilelist = fileName.split('.');
                
                for(var i=0;i<validfilelist.length;i++)
                {
                   if(validfilelist[i] == 'png' || validfilelist[i] == 'jpg' || validfilelist[i] == 'PNG' || validfilelist[i] == 'JPG')
                   {               
                       component.set("v.fileNamethree",fileName);
                       count=1;
                   }
                }
                if(count == 0)
                {
                    alert("Please select jpg or png format files only");
                    event.getSource().set("v.files", null);
                    component.set("v.fileNamethree", 'No File Selected..');
                    return;
                }
            }
        }
     },
    
    handleFilesChangefive: function(component, event, helper) 
    {
        var fileName = 'No File Selected..';
        var validfilelist = component.get("v.validfilelisttwo");
        var count=0;
       
        if(event.getSource().get("v.files") != null)
        {
            if(event.getSource().get("v.files").length > 0) 
            {
                fileName = event.getSource().get("v.files")[0]['name'];
                validfilelist = fileName.split('.');
                
                for(var i=0;i<validfilelist.length;i++)
                {
                   if(validfilelist[i] == 'png' || validfilelist[i] == 'jpg' || validfilelist[i] == 'PNG' || validfilelist[i] == 'JPG')
                   {               
                       component.set("v.fileNamefour",fileName);
                       count=1;
                   }
                }
                if(count == 0)
                {
                    alert("Please select jpg or png format files only");
                    event.getSource().set("v.files", null);
                    component.set("v.fileNamefour", 'No File Selected..');
                    return;
                }
            }
        }
     },
})
Helper:
({
    MAX_FILE_SIZE: 4500000, //Max file size 4.5 MB 
    CHUNK_SIZE: 750000,      //Chunk Max size 750Kb 
    
    uploadHelper: function(component, event, multiuse) {
          
        component.set("v.showLoadingSpinner", true);
        if(multiuse=='one')
        {
             var fileInput = component.find("fileId").get("v.files");   
        }
        else if(multiuse=='two')
        {
            var fileInput = component.find("fileId1").get("v.files"); 
        }
        else if(multiuse=='three')
        {
            var fileInput = component.find("fileId2").get("v.files"); 
        }
        else if(multiuse=='four')
        {
            var fileInput = component.find("fileId3").get("v.files"); 
        }
        else if(multiuse=='five')
        {
            var fileInput = component.find("fileId4").get("v.files"); 
        }
       
         
        var file = fileInput[0];
        var self = this;
               
        if (file.size > self.MAX_FILE_SIZE) {
            component.set("v.showLoadingSpinner", false);
            component.set("v.fileName", 'Alert : File size cannot exceed ' + self.MAX_FILE_SIZE + ' bytes.\n' + ' Selected file size: ' + file.size);
            return;
        }
 
        
        var objFileReader = new FileReader();
       
        objFileReader.onload = $A.getCallback(function() 
        {
            var fileContents = objFileReader.result;
            var base64 = 'base64,';
            var dataStart = fileContents.indexOf(base64) + base64.length;
 
            fileContents = fileContents.substring(dataStart);
          
            self.uploadProcess(component, file, fileContents);
        });
 
        objFileReader.readAsDataURL(file);
    },
 
    uploadProcess: function(component, file, fileContents) 
    {
        var startPosition = 0;
        var endPosition = Math.min(fileContents.length, startPosition + this.CHUNK_SIZE);
        this.uploadInChunk(component, file, fileContents, startPosition, endPosition, '');
    },
 
 
    uploadInChunk: function(component, file, fileContents, startPosition, endPosition, attachId) 
    {
       
        var getchunk = fileContents.substring(startPosition, endPosition);
        var action = component.get("c.saveChunk");
        action.setParams({
            parentId: component.get("v.parentId"),
            fileName: file.name,
            base64Data: encodeURIComponent(getchunk),
            contentType: file.type,
            fileId: attachId
        });
 
        
        action.setCallback(this, function(response) 
        {
            attachId = response.getReturnValue();
            var state = response.getState();
            if (state === "SUCCESS") 
            {
               
                startPosition = endPosition;
                endPosition = Math.min(fileContents.length, startPosition + this.CHUNK_SIZE);
               
                if (startPosition < endPosition) 
                {
                    this.uploadInChunk(component, file, fileContents, startPosition, endPosition, attachId);
                } 
                else 
                {
                    alert('your File is uploaded successfully');
                    component.set("v.showLoadingSpinner", false);
                }
                      
            } 
            else if (state === "INCOMPLETE") 
            {
                alert("From server: " + response.getReturnValue());
            } 
            else if (state === "ERROR") 
            {
                var errors = response.getError();
                if (errors) 
                {
                    if (errors[0] && errors[0].message) 
                    {
                        console.log("Error message: " + errors[0].message);
                    }
                } 
                else 
                {
                    console.log("Unknown error");
                }
            }
        });
        
        $A.enqueueAction(action);
    }
})