I am trying to upload files with ng-file-upload. I have this working for the most part, but there is a bug in the API that's being called which means that .xlsx files do no upload properly. Other file types do work. I have been advised that forcing the Content-Type in the payload to 'application/x-zip-compressed' allows the file to upload. Unfortunately, I cannot figure out how to change this. The payload looks like this:
------WebKitFormBoundary9rVv6WxE2BM7vFxz
Content-Disposition: form-data; name="file[0]"; filename="My Excel File.xlsx"
Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
------WebKitFormBoundary9rVv6WxE2BM7vFxz--
but needs to look like this:
------WebKitFormBoundary9rVv6WxE2BM7vFxz
Content-Disposition: form-data; name="file[0]"; filename="My Excel File.xlsx"
Content-Type: application/x-zip-compressed
------WebKitFormBoundary9rVv6WxE2BM7vFxz--
Can anyone help with how to make this change? I have tried changing the type property on the file object, but that hasn't made the change.
The function that does the upload is
$scope.uploadThenRun = function (file) {
Upload.upload({
url: 'https://'+ ppService.ppServer+ ':'+ ppService.sslPort + '/jobs/',
data: {file: file}
}).then(function (resp) {
var jobID = resp.data.data.value;
$scope.loadParentFormulation(jobID);
}, function (resp) {
}, function (evt) {
});
Which is called from a div like so:
<div class="my-drop-zone">
<div ngf-drop="uploadThenRun($files)" class="drop-box well"
ngf-drag-over-class="'dragover'" ngf-multiple="true">Drop your file here</div>
</div>
Here's the network request that's sent. It's the content-type in the payload that needs to change.
Hope someone can help
You can change the file type before uploading like this:
if (file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
file = file.slice(0, file.size, "application/x-zip-compressed")
}
Upload.upload({..., data: {file: file}, ...})
This would make your file of the new type with the same content.