0

Is there anyone that can help me on how to put a progress bar while I'm uploading a file to indicate the user that the file is still uploading?. Sorry I'm still new regarding this one. I read a lot regarding this and still make me confuse on it. Thank you in advance!

Here is my html where I will submit the file:

     <form class="form-group" ng-submit="addX()">
        <div class="col-lg-4">
            <input id="file" type="file" name="file" class="file btn btn-default"  data-show-preview="false"><br>
            <input id="submit" class="btn btn-primary" type="submit" name="submit" value="Upload" /><br/><br/>
        </div>
     </form>

And here is my js that will connect me to my python file:

 $scope.addX = function() {
         var f = document.getElementById('file').files[0]; console.log(f);
         var formData = new FormData();
         formData.append('file', f); console.log(formData);
           $http({method: 'POST', url: 'http://x.x.x./',
                           data: formData,
                           headers: {'Content-Type': undefined},
                           transformRequest: angular.identity})
                  .success(function(data, status, headers, config) {
                            if (data.success) {

                                console.log('import success!');

                            }
                        })
                        .error(function(data, status, headers, config) {
                        });
                // }
            };
thinkmind
  • 115
  • 2
  • 16

2 Answers2

0

Unfortunately that does not seem possible at the moment. You can follow this thread https://github.com/angular/angular.js/issues/1934 which is calling for access to the xhr request that you would also need for the progress update. At the moment you would need to use the XHR2 object yourself. Something like this

var fd = new FormData();
fd.append("uploadedFile", file);

xhr = new XMLHttpRequest();

xhr.upload.addEventListener("progress", uploadProgress, false);

xhr.addEventListener("readystatechange", function (e) {
// upload completed
if (this.readyState === 4) {

// do whats needed
}

xhr = null;
}
});

xhr.addEventListener("error", function (e) {
 callback(e);
});
//xhr.addEventListener("abort", uploadCanceled, false);
xhr.open("POST", url);

// send the form data to the server
xhr.send(fd);

Another option to work around this would be to handle it server side in case you do have control over the service.

AirBorne04
  • 573
  • 4
  • 11
0

For those who are searching for an option in $http, the following will be helpful. There is a way to get the file upload progress by listening to the event 'uploadEventHandlers'

https://stackoverflow.com/a/41930083/6282758

Siva
  • 1
  • 2