I have an html form that contains a file input, so I want to upload the selected file from this form using <apex:actionFunction>

enter image description here

The problem is that I don't know how to pass the file to the apex class in order to upload it to the documents.

Here is my form code and the calling of the actionFunction

  <input type="file" id="file" class="form-control"/> 
  <input class="form-control" id="description" placeholder="Description"/>
  <button class="btn btn-default" onclick="getFileData(); return false;">Upload</button>

  <apex:actionFunction action="{!upload}" status="loading" name="upload_action">
      <apex:param assignTo="{!name}" name="name" value=""/>
      <!-- How should I deal with the body ? -->
      <!-- <apex:param assignTo="{!body}" name="body" value=""/> -->
      <apex:param assignTo="{!description}" name="description" value=""/>

    // This function will set the data, then it will call the action function
    function getFileData(){
        var name, body, desc;
        name = $j("#file").val().split('\\').pop(); //get just the file name, without the path
        //body = ??
        desc = $j("#description").val();

        //upload_action(name, body, desc);

1 Answer 1


In order to get files from jQuery to Apex, what you can do is use the REST-Api. The REST-Endpoint looks something like this:

global class FileUploadController
    global static Attachment attachPic(){
        RestRequest req = RestContext.request;
        Blob data = req.requestBody;
        String name = RestContext.request.params.get('filename');

        Attachment a = new Attachment (ParentId = RestContext.request.params.get('id'),
                                       Body = data,
                                       ContentType = name.endsWith('pdf') ? 'application/pdf' : 'image/png',
                                       Name = name);
        insert a;
        return [Select Id, ParentId, BodyLength, Name, ContentType from Attachment Where Id = :a.Id];

Then you can upload via jQuery as an XHR-Request, where you set the following headers:

xhr.setRequestHeader('Authorization', 'Bearer {!$Api.Session_ID}');
xhr.setRequestHeader('SalesforceProxy-Endpoint', 'https://' + window.location.toString().split('.')[1] + '.salesforce.com/services/apexrest/FileUpload/v1/upload?id=' + campaignId + '&filename=' + encodeURIComponent(file.name));

  • So what I need is to create an extension class and add this mapping in the start. Then I can send the file in a JQuery event ? If there are multiple files I could iterate them and send them one by one ? Sep 18, 2014 at 11:38
  • Yes, it may be a dedicated class (that's what I did) but it would also work in an extension. Multiple files should be uploaded in a loop, that's correct.
    – 0ff
    Sep 18, 2014 at 11:41
  • Please see here on how to upload a file via XHR: stackoverflow.com/questions/6211145/…
    – 0ff
    Sep 18, 2014 at 12:24

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .