Content-Type not supported

[paulcwarren]

Hi there,

I have same requirements as described in:-
#88

Using version 2.1.1

Code is pretty simple, as follows.

In my html I have:-

<script src="/js/angular-file-upload/angular-file-upload-shim.js"></script>
<script src="/js/angular-file-upload/angular-file-upload.js"></script>

<input type="file" ng-file-select ng-file-change="onFileSelect($files, $event)" />
<button class="btn" ng-click="flip()">Flip</button>

In my backend controller, I have:-

$scope.onFileSelect = function($files, $event) {
    $scope.file = $files[0];
};

$scope.flip = function() {
    $upload.http({
            url: '/image-flip',
            headers: {'Content-Type': $scope.file.type},
            file: $scope.file
    }).progress(function(evt) {
        console.log('progress: ' + parseInt(100.0 * evt.loaded / evt.total) + '% file :'+ evt.config.file.name);
    }).success(function(data) {
        console.log('file ' + config.file.name + 'is uploaded successfully. Response: ' + data)
    }).error(function(data) {
           //error
    });
};

When I execute the code the request is sent with Content-Type: application/json which is obviously wrong - should be image/jpeg - and is therefore rejected by the server which is expecting image/jpeg.

There is clearly something obvious that I am missing here but I can't spot what it is. I did try debugging through the code but always end up in the angular code that strips content-type header before sending each request.

Any help, gratefully appreciated.

[paulcwarren]

I also tried this:-

$scope.flip = function() {
   var fileReader = new FileReader();
   fileReader.readAsArrayBuffer($scope.file);
   fileReader.onload = function(e) {
      $upload.http({
                url: '/image-flip',
                headers: {'Accept': 'image/jpeg', 'Content-Type': $scope.file.type},
                data: e.target.result
            }).then(function(response) {
                console.log('file ' + config.file.name + 'is uploaded successfully. Response: ' + data)
            }, null, function(evt) {
                console.log('progress: ' + parseInt(100.0 * evt.loaded / evt.total) + '% file :'+ evt.config.file.name);
      });
   }

And whilst this does send the right Content-Type header I am getting just a 2 byte body which isn't correct.

[danialfarid]

Your code should look like this: #88 (comment)
The second code seems correct. Have a look at the demo page and at the bottom select the second option then click on edit js and see how it's been done and working there.

[paulcwarren]

Also tried:-

   fileReader.readAsBinaryString($scope.file);

This does appear to send binary data but it isnt recognized by the server so something still isnt quite right here. Beginning to think this isn't angular-file-upload. Will continue to investigate.

[danialfarid]

The demo page is your best help, you can even edit the javascript and change the url to upload to your server if your server supports cors.

[paulcwarren]

Thanks Danial. I've been looking at that and retrying my example...I will try running your demo page against my server (if poss). However, in the meantime I have a little more info...if I use XMLHttpRequest directly; i.e.:-

    var fileReader = new FileReader();
    fileReader.onload = function(e) {
            var data = e.target.result;
            var ajax = new XMLHttpRequest();
            ajax.open("POST", "/transformations/image-flip");
        ajax.setRequestHeader('Accept', 'image/jpeg');
        ajax.setRequestHeader('Content-Type', $scope.file.type);
        ajax.send(data);
    }
        fileReader.readAsArrayBuffer($scope.file);

The binary data is sent to the server fine and returns the expected response.

Perhaps something might have changed in angular's $http? I am using 1.3.8

[danialfarid]

Well the demo page is working with angular 1.3.6 and selecting the second option for upload, so if you follow the code in the demo page you should be able to figure out what you are doing differently.

[paulcwarren]

Hi Daniel,
OK. I spent a couple of hours chasing this down. I think I have narrowed where it is. Long story short. If I use the version of angular-file-upload.js that your demo site is currently using then my code also works. If, however, I use verison 2.1.1 that you released a couple of days back, it fails - for me anyway. The behavior I get with 2.1.1 is that the request payload is empty.

I did try and diff the site version and 2.1.1 but there is a big delta and it was pretty much impossible for me to spot anything obvious I am afraid.

[danialfarid]

I just deployed the latest code of the demo page again and it still works. There shouldn't be any diff between the js codes. What files are you comparing?

[paulcwarren]

Nevermind. I had modified your code (based on something mentioned in issue 88) and hadn't reverted that change. My bad. Having reverted that it's working fine. Many thanks. I will close.