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
bhanu_prakashbhanu_prakash 

lightning csv uploader to create accounts

Hi Team,

trying to deisgn CSV uploder in lightning component and need to display in table after uploading CSV file and on click on save button need to save account reords in data base.
 
public class PMO_CsvUploaderController {
    public Blob csvFileBody{get;set;}
    public string csvAsString{get;set;}
    public String[] csvFileLines{get;set;}
    public List<Account> Acclist{get;set;}
    public PMO_CsvUploaderController(){
        csvFileLines = new String[]{};
            Acclist = New List<Account>(); 
    }
    
    public void importCSVFile(){
        try{
            csvAsString = csvFileBody.toString();
            csvFileLines = csvAsString.split('\n'); 
            
            for(Integer i=1;i<csvFileLines.size();i++){
                Account couObj = new Account();
                string[] csvRecordData = csvFileLines[i].split(',');            
                couObj.name = csvRecordData[1] ;        
                couObj.AccountNumber = csvRecordData[2];
                couObj.Phone = csvRecordData[3];
                couObj.Rating = csvRecordData[4];
                	/*
                    String temp_fees=csvRecordData[3];
                    couObj.Course_fees__c = Decimal.valueOf(temp_fees);
                    String temp_date=csvRecordData[4];
                    couObj.Course_Date__c = Date.parse(temp_date); 
                    */
                Acclist.add(couObj);   
            }
            insert Acclist;
        }
        catch (Exception e){
            System.debug(e.getCause());
            ApexPages.Message errorMessage = new ApexPages.Message(ApexPages.severity.ERROR,'An error has occured while importing data. Please make sure input csv file is correct');
            ApexPages.addMessage(errorMessage);
        }  
    }
}

Using these contoroller to create account.. help me to design lightning component
Best Answer chosen by bhanu_prakash
vijayabhaskarareddyvijayabhaskarareddy
Hi @ bhanu_prakash,

Please try with below code,

Csv_Uploader.cmp
<aura:component controller="Controller">
    <aura:attribute name="TableContent" type="String"  description=" Show the Result class"/>
    <aura:attribute name="TargetFileName" type="String"  description="Name of the file"/>
    <aura:attribute name="tableheaders" type="Object[]" />
    <aura:attribute name="fileContentData" type="String"/>
    <aura:attribute name="filename" type="String"/>
    <!-- It will display 100 records . Change for your requirement-->
    <aura:attribute name="NumOfRecords" type="Integer" default="100"/> 
    <aura:attribute name="showMain" type="Boolean" default="true"/>

 <aura:if isTrue="{!v.showMain}">
        <div  class="slds-m-around--large" ondragover="{!c.onDragOver}" ondrop="{!c.onDrop}" >
            
            <div aura:id="holder" class="slds-m-top--medium slds-align--absolute-center" style="background-color:#bfbfb2; height:100px" >
                <h1>Drag and Drop CSV file here</h1>
            </div>
        </div>
        <aura:set attribute="else">
            <ui:outputRichText class="uiOutputRichText slds-m-around--large" value="{!v.TargetFileName}"/> 
            <ui:outputRichText class="uiOutputRichText slds-m--around-large" value="{!v.TableContent}"/>
            <div class="slds-p-around--large slds-align--absolute-center">
                <lightning:button label="Save" variant="brand" onclick="{!c.processFileContent}"
                                  />
                <lightning:button label="Cancel" variant="brand" 
                                  onclick="{!c.cancel}" /> 
            </div>
            
        </aura:set>
     </aura:if>
   
