Публикация файла PDF в кодировке base64 с помощью AJAX

Question

Я пытаюсь отправить PDF-файл в кодировке base64 на конечную точку API загрузки файлов Zendesk, но URL-адрес файла, возвращенный из API, показывает, что файл поврежден.

Сначала я получаю PDF в виде строки в кодировке base64 из отдельного вызова API. Давайте назовем это base64String,

Если я сделаю window.open("data:application/pdf;base64," + base64String) Я могу просмотреть PDF в своем браузере.

Сейчас я пытаюсь следовать документации здесь для загрузки файлов через API. Я могу успешно завершить вызов cURL, как показано в примере. Однако вызов jQuery AJAX приведет к повреждению файла PDF.

client.request({
  url: '/api/v2/uploads.json?filename=test.pdf',
  type: 'POST',
  data: atob(base64String),
  contentType: 'application/binary'
}).then(function(data) {
  window.open(data.upload.attachment.content_url);  // corrupt file
}, function(response) {
  console.log("Failed to upload file to Zendesk.");
  console.log(response);
});

Как я уже сказал, это будет успешным, но когда я посещаю content_url PDF не отображается. Я совершенно уверен, что файл поврежден в POST запрос.

Я попытался загрузить файл в виде строки base64 (без декодирования с atob()) без удачи между прочим.

ОБНОВИТЬ

Я все еще не могу просмотреть PDF после преобразования строки base64 в blob.

var blob = base64ToBlob(base64String);
console.log(blob);  // Blob {size:39574, type: "application/pdf"}

client.request({
  url: '/api/v2/uploads.json?filename=test.pdf',
  type: 'POST',
  data: blob,
  processData: false,
  contentType: 'application/pdf'
}).then(function(data) {
  window.open(data.upload.attachment.content_url);  // corrupt file
}, function(response) {
  console.log("Failed to upload file to Zendesk.");
  console.log(response);
});

function base64ToBlob(byteString) {
  // write the bytes of the string to an ArrayBuffer
  var ab = new ArrayBuffer(byteString.length);
  var ia = new Uint8Array(ab);
  for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }

  // write the ArrayBuffer to a blob, and you're done
  var blob = new Blob([ab], {type: 'application/pdf'});
  return blob;
};

Answer 1

Я узнал, что платформа приложений Zendesk использует для запросов JQuery AJAX-оболочку, а тип arraybuffer не поддерживается, поэтому файл был поврежден. Команда разработчиков фреймворка исправила проблему.