Search code examples
angularjsng-file-upload

Change Content-Type for ng file upload


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.

Network screen grab

Hope someone can help


Solution

  • 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.