</aura:component>
Csv_UploaderController.js
({
	onDragOver : function(component, event, helper) {
		event.preventDefault();
	},
    
    onDrop : function(component, event, helper) {
		event.stopPropagation();
        event.preventDefault();
        event.dataTransfer.dropEffect='copy';
        var files=event.dataTransfer.files;
        helper.readFile(component,helper,files[0]);
	},
    
    processFileContent : function(component,event,helper){
        helper.saveRecords(component,event);
    },
    
    cancel : function(component,event,helper){
        component.set("v.showMain",true);
    }
})
Csv_UploaderHelper.js
({
    readFile: function(component, helper, file) {
        if (!file) return;
        console.log('file'+file.name);
        if(!file.name.match(/\.(csv||CSV)$/)){
            return alert('only support csv files');
        }else{
            
            reader = new FileReader();
            reader.onerror =function errorHandler(evt) {
                switch(evt.target.error.code) {
                    case evt.target.error.NOT_FOUND_ERR:
                        alert('File Not Found!');
                        break;
                    case evt.target.error.NOT_READABLE_ERR:
                        alert('File is not readable');
                        break;
                    case evt.target.error.ABORT_ERR:
                        break; // noop
                    default:
                        alert('An error occurred reading this file.');
                };
            }
            //reader.onprogress = updateProgress;
            reader.onabort = function(e) {
                alert('File read cancelled');
            };
            reader.onloadstart = function(e) { 
                
                var output = '<ui type=\"disc\"><li><strong>'+file.name +'</strong> ('+file.type+')- '+file.size+'bytes, last modified: '+file.lastModifiedDate.toLocaleDateString()+'</li></ui>';
                component.set("v.filename",file.name);
                component.set("v.TargetFileName",output);
               
            };
            reader.onload = function(e) {
                var data=e.target.result;
                component.set("v.fileContentData",data);
                console.log("file data"+JSON.stringify(data));
                var allTextLines = data.split(/\r\n|\n/);
                var dataRows=allTextLines.length-1;
                var headers = allTextLines[0].split(',');
                
                console.log("Rows length::"+dataRows);
               
              
                	var numOfRows=component.get("v.NumOfRecords");
                    if(dataRows > numOfRows+1 || dataRows == 1 || dataRows== 0){
                   
                     alert("File Rows between 1 to "+numOfRows+" .");
                    component.set("v.showMain",true);
                    
                } 
                else{
                    var lines = [];
                    var filecontentdata;
                    var content = "<table class=\"table slds-table slds-table--bordered slds-table--cell-buffer\">";
                    content += "<thead><tr class=\"slds-text-title--caps\">";
                    for(i=0;i<headers.length; i++){
                        content += '<th scope=\"col"\>'+headers[i]+'</th>';
                    }
                    content += "</tr></thead>";
                    for (var i=1; i<allTextLines.length; i++) {
                        filecontentdata = allTextLines[i].split(',');
                        if(filecontentdata[0]!=''){
                            content +="<tr>";
                            
                            for(var j=0;j<filecontentdata.length;j++){
                                content +='<td>'+filecontentdata[j]+'</td>';
                            }
                            content +="</tr>";
                        }
                    }
                    content += "</table>";
                    
                    component.set("v.TableContent",content);
					component.set("v.showMain",false);                   
                }
            }
            reader.readAsText(file);
            
        }
        var reader = new FileReader();
        reader.onloadend = function() {
         
        };
        reader.readAsDataURL(file);
    },
    
    saveRecords : function(component,event){
        var action = component.get("c.processData");
        var fieldsList=['Name','Phone','AccountNumber']; //Please write your code dynamic fields
        action.setParams({ fileData : component.get("v.fileContentData"),
                          sobjectName:'Account', //Any object
                          fields:fieldsList});
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set("v.showMain",true);
                alert('saved successfully');
            }
            else if (state === "INCOMPLETE") {
                // do something
            }
            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);
    }

});

Controller.apex
public class Controller {

    @AuraEnabled
    public static void processData(String fileData,String sobjectName,List<String> fields) {

       System.debug('fileData:::'+filedata);
       System.debug('sobjectName:::'+sobjectName);
       System.debug('fields:::'+fields);
       
        Schema.SObjectType targetType = Schema.getGlobalDescribe().get(sobjectName);
        try{
            if(fileData!=null){ 
                String[] fileLines = new String[]{};
               fileLines = fileData.split('\n');
                //for content
                List<sObject> myList = new List<sObject>();
                for (Integer i=1,j=fileLines.size();i<j;i++){
                  String[] inputvalues = new String[]{};
                  inputvalues = fileLines[i].split(',');
                  sObject obj = targetType.newSObject();
                   integer rowsize=inputvalues.size();
                   //System.debug('rowsize::'+rowsize);
                   //System.debug('fields size'+fields.size());
                   for(integer l=0;l<rowsize-1;l++){
                       system.debug('fields.get(l)'+fields.get(l)); 
                       if(String.isNotBlank(inputvalues[l]) )
                       {
                          String value= inputvalues[l].length()>255 ? inputvalues[l].substring(0,254) : inputvalues[l];
                            obj.put(fields.get(l),value);
                       }else{
                            obj.put(fields.get(l),'');
                       }
                   
                      
                   }
             //   System.debug('Obj::::'+obj);
                   myList.add(obj);

               }
                insert myList;
            }
              
        }catch(Exception e){
             System.debug('exception'+e);   
        }
       
    }
}

