[SalesForce] Displaying Images on Visualforce pages using Base64 Blob

Based on my research, I have concluded that at the time of this writing (using REST API v32), Salesforce does not decode uploaded base64 encoded data for Attachments. This is a bit confusing, since the Attachments documentation specifies the following:

The API sends and receives the binary file attachment data encoded as a base64Binary data type. Prior to creating a record, client applications must encode the binary attachment data as base64. Upon receiving a response, client applications must decode the base64 data to binary (this conversion is usually handled for you by the SOAP client).

The difficult part is uploading an attachment to match Salesforce's specific multipart/form-data template. Without going into the exhausing details, the only I found to do this was to manually build the HTTP request body, and put the entire body in an ArrayBuffer, which the browser will not UTF-8 encode. This answer on StackOverflow really paved the way for this fix.

// {
//   Body: base64EncodedData,
//   ContentType: '',
//   Additional attachment info (i.e. ParentId, Name, Description, etc.)
// }

function uploadAttachment (objectData, onSuccess, onError) {
    // Define a boundary
    var boundary = 'boundary_string_' + Date.now().toString();
    var attachmentContentType = !app.isNullOrUndefined(objectData.ContentType) ? objectData.ContentType : 'application/octet-stream';

    // Serialize the object, excluding the body, which will be placed in the second partition of the multipart/form-data request
    var serializedObject = JSON.stringify(objectData, function (key, value) { return key !== 'Body' ? value : undefined; });

    var requestBodyBeginning = '--' + boundary
        + '\r\n'
        + 'Content-Disposition: form-data; name="entity_attachment";'
        + '\r\n'
        + 'Content-Type: application/json'
        + '\r\n\r\n'
        + serializedObject
        + '\r\n\r\n' +
        '--' + boundary
        + '\r\n'
        + 'Content-Type: ' + attachmentContentType
        + '\r\n'
        + 'Content-Disposition: form-data; name="Body"; filename="filler"'
        + '\r\n\r\n';

    var requestBodyEnd =
        '\r\n\r\n'
        + '--' + boundary + '--';

    // The atob function will decode a base64-encoded string into a new string with a character for each byte of the binary data.
    var byteCharacters = window.atob(objectData.Body);

    // Each character's code point (charCode) will be the value of the byte.
    // We can create an array of byte values by applying .charCodeAt for each character in the string.
    var byteNumbers = new Array(byteCharacters.length);

    for (var i = 0; i < byteCharacters.length; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i);
    }

    // Convert into a real typed byte array. (Represents an array of 8-bit unsigned integers)
    var byteArray = new Uint8Array(byteNumbers);

    var totalRequestSize = requestBodyBeginning.length + byteArray.byteLength + requestBodyEnd.length;

    var uint8array = new Uint8Array(totalRequestSize);
    var i;

    // Append the beginning of the request
    for (i = 0; i < requestBodyBeginning.length; i++) {
        uint8array[i] = requestBodyBeginning.charCodeAt(i) & 0xff;
    }

    // Append the binary attachment
    for (var j = 0; j < byteArray.byteLength; i++, j++) {
        uint8array[i] = byteArray[j];
    }

    // Append the end of the request
    for (var j = 0; j < requestBodyEnd.length; i++, j++) {
        uint8array[i] = requestBodyEnd.charCodeAt(j) & 0xff;
    }

    return $j.ajax({
        type: "POST",
        url: salesforceUrl,
        contentType: 'multipart/form-data' + "; boundary=\"" + boundary + "\"",
        cache: false,
        processData: false,
        data: uint8array.buffer,
        success: onSuccess,
        error: onError,
        beforeSend: function (xhr) {
            // Setup OAuth headers...
        }
    });
};

The problem was jQuery ajax method.

XMLHttpRequest with responseType set to "blob" solved the problem.