Tracking Amazon S3 Bucket File Upload from .Net Core with Angular 8 FrontEnd

I’m trying to upload a file from Angular 8 Frontend -> .Net Core Controller Backend -> S3 Bucket

I need to track the progress of the upload,so that a progress bar can be displayed to the user.

upload(files) {         this.file = files[0].name;         if (files.length === 0)             return;         const formData = new FormData();         for (let file of files)         formData.append(file.name, file);                  const uploadReq = new HttpRequest('POST', `api/upload/uploadfile`, formData, {             reportProgress: true,         });         this.http.request(uploadReq).subscribe(event => {             if (event.type === HttpEventType.UploadProgress)                 this.progress = Math.round(100 * event.loaded / event.total);                 if (this.progress == 100) {                     this.uploaded = true;                     this.error = false;                 }             else if (event.type === HttpEventType.Response)                 this.message = event.body.toString();                         });     } 

On the .net Core controller,i connect to s3

[HttpPost("uploadfile"), DisableRequestSizeLimit]       public ActionResult UploadFile()         {                    try             {             IAmazonS3 client = new AmazonS3Client("xxx", "xxx",RegionEndpoint.USWest2);             var file = Request.Form.Files[0];              //string destPath = "folder/sub-folder/test.txt"; // <-- low-level s3 path use /             PutObjectRequest request = new PutObjectRequest()             {                 InputStream = file.OpenReadStream(),                 BucketName = "vtcleaner",                 Key = file.FileName // <-- in S3 key represents a path               };              PutObjectResponse response =  client.PutObjectAsync(request).Result;              return Json("Upload Successful.");             }             catch (System.Exception ex)             {                 return Json("Upload Failed: " + ex.Message);             }         // Hello         }     } 

In order to track the Progress,i’m planning to use the following approach

  1. Use the low level API from s3 https://docs.aws.amazon.com/AmazonS3/latest/dev/LLuploadFileDotNet.html

  2. Continuously track the UploadPartProgressEventCallback event and pass the value to Angular

Is this the right approach? Since the call will be an async method , how to keep track of the progress variable ?

Add Comment
1 Answer(s)

Unfortunately, you have to inform frontend about progress changing. So, you should maky kind of ‘request’ to you frontend. It’s unsupportable by regular REST, but you can use SignalR for this propose. For getting information about upload propose, your idea is applicable.

Add Comment

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.