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