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 an URL String a Blob or a base64 encoded string. 

Upload API

UploadField.uploadFile(file: URL|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:

var field;

// listener to get a reference to the upload field
window.addEventListener('upload:ready', function(e) {
    // store field reference
    field = e.detail;
});

URL Example

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

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);
});