I hope it will helps you.

Regards,
Vijay


 

All Answers

vijayabhaskarareddyvijayabhaskarareddy
Hi @ bhanu_prakash,

Please try with below code,

Csv_Uploader.cmp
<aura:component controller="Controller">
    <aura:attribute name="TableContent" type="String"  description=" Show the Result class"/>
    <aura:attribute name="TargetFileName" type="String"  description="Name of the file"/>
    <aura:attribute name="tableheaders" type="Object[]" />
    <aura:attribute name="fileContentData" type="String"/>
    <aura:attribute name="filename" type="String"/>
    <!-- It will display 100 records . Change for your requirement-->
    <aura:attribute name="NumOfRecords" type="Integer" default="100"/> 
    <aura:attribute name="showMain" type="Boolean" default="true"/>

 <aura:if isTrue="{!v.showMain}">
        <div  class="slds-m-around--large" ondragover="{!c.onDragOver}" ondrop="{!c.onDrop}" >
            
            <div aura:id="holder" class="slds-m-top--medium slds-align--absolute-center" style="background-color:#bfbfb2; height:100px" >
                <h1>Drag and Drop CSV file here</h1>
            </div>
        </div>
        <aura:set attribute="else">
            <ui:outputRichText class="uiOutputRichText slds-m-around--large" value="{!v.TargetFileName}"/> 
            <ui:outputRichText class="uiOutputRichText slds-m--around-large" value="{!v.TableContent}"/>
            <div class="slds-p-around--large slds-align--absolute-center">
                <lightning:button label="Save" variant="brand" onclick="{!c.processFileContent}"
                                  />
                <lightning:button label="Cancel" variant="brand" 
                                  onclick="{!c.cancel}" /> 
            </div>
            
        </aura:set>
     </aura:if>
   
</aura:component>
Csv_UploaderController.js
({
	onDragOver : function(component, event, helper) {
		event.preventDefault();
	},
    
    onDrop : function(component, event, helper) {
		event.stopPropagation();
        event.preventDefault();
        event.dataTransfer.dropEffect='copy';
        var files=event.dataTransfer.files;
        helper.readFile(component,helper,files[0]);
	},
    
    processFileContent : function(component,event,helper){
        helper.saveRecords(component,event);
    },
    
    cancel : function(component,event,helper){
        component.set("v.showMain",true);
    }
})
Csv_UploaderHelper.js
({
    readFile: function(component, helper, file) {
        if (!file) return;
        console.log('file'+file.name);
        if(!file.name.match(/\.(csv||CSV)$/)){
            return alert('only support csv files');
        }else{
            
            reader = new FileReader();
            reader.onerror =function errorHandler(evt) {
                switch(evt.target.error.code) {
                    case evt.target.error.NOT_FOUND_ERR:
                        alert('File Not Found!');
                        break;
                    case evt.target.error.NOT_READABLE_ERR:
                        alert('File is not readable');
                        break;
                    case evt.target.error.ABORT_ERR:
                        break; // noop
                    default:
                        alert('An error occurred reading this file.');
                };
            }
            //reader.onprogress = updateProgress;
            reader.onabort = function(e) {
                alert('File read cancelled');
            };
            reader.onloadstart = function(e) { 
                
                var output = '<ui type=\"disc\"><li><strong>'+file.name +'</strong> ('+file.type+')- '+file.size+'bytes, last modified: '+file.lastModifiedDate.toLocaleDateString()+'</li></ui>';
                component.set("v.filename",file.name);
                component.set("v.TargetFileName",output);
               
            };
            reader.onload = function(e) {
                var data=e.target.result;
                component.set("v.fileContentData",data);
                console.log("file data"+JSON.stringify(data));
                var allTextLines = data.split(/\r\n|\n/);
                var dataRows=allTextLines.length-1;
                var headers = allTextLines[0].split(',');
                
                console.log("Rows length::"+dataRows);
               
              
                	var numOfRows=component.get("v.NumOfRecords");
                    if(dataRows > numOfRows+1 || dataRows == 1 || dataRows== 0){
                   
                     alert("File Rows between 1 to "+numOfRows+" .");
                    component.set("v.showMain",true);
                    
                } 
                else{
                    var lines = [];
                    var filecontentdata;
                    var content = "<table class=\"table slds-table slds-table--bordered slds-table--cell-buffer\">";
                    content += "<thead><tr class=\"slds-text-title--caps\">";
                    for(i=0;i<headers.length; i++){
                        content += '<th scope=\"col"\>'+headers[i]+'</th>';
                    }
                    content += "</tr></thead>";
                    for (var i=1; i<allTextLines.length; i++) {
                        filecontentdata = allTextLines[i].split(',');
                        if(filecontentdata[0]!=''){
                            content +="<tr>";
                            
                            for(var j=0;j<filecontentdata.length;j++){
                                content +='<td>'+filecontentdata[j]+'</td>';
                            }
                            content +="</tr>";
                        }
                    }
                    content += "</table>";
                    
                    component.set("v.TableContent",content);
					component.set("v.showMain",false);                   
                }
            }
            reader.readAsText(file);
            
        }
        var reader = new FileReader();
        reader.onloadend = function() {
         
        };
        reader.readAsDataURL(file);
    },
    
    saveRecords : function(component,event){
        var action = component.get("c.processData");
        var fieldsList=['Name','Phone','AccountNumber']; //Please write your code dynamic fields
        action.setParams({ fileData : component.get("v.fileContentData"),
                          sobjectName:'Account', //Any object
                          fields:fieldsList});
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set("v.showMain",true);
                alert('saved successfully');
            }
            else if (state === "INCOMPLETE") {
                // do something
            }
            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);
    }

});

