0

So what I am looking for in an indication, because all articles I read about when it comes to sending attachment are dealing with web to lead or web to case forms with default submission!

But what about sending this via AJAX ? Because yesterday I have managed to submit a simple form without attachment using a proxy sever via a php script, but now adding images ? it seems to me too compilcated, especially that there is no way to do a simple direct submission of images to salesforce servers.

Has anyone faced this problem ? had an idea about how this can be solved ? is it possible anyway ?

You can check my previous question to understand more, now an image field has to be added ?

Any help would be too much appreciated.

1

In pure Javascript, the following code should work with a couple preliminary steps.

  1. You need to obtain an access token
  2. The file data needs to be a base64 encoded string

To attach a file to a Salesforce record:

    // ParentId is the SObject of the record you're attaching a file to
    // body truncated for brevity; replace with base64 of your file
    var data = JSON.stringify({
        "ParentId":"0013i0000033JjN",
        "Name":"test.pdf",
        "body":"MY_BASE_64_STRING"
    });
    
    
    var xhr = new XMLHttpRequest();
    xhr.withCredentials = true;
    
    xhr.addEventListener("readystatechange", function() {
        if(this.readyState === 4) {
            console.log(this.responseText);
        }
    });
    
    // Replace MY_ACCESS_TOKEN with your access token
    xhr.open("POST", "https://na112.salesforce.com/services/data/v51.0/sobjects/Attachment/");
    xhr.setRequestHeader("Authorization", "Bearer MY_ACCESS_TOKEN");
    xhr.setRequestHeader("Content-Type", "application/json");
    
    xhr.send(data);

To get the base64 string of the file

You can use something as follows to get the base64 string of the file with a simple html form and some jasvascript:

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="">
<style>
</style>

<body>
    <input id="file" type="file" />
    <br />
    <br />
    <button id="button">Evaluate
</body>

<script>
    document.getElementById('button').addEventListener('click', function () {
        var files = document.getElementById('file').files;
        if (files.length > 0) {
            getBase64(files[0]);
        }
    });

    function getBase64(file) {
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function () {
            // reader.result is the base64 string of your file
            console.log(reader.result);
        };
        reader.onerror = function (error) {
            console.log('Error: ', error);
        };
    }
</script>

</html>

Demo https://jsfiddle.net/nx50whLu/

To obtain a Salesforce access_token

As for obtaining the access_token you will need to create a connected app in Salesforce, this is also assuming your Org has the REST API permission set enabled. That is much longer explanation but is detailed here:

https://trailhead.salesforce.com/en/content/learn/v/projects/build-a-connected-app-for-api-integration/create-a-connected-app

2
  • Hi friend Thanks for that, But I mentionned that I am using a proxy server, I mean a PHP script! I doubt that your code will work because of CORS origin problems !
    – TaouBen
    Feb 24 at 16:30
  • CORS comes from the receiver side. It sounds like your request is going Request > Proxy > Salesforce then on the return trip the appropriate headers being sent back from Salesforce are being dropped somewhere in your Proxy server. PHP can render HTML/Javascript in which case you can make it work if you involve a client side page.
    – Zocuments
    Feb 24 at 16:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.