+ 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-

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()
        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];

        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');
        return null;
    public List<Account> getuploadedAccounts()
        if (accstoupload!= NULL)
            if (accstoupload.size() > 0)
                return accstoupload;
                return null;                    
            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 >
              <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>
      <apex:pageblocktable value="{!uploadedAccounts}" var="acc" rendered="{!NOT(ISNULL(uploadedAccounts))}">
          <apex:column headerValue="Account Name">
              <apex:outputField value="{!acc.Name}"/>
          <apex:column headerValue="Shipping Street">
              <apex:outputField value="{!acc.ShippingStreet}"/>
          <apex:column headerValue="Shipping City">
              <apex:outputField value="{!acc.ShippingCity}"/>
          <apex:column headerValue="Shipping State">
              <apex:outputField value="{!acc.ShippingState}"/>
          <apex:column headerValue="Shipping Postal Code">
              <apex:outputField value="{!acc.ShippingPostalCode}"/>
          <apex:column headerValue="Shipping Country">
              <apex:outputField value="{!acc.ShippingCountry}"/>


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.