Controller.apex
public class Controller {

    @AuraEnabled
    public static void processData(String fileData,String sobjectName,List<String> fields) {

       System.debug('fileData:::'+filedata);
       System.debug('sobjectName:::'+sobjectName);
       System.debug('fields:::'+fields);
       
        Schema.SObjectType targetType = Schema.getGlobalDescribe().get(sobjectName);
        try{
            if(fileData!=null){ 
                String[] fileLines = new String[]{};
               fileLines = fileData.split('\n');
                //for content
                List<sObject> myList = new List<sObject>();
                for (Integer i=1,j=fileLines.size();i<j;i++){
                  String[] inputvalues = new String[]{};
                  inputvalues = fileLines[i].split(',');
                  sObject obj = targetType.newSObject();
                   integer rowsize=inputvalues.size();
                   //System.debug('rowsize::'+rowsize);
                   //System.debug('fields size'+fields.size());
                   for(integer l=0;l<rowsize-1;l++){
                       system.debug('fields.get(l)'+fields.get(l)); 
                       if(String.isNotBlank(inputvalues[l]) )
                       {
                          String value= inputvalues[l].length()>255 ? inputvalues[l].substring(0,254) : inputvalues[l];
                            obj.put(fields.get(l),value);
                       }else{
                            obj.put(fields.get(l),'');
                       }
                   
                      
                   }
             //   System.debug('Obj::::'+obj);
                   myList.add(obj);

               }
                insert myList;
            }
              
        }catch(Exception e){
             System.debug('exception'+e);   
        }
       
    }
}

I hope it will helps you.

Regards,
Vijay


 
This was selected as the best answer
bhanu_prakashbhanu_prakash
Hi Vijay 

everything is perfect as i exepeted on functionality but unable to save records into database. Iam unable to add CSV here but. i can find record in debug logs but records are not saving into database.
bhanu_prakashbhanu_prakash
Thanks Vijay, Issue in CSV files bug.  fixed can you these code for blog post  to help others ?
N RambabuN Rambabu
Hi Vijay,  This is  seems to very good. Great Work!
Joshua LimJoshua Lim
hi Vijay, is there a way to modify this so that columns may include commas? For example, currency
rishabh rathor 18rishabh rathor 18
i tried this component but its not choosing csv file
 
venkata mani tejavenkata mani teja
  how to  create child Contacts in account record Page and that account must be parent fileupload component ?