S3 file upload with presigned url returns status (canceled)

Question

I am trying to upload a file to Amazon S3 using the angular client. I have generated Presigned URL using the NodeJs application server. While uploading a file to presigned URL, but it fails to upload a file from the client, gets (canceled).

I tried to upload file in formats: buffer, base64, formData and raw File

This works if I try uploading with the postman to the generated URL on binary form

Generating Presigned URL using NodeJs

      const s3 = new AWS.S3({
         accessKeyId: AWS_ACCESS_KEY,
         secretAccessKey: AWS_SECRET_ACCESS_KEY,
         region: 'eu-central-1',
      });
      const signedUrlExpireSeconds = 60 * 5;
      const presignedS3Url = s3.getSignedUrl('putObject', {
         Bucket: process.env.bucket,
         Key: './test3Public.pdf',
         Expires: signedUrlExpireSeconds,
         ACL: 'public-read',
         ContentType: 'application/pdf',
      });

HTML

<input
      type="file"
      (change)="onFileSelected($event)"
      accept="application/pdf, .docx"
   />

Component.ts

onFileSelected(event: any) {
      this.fileToUpload = <File>event.target.files[0];
     
      this.fileUpload
         .generatePresignedURL(this.fileToUpload.name)
         .pipe(first())
         .subscribe(
            (data) => {
               this.fileUpload
                  .uploadfileAWSS3(this.fileToUpload, data.presignedS3Url)
                  .pipe(first())
                  .subscribe(
                     (data) => {
                        console.log('uploaded', data);
                     },
                     (error) => {
                        console.log('error', error);
                     }
                  );
            },
            (error) => {
               console.log('error', error);
            }
         );
   }

format that im sending a file:

Angular 11 Service

 uploadfileAWSS3(file, fileuploadurl) {
      const req = new HttpRequest('PUT', fileuploadurl, file);
      return this.http.request(req);
   }

Could you help me where is the problem that the upload gets canceled?

Yes, it is also if it wasn't postman should have thrown an error. — Ibrahim S. Gerbiqi
– Ibrahim S. Gerbiqi, Commented Feb 5, 2021 at 13:40
ok.. postman doesn't throw cors errors, its just the browser. if you have setup CORS correctly.. i can't think of other reasons why it works in postman but not in angular code — Balu Vyamajala
– Balu Vyamajala, Commented Feb 5, 2021 at 13:42
I couldn't spot an issue in code, but I just tried similar code for uploading a pdf from angular let me add some details to see if it helps. — Balu Vyamajala
– Balu Vyamajala, Commented Feb 5, 2021 at 14:49

Balu Vyamajala · Accepted Answer · 2021-02-05 15:06:10Z

1

HTML:

    <input type="file" (change)="onFileSelected($event)" accept="application/pdf, .docx"
    />

Angular Code:

  onFileSelected(event) {
    const fileToUpload = <File>event.target.files[0];
    const bucketParms = {
      Bucket: "sample-temp-bucket",
      Key: fileToUpload.name,
      ContentType: "application/pdf",
      ACL: "public-read",
      Expires: 3600,
    };
    s3.getSignedUrl("putObject", bucketParms, (error, url) => {
      if (error) console.log("error", error);
      if (url) {
        this.http.put(url, fileToUpload).subscribe((response) => {
          console.log("response receved is ", response);
        });
      }
    });
  }

CORS:

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "POST"
        ],
        "AllowedOrigins": [
            "http://localhost:4200"
        ],
        "ExposeHeaders": []
    }
]

edited Feb 5, 2021 at 15:06

answered Feb 5, 2021 at 14:54

Balu Vyamajala

10.5k1 gold badge28 silver badges51 bronze badges

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

4 Comments

Ibrahim S. Gerbiqi Over a year ago

Does this method work on your side? if yes could you share will me your CORS configuration?

Balu Vyamajala Over a year ago

yes, its working code. just updated with CORS

Ibrahim S. Gerbiqi Over a year ago

i was missing http:// on "AllowedOrigins": [ "localhost:4200" ], Thank you so much

Balu Vyamajala Over a year ago

Great! Glad I could help.

Collectives™ on Stack Overflow

S3 file upload with presigned url returns status (canceled)

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related