+ Start a Discussion
vijayabhaskarareddyvijayabhaskarareddy 

CSV file upload using drag drop and drop

 i need help  to upload a csv  file using drag and drop
Varun SinghVarun Singh
Hi Vijay 

You can find a great blog by Jitendra Zaa (http://www.jitendrazaa.com/blog/salesforce/salesforce-drag-and-drop-file-uploader-component-with-progress-bar-html5-and-pure-javascript-based/) that gives an overview of doing this in JavasScript and HTML5 

http://www.jitendrazaa.com/blog/salesforce/salesforce-drag-and-drop-file-uploader-component-with-progress-bar-html5-and-pure-javascript-based/
vijayabhaskarareddyvijayabhaskarareddy
Hi Varun,
Thanks for replay
my requirement is  i want to insert  list of contacts/ Accounts  using drag and drop
could  u please let how to make  modifications (to the above link) to match my requirements

Regards,
vijay
Varun SinghVarun Singh
Hi @vijay 
you have  to  first  upload correct csv foile with account and contact

then  you have to read Data of account and contacts 
here is  example code

File should have csv  typr,you can take  help from code give below 



 nameFile=contentFile.toString();
        filelines = nameFile.split('\n');
        accstoupload = new List<Account>();
        for (Integer i=1;i<filelines.size();i++)
        {
            String[] inputvalues = new String[]{};
            inputvalues = filelines[i].split(',');
            
            Account a = new Account();
            a.Name = inputvalues[0];
            a.ShippingStreet = inputvalues[1];       
            a.ShippingCity = inputvalues[2];
            a.ShippingState = inputvalues[3];
            a.ShippingPostalCode = inputvalues[4];
            a.ShippingCountry = inputvalues[5];

            accstoupload.add(a);
        }
        try{
        insert accstoupload;
        }
        catch (Exception e)
        {
            ApexPages.Message errormsg = new ApexPages.Message(ApexPages.severity.ERROR,'An error has occured. Please check the template or try again later');
            ApexPages.addMessage(errormsg);
        }    
        return null;

You have  to implement your  idea using both link 

1- Drag and drop concept 
http://www.jitendrazaa.com/blog/salesforce/salesforce-drag-and-drop-file-uploader-component-with-progress-bar-html5-and-pure-javascript-based/
2-How to Read CSV file from Apex display in visualforce?
http://sfdcsrini.blogspot.com/2014/04/how-to-read-csv-file-from-apex_17.html


I hope It would  be helpful for you  please mark this is  best answer 
Varun SinghVarun Singh


Visualforce page: csvuploadVF
 
<apex:page sidebar="false" controller="FileUploader">
   <apex:form >
      <apex:sectionHeader title="Upload data from CSV file"/>
      <apex:pagemessages />
      <apex:pageBlock >
             <center>
              <apex:inputFile value="{!contentFile}" filename="{!nameFile}" /> <apex:commandButton action="{!ReadFile}" value="Upload File" id="theButton" style="width:70px;"/>
              <br/> <br/> <font color="red"> <b>Note: Please use the standard template to upload Accounts.</b> </font>
             </center>  
      
      
      <apex:pageblocktable value="{!uploadedAccounts}" var="acc" rendered="{!NOT(ISNULL(uploadedAccounts))}">
          <apex:column headerValue="Account Name">
              <apex:outputField value="{!acc.Name}"/>
          </apex:column>
          <apex:column headerValue="Shipping Street">
              <apex:outputField value="{!acc.ShippingStreet}"/>
          </apex:column>
          <apex:column headerValue="Shipping City">
              <apex:outputField value="{!acc.ShippingCity}"/>
          </apex:column>
          <apex:column headerValue="Shipping State">
              <apex:outputField value="{!acc.ShippingState}"/>
          </apex:column>
          <apex:column headerValue="Shipping Postal Code">
              <apex:outputField value="{!acc.ShippingPostalCode}"/>
          </apex:column>
          <apex:column headerValue="Shipping Country">
              <apex:outputField value="{!acc.ShippingCountry}"/>
          </apex:column>
      </apex:pageblocktable> 
      
      </apex:pageBlock>       
   </apex:form>   

</apex:page>

Apex Class:
 
public class FileUploader 
{
    public string nameFile{get;set;}
    public Blob contentFile{get;set;}
    String[] filelines = new String[]{};
    List<Account> accstoupload;
    
    public Pagereference ReadFile()
    {
        nameFile=contentFile.toString();
        filelines = nameFile.split('\n');
        accstoupload = new List<Account>();
        for (Integer i=1;i<filelines.size();i++)
        {
            String[] inputvalues = new String[]{};
            inputvalues = filelines[i].split(',');
            
            Account a = new Account();
            a.Name = inputvalues[0];
            a.ShippingStreet = inputvalues[1];       
            a.ShippingCity = inputvalues[2];
            a.ShippingState = inputvalues[3];
            a.ShippingPostalCode = inputvalues[4];
            a.ShippingCountry = inputvalues[5];

            accstoupload.add(a);
        }
        try{
        insert accstoupload;
        }
        catch (Exception e)
        {
            ApexPages.Message errormsg = new ApexPages.Message(ApexPages.severity.ERROR,'An error has occured. Please check the template or try again later');
            ApexPages.addMessage(errormsg);
        }    
        return null;
    }
    
    public List<Account> getuploadedAccounts()
    {
        if (accstoupload!= NULL)
            if (accstoupload.size() > 0)
                return accstoupload;
            else
                return null;                    
        else
            return null;
    }            

}

Finally then try to upload the sample file as below with CSV file format.


Use the Both Concept for  your task
1- Drag and drop 
http://www.jitendrazaa.com/blog/salesforce/salesforce-drag-and-drop-file-uploader-component-with-progress-bar-html5-and-pure-javascript-based/
2-How to Read CSV file from Apex display in visualforce?
http://sfdcsrini.blogspot.com/2014/04/how-to-read-csv-file-from-apex_17.html
vijayabhaskarareddyvijayabhaskarareddy
Hi@ varun,
 above links i hav with me already.

if i drag and drop the file then  the  file name shoulod  be assigned to  contentFile
<apex:page sidebar="false" controller="FileUploader">
   <apex:form >
      <apex:sectionHeader title="Upload data from CSV file"/>
      <apex:pagemessages />
      <apex:pageBlock >
             <center>
              <apex:inputFile value="{!contentFile}" filename="{!nameFile}" /> <apex:commandButton action="{!ReadFile}" value="Upload File" id="theButton" style="width:70px;"/>
              <br/> <br/> <font color="red"> <b>Note: Please use the standard template to upload Accounts.</b> </font>
             </center>  
      
      
      <apex:pageblocktable value="{!uploadedAccounts}" var="acc" rendered="{!NOT(ISNULL(uploadedAccounts))}">
          <apex:column headerValue="Account Name">
              <apex:outputField value="{!acc.Name}"/>
          </apex:column>
          <apex:column headerValue="Shipping Street">
              <apex:outputField value="{!acc.ShippingStreet}"/>
          </apex:column>
          <apex:column headerValue="Shipping City">
              <apex:outputField value="{!acc.ShippingCity}"/>
          </apex:column>
          <apex:column headerValue="Shipping State">
              <apex:outputField value="{!acc.ShippingState}"/>
          </apex:column>
          <apex:column headerValue="Shipping Postal Code">
              <apex:outputField value="{!acc.ShippingPostalCode}"/>
          </apex:column>
          <apex:column headerValue="Shipping Country">
              <apex:outputField value="{!acc.ShippingCountry}"/>
          </apex:column>
      </apex:pageblocktable> 
      
      </apex:pageBlock>       
   </apex:form>   

</apex:page>

regards,
vijay
 
Varun SinghVarun Singh
filename ={!namefile} is correct ,becuase content file File is blob attchement and in name file property  we are getting name  from file.

i have tested it

its working  fine

User-added image