I am uploading a file to Amazon S3 Bucket using pre-signed URL from AngularJs. Zip file getting corrupted while opening the downloaded file. It is working as expected when I upload the file from postman in binary format.
I am using ng-file-upload library in angularjs. For every downloaded file contains web-kit form boundary appended in the beginning as follows:
If we edit and remove the web-kit form boundary and try to open the same file its opening perfectly.
I experienced the same problem the week ago and the only solution I came up with, was to write my own code which sends files via http request. Feel free to use the example:
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>Talking about ng-file-upload library, in source code I found that formData.append method when appending a file, automaticaly adds web-kit header. As far as I understood, FormData is used for POST method, but when using PUT all body is taken as a file. Sadly I was unable to upload file to azure storage with POST method.
