Update bootstrap progress bar on upload file angular 2

Question

I want to show progress bar's progress when user upload a file, according this question. here is my code:

Service:

public makeFileRequest(url: string, files: File): Observable<Models.MalFile> {

    return  Observable.create ((Observable) => {
        var formData: any = new FormData();
        var xhr = new XMLHttpRequest();
        console.log(files[0]);

        // for(var i = 0; i < files.length; i++) {
             formData.append("file", files[0], files[0].name);
        // }
        xhr.onreadystatechange =  () => {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    Observable.next(JSON.parse(xhr.response));
                    Observable.complete();
                } else {
                    Observable.error(xhr.response);
                    alert(xhr.response);
                }
            }
        }
        xhr.upload.onprogress = (event) => {
          this.progress = Math.round( event.loaded / event.total * 100);
          this.progressObserver.next(this.progress);
        }
        xhr.open("POST", url, true);
        xhr.send(formData);
    });
}

and my Component:

ngOnInit() {

this.service.progress.subscribe(
  data => {
    this.loadedData = data;
    console.log("data:",this.loadedData);
    //this.loadedData.bind(data)  ;
  },
  (error) => {
    console.log('Could not to upload file');

  },

  () => {
    // this.loadedData = 100;
  }

)}

I want to bind loadedData to progress bar view, but at this moment I log progress in console:

upload log screen shot

My problem is:

binding Observable object to progress bar value in view:

              <div class="progress" style="">
                <progress dir="ltr" class="progress progress-success active progress-striped progress-animated" value="{{loadedData}}" max="100">  </progress>
              </div>

this code just show progress bar when upload finished (100%)!

How can I bind loadedData to progress bar value?

Yes, It work correctly as you see in this screen shot: i.sstatic.net/Wn4yC.png — Webly Team
– Webly Team, Commented Oct 8, 2016 at 14:13

micronyks · Accepted Answer · 2016-10-08 13:21:21Z

1

I assume this.loadedData gets proper data which you want. Then do following,

<div class="progress" style="">
     <progress dir="ltr" 
               class="progress progress-success active progress-striped progress-animated" 
               value="loadedData"      //<<<===removed {{ }} curly braces.
               max="100">  
      </progress> 
</div>

answered Oct 8, 2016 at 13:21

micronyks

55.6k17 gold badges122 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Webly Team Over a year ago

I tried this one, It render

<progress class="progress progress-success active progress-striped progress-animated" dir="ltr" max="100" value="loadedData">  </progress>

and progress bar is empty!

Webly Team Over a year ago

SOLVED: @ stackoverflow.com/questions/32423348/…

Collectives™ on Stack Overflow

Update bootstrap progress bar on upload file angular 2

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related