Recently, I encountered a similar issue and had to think outside the box to find a solution. My workaround involved creating custom code for sending files via HTTP requests. Here is an example that you can use:
function azureChangeFn() {
var inputElement = document.getElementById("fileSelect");
var newFile = inputElement.files[0];
var url = "https://YOUR_STORAGE_NAME.blob.core.windows.net/CONTAINER_NAME/"+ newFile.name +"GENERATED_SharedAccessSignature_FROM_AZURE_SITE";
var xhr = new XMLHttpRequest();
xhr.addEventListener("progress", updateProgress);
xhr.onreadystatechange = function() {
if (xhr.readyState == XMLHttpRequest.DONE) {
alert("Sent to azure storage service!");
}
}
xhr.open('PUT', url, true);
xhr.setRequestHeader("Content-type", "multipart/form-data");
xhr.setRequestHeader("lng", "en");
xhr.setRequestHeader("x-ms-blob-type", "BlockBlob");
xhr.setRequestHeader("x-ms-blob-content-type", newFile.type);
xhr.send(newFile);
}
function updateProgress (oEvent) {
if (oEvent.lengthComputable) {
var percentComplete = oEvent.loaded / oEvent.total;
console.log(percentComplete);
} else {
alert('FAIL');
}
}
<html>
<head>
</head>
<body>
<label>Example without library:</label>
<br>
<label>Select file: <input type="file" id="fileSelect" onchange="azureChangeFn()"></label>
</body>
</html>
Regarding the ng-file-upload library, upon reviewing the source code, it was discovered that the formData.append method automatically adds a web-kit header when appending a file. It appears that FormData is typically used for POST methods, but in this case, all body content is treated as a file during a PUT request. Unfortunately, attempts to upload a file to Azure storage using a POST method were unsuccessful.