AWS S3 Presigned Post upload in JavaScript with FormData

server.rb

post = Aws::S3:Bucket.new('XXXXX').presigned_post(
  key: "uploads/tmp/#{SecureRandom.uuid}/${filename}",
  success_action_status: '201',
  acl: 'public-read')
{ url: post.url.to_s, fields: post.fields }.to_json

upload.js

/* global FormData, XMLHttpRequest, DOMParser */
const makeForm = (file, token) => {
  const form = new FormData();

  Object.keys(token.fields).forEach(k => {
    const v = token.fields[k];
    form.append(k, v);
  });

  form.append('file', file);

  return form;
};

type Map<K, V> = { [key: K]: V };

// result of presigned post Aws::S3::Bucket.presigned_post API call
type TokenT = {
  url: ?string,
  fields: Map<string, any>,
};

// file is a web api File
const upload = (file, token: TokenT, cb = {}) =>
  new Promise((resolve, reject) => {
    const fd = makeForm(file, token);
    const xhr = new XMLHttpRequest();
    xhr.onload = () => {
      if (xhr.status !== 201) {
        reject();
      }

      const xml = new DOMParser().parseFromString(xhr.responseText, 'text/xml');
      const url = xml.querySelector('Location').firstChild.nodeValue;
      resolve(url);
    };

    xhr.onerror = reject;

    xhr.upload.onprogress = (event) => {
      if (event.lengthComputable && cb.onprogress) {
        const percent = Math.round((event.loaded / event.total) * 100);
        cb.progess(percent, event.loaded, event.total);
      }
    };

    xhr.open('POST', token.url, true);
    xhr.send(fd);
  }); // Promise

export default upload;