JavaScript Upload

If you are developing a custom application that is handling files in the browser via JavaScript, you can use the JavaScript API of the widget to manually upload files.

The field supports file uploads form a Blob or a base64 encoded string. 

Upload API

UploadField.uploadFile(file: Blob|Base64): Promise<File>

The API returns a Promise that resolves with a file domain object that contains information about the file storage location. 

Note: for the upload field to link the uploaded files with an order, the upload field needs to be placed inside a <form action="/cart/add"></from> . (This is done automatically on product pages)

To get access to the upload field instance:

/* wait for the upload widget to be ready 
(only needed if the code is executed right after pageload) */
window.addEventListener('cloudlift.upload.ready', function(e) {
    /* get field reference (update index in case of multiple fields) */
    var field = window.Cloudlift.upload.App.fields[0];
    ...
});

Blob Upload Example

/* helper function */
function urlToBlob(url) {

  return new Promise(function(resolve, reject) {
      try {
          var xhr = new XMLHttpRequest();
          xhr.open("GET", url);
          xhr.responseType = "blob";
          xhr.onerror = function() {reject("Network error.")};
          xhr.onload = function() {
              if (xhr.status === 200) {resolve(xhr.response)}
              else {reject("Loading error:" + xhr.statusText)}
          };
          xhr.send();
      }
      catch(err) {reject(err.message)}

  });
}

urlToBlob('https://img.icons8.com/color/48/000000/tesla-logo.png').then(function(blob) {
    field.uploadFile(blob).then(function(file) {
          console.debug('got file upload: ', file);
    });
})

Base64 Example

field.uploadFile('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABmJLR0QA/wD/AP+gvaeTAAAEYUlEQVRoge2ZT2hcVRTGf+cmnaRNmwRLacm8MaFEiZRWUaiIVEyL5I+gdVP30m13gkvFjUtBlyKuzUYUnCSUGqmI1KAmrSGpGTFx3hsbQzVJjclM8u5xMZM6mcyfN/Y9SDAfvMW8+91zznfv/e593IF97OP/DQlK/KSrq/2g75/G2i4ViQMdAgmFo4i0oNquqi0iEqsWR1VzIrKKyBKqqwJ3FdIKnlHNaEPDL+vG/PjK3NzSfxYwdOpUrHVp6VmF8xjzOKpngM4A8XxgpQanFWgIEGsekZtq7YSBsZX29q8vTU3lSknbBCQTiddE9SXgAnC4hLsGTCJyG9U5RObE2nlVzciBAyuyvr7St7CwGqAwRo8fb9Hm5lbd2GgVkQ41phPVTlS7EOkBzgCHSrrdE7iGyGf96fRHWy8bixnG2hMq8nLh5x2BpKpetyLfH3Ld6V7YDFJgLRSErgK/AbdL28egMZdI9PjWPikizwEvAicULoq148VcKe24Ho9fscZ8NZhOfyegAGPHjh3+OxbrNvAI0C0i3QoO0A60FZ6molBrxtoLfZnMDMBoR0ePNeYacLCIkwWWC8+SgKuqKYVZhVTj5ubs1owqSDKReMpYe67Z894vHsjyHoCGI/H48ypyUeAccBowtUZ228ioTjflcmcBsrHYtyryWD39AQvcAq6j+uk9z/vyUt5j2/OU6zniOJcVPqgRfJa80ZZRdYBndqqQIQBUL5WJ8Q0iLqpt5DeIRyvVU8DlAdf9MJAAgGQi8bqovsN2n0wJvGmbm68OplL3d5uReLxXRb6oknwHRPV8v+eNbf2+evJk20Y2+4KBt0tmawPVNwY8792ycaol+dxxnjbwHnAW+Lk5m32id3Hxr1LeiOM8pHC3LgFwtN91/yh9n+zubpW1tUlEugRuqMiVgXR6vFyMmgIgb6Bhx+k3qkf6PW+oEi/pOPMCDwcpXuHXQdeteK4kE4lXjepyn+uObm0kldBYrRFAQHHd4Zo81QlEAgkQ+KFa+2A6/XGQOFDnzlINIjJRB70eblWEJkBhsg56PdyqCE2Ab0zgUTUNDaHNQOCv0VpQkBHH+ZP8qVwNK/2u217LnEERngfyBd0MwJsIq3gIUQAE80GdXqmJUAWYYMXtXgF+gK3U1GH2IAhVgDQ13QI2qlA2Y8ZMhZkzVAGDqVQW+KlSu8JM79zcepg5QxVQQMUlIiGewFuIQkBFk6pIqAaGCARUM6nx/d0/A34uV3kJ+X7Ng65ehC5g8M6dRSBTpsnrW1j4Pex8UXgAyps19OUDEQnQMgeaqO4dAcbaHbtN2N9A93NFEVRVdxRr95KAG5nMLFB8e7E67nmpKHJFIuCtf2/VtjBZeBc6otqFtp26UmZJhYXIBBQbOSoDQ4QCbNG+b+u7cqkLkQnwVW+Sv032rbW3avF3JYYdZ2bYcaajzFHzavFBIKoTGuINRDlEKkDz/6ntYQEiE2Yvz0CjyKQ1JlIB+9jHA+IfdfGq5Jus1P8AAAAASUVORK5CYII=')
.then(function(file) {
   console.debug('got file upload: ', file);
});