Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Andrew EchevarriaAndrew Echevarria 

VisualForce Javascript get Blob object from inputFile

I have an inputFile field that the user can upload a file into (in this case, we are only using CSV files) 
<apex:inputFile id="csvfield" value="" />

In the Javascript, I try to reference the uploaded CSV: 
var csvfile = document.getElementById('{!$Component.csvform:out:csvfield}').value;
However, I'm not able to work with it because I'm not getting a Blob, but a String. 

How can I make csvfile be the Blob uploaded?
Rupal KumarRupal Kumar
hi Andrew,
 for upload csv file into vf page follow given steps-

Step1-
Download the template from the DEMO URL above. Save the file in your desktop. Upload the file into Static Resources with the name "AccountUploadTemplate".
link is http://forcetreedemos-developer-edition.ap1.force.com/forcetreedemos/resource/1327282481000/wippipelinemgr__AccountUploadTemplate. (http://forcetreedemos-developer-edition.ap1.force.com/forcetreedemos/resource/1327282481000/wippipelinemgr__AccountUploadTemplate)

Step 2.
Create an Apex Class named "FileUploader". Paste the code below and save it. 
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;
    }            
}
Step 3.
Create a Visualforce Page named "UploadAccounts". Paste the code below and save it. 
<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. <a href="{!URLFOR($Resource.AccountUploadTemplate)}" target="_blank"> Click here </a> to download the template. </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>

Thanks
Rupal.

 
Andrew EchevarriaAndrew Echevarria
Hi there,

I understand what you explained above and have done this already, but I am JS Remoting the process as otherwise my view state blows up. I have the controller and Javascript Remoting set up, I just need to pick up the Blob from the inputFile field via JavaScript and send it to my Controller method via JS Remoting. 

When I try to get the Blob thru Javascript with document.getElementById('{!$Component.csvform:out:csvfield}') or document.getElementById('{!$Component.csvform:out:csvfield}').value I just get a String, not the Blob.
Priya MishraPriya Mishra
Hi  Rupal Kumar,

The given example workes good for the header values or fields which statically defined but if we have a custom object and using the object we are geeting the header name and uploading the csv file how we can achive this. please help me out for this senario.

thanks in advance.
priya