CODEWITHSUNDEEP
angularamazon-web-servicesamazon-s3
Evonet
Evonet

Reputation: 3640

Loading indicator when uploading files to AWS S3 via Angular

I have a file input in my Angular 5 form that uploads a file into an AWS S3 bucket.

My html looks like this:

<input type="file" (change)="fileEvent($event)" name="imageUpload" id="imageUpload" />
{{this.isLoading}}

and this is my component:

isLoading: boolean = false;

fileEvent(fileInput: any) {
    this.isLoading = true;
    s3.upload({ Key: file.name, Bucket: bucketName, Body: file, ACL: 'public-read' }, function (err, data) {
      this.isLoading = false;
      if (err) {
        console.log(err, 'there was an error uploading your file');
      }
    });
  }

The isLoading variable changes to true successfully when I start the upload, but does not change back to false when I finish. What am I doing wrong?

Upvotes: 1

Views: 513

Answers (1)

hjpotter92
hjpotter92

Reputation: 80639

In the following snippet:

s3.upload({ Key: file.name, Bucket: bucketName, Body: file, ACL: 'public-read' }, function (err, data) {
  this.isLoading = false;
  if (err) {
    console.log(err, 'there was an error uploading your file');
  }
});

the this of this.isLoading is actually referring to the anonymous function itself, and not the bound object. Keep an old reference to the same:

fileEvent(fileInput: any) {
    self = this;
    self.isLoading = true;
    s3.upload({ Key: file.name, Bucket: bucketName, Body: file, ACL: 'public-read' }, function (err, data) {
      self.isLoading = false;
      if (err) {
        console.log(err, 'there was an error uploading your file');
      }
    });
  }

and it should work.

Upvotes: 2

Related Questions