Angularjs canceled a post and refresh the page without sense

Question

I have an issue that appears recently (I don't know what was changed)when trying to upload a file to my server. With all other GET and POST the site is working ok, but the issue is when I need to upload a file (for which I have an specific function).

My site is built with angularjs and Java Spring as backend.

Here you have the function that is use in the factory to upload a file:

var SaveMethod = function(params, callback){
                    var result = $q.defer();
                    var form = new FormData();
                    var xhr = new XMLHttpRequest;
                    // Additional POST variables required by the API script
                    form.append("file", params.files);
                    xhr.upload.onprogress = callback;
                    xhr.open('POST', SessionService.apiUrl + '/video/save');
                    xhr.setRequestHeader("Authorization", 'Bearer ' + SessionService.getToken());
                    xhr.timeout = result.promise;
                    xhr.onload = function(e) {
                      if (xhr.status == 200) {
                        result.resolve(e.target.response);
                      }
                      else {
                        result.reject(xhr.statusText);
                      }
                    };
                    xhr.send(form);
                    return result.promise;
            };

And this is the controller:

$scope.upload = function(item) {
        $scope.values.videosubmitted = true;
        $scope.values.object.name = item.name.substr(0, item.name.lastIndexOf('.'));
        $scope.values.uploading = true;
        var params = {
          files: item
        };
        VideoFactory.Save(params, callback).then(function(response){
          response = JSON.parse(response);
          $scope.values.uploading = false;
          if (response.success) {
            $scope.values.object.images = response.data.images;
            $scope.values.object.code = response.data.code;
            $scope.values.object.source = response.data.source;
            $scope.values.object.preview = response.data.preview;
          }
          else
          {
            $scope.values.error =  true;
            $scope.values.errorMessage = response.code;
          }

        }, function(response){
          if (response == null) {
            $scope.values.error = true;
            $scope.values.errorMessage = "ERROR__SERVER_NON_WORKING";
          }
          else
          {
            $scope.values.error = true;
            $scope.values.errorMessage = response.code;    
          }
          $scope.values.uploading = false;
        });
      }

And the view (just in case)

<div class="row" ng-show="!values.videosubmitted">
                        <div class="col-md-10 no-padding-right">
                            <div class="dropzone" id="dropbox" callback-fn="upload(video)" file-dropzone="[video/mp4, video/3gpp,   video/quicktime, video/x-msvideo, video/x-ms-wmv]"
                            file="image" file-name="imageFileName" values-max-file-size="9000000000">
                                <span translate="MODULES.VIDEO.DROPVIDEO"></span>
                            </div>
                        </div>
                        <div class="col-md-2 upload-btn no-padding-left">
                            <label class="upload-search btn btn-primary  no-padding">
                            <div>
                                <input type="file" onchange="angular.element(this).scope().upload(this.files[0])"/>
                                <i class="fa fa-upload"></i>
                                <span translate="COMMON.FILESEARCH"></span>
                            </div>
                            </label>
                        </div>
                </div>

The thing is that after the file is sent to the server, it doesn't matter if I get a successful response from server or not, the page is reloaded and the request is canceled. In some cases, I get the successful response from the server but after that the page is reloaded, and in other cases the request is canceled and the page is refreshed.

I tried with the timeout but it doesn't work.

And this is how it looks like:

You say you are using angularjs, but the first thing you do is work around angularjs. Don't use a plain xmlhttprequest use the angular http service instead. — M. Deinum, Jul 07 '16 at 11:28
I have to use that, because it was the only way I found to send files to the server without lossing the JWT. If I use angular way to upload files, the JWT is not sent in that request which is something I need. — Faabass, Jul 07 '16 at 11:35
Instead of hacking, you might want to do some reading on how to set headers for the http service (which is actually pretty simple to do). — M. Deinum, Jul 07 '16 at 11:39
Yeah, but the thing why I have to use plain javascript is because I need to get the upload progress in order to show a percentage on the screen (because the user can upload big files) so when I search for that, I only found that the way to do that and to send also de JWT was in this way. Anyway, I'm having this issue now which used to work 1 week ago. I don't know what change since then... I added facebook and google login, and I change the domain name... I don;t know if some of those are the issue — Faabass, Jul 11 '16 at 10:52
Anyway... I guess that the at the end the angular plugin will do the same that I did... So that won't fix my issue. Can you try to help me with my current implementation. I guess is not an issue from the code... Because it was working before and because it's weird that the request get canceled.. — Faabass, Jul 12 '16 at 11:11
This is what I get... do you have another solution? http://stackoverflow.com/questions/14289637/http-upload-file-progress-in-angularjs — Faabass, Jul 13 '16 at 23:56

score 0 · Accepted Answer · answered Jul 18 '16 at 13:52

The issue was something related to CORS I guess.. The thing was that I was using two domains for the web development, localhost for regular use, and an specific domain for being recognize in social media pages to allow the login buttons. So I discover that when I was using localhsot everything works ok, but when using the other domain it was not.

It was so weird because the backend responded correctly to the request.

Angularjs canceled a post and refresh the page without sense

1 Answers1