Just a heads up:
I searched high and low to figure out why $http wasn't cooperating...I even stumbled upon some strange findings related to this issue.
Initially, I decided to "fetch" the file from HTML in this manner:
<input flex="40" type="file" onchange="angular.element(this).scope().$parent.selectAttachment(this)">
I opted not to create a directive for testing purposes. The function selectAttachment simply assigned the file as a property for my controller.
Everything seemed fine at first—I could access attributes like this.attachment.name or this.attachment.size, but when I attempted $http.put(url, this.attachment), I encountered a signature-mismatch error.
Next, I followed a tutorial using XHR similar to this one: https://devcenter.heroku.com/articles/s3-upload-node
No luck there...
As a final attempt, I tried fetching the file without setting it via angular using
const file = document.getElementById('report-attachment').files[0];
Lo and behold, it worked! Interestingly enough, retrieving the file with
getElementById AND utilizing $http still didn't work, nor did any of the 1st or 2nd party Angular uploaders I tested—only XHR o.o
The ultimate workaround that did the trick:
HTML:
<input flex="40" id="report-attachment" type="file">
JS:
const file = document.getElementById('report-attachment').files[0];
const url = r && r.data;
const xhr = new XMLHttpRequest();
xhr.open('PUT', url);
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.debug('success');
} else {
console.error('error');
}
}
};
xhr.send(file);