Uploading Files/Images to S3 Server Using Angular HTTP PUT Method

Question

I am working on an Angular application where I need to upload files or images to an S3 server using the http.put method. I have written the following code, but I am encountering issues with the upload process. Here is my code:

uploadFileToS3(fileUrl: string, file: File): Observable<any> {
    const formData = new FormData();
    formData.append('data', file);

    const headers = new HttpHeaders({
        'Content-Type': file.type
    });

    return this.http.put<any>(fileUrl, formData, { headers: headers });
}

url = link

However, when I try to upload a file using this function, I receive a response stating "the request has no data available." I have also tried setting the content type in the headers, but it doesn't seem to work.

Could anyone please guide me on how to fix this issue and successfully upload files or images to the S3 server using Angular's HTTP PUT method? Is there anything specific I need to consider in terms of headers or formatting the request? when i tried to download or see this file its showing issue this is the img downloaded from s3

the code for uploading file to s3

uploadFileToS3(fileUrl, file) {
        var formData = new FormData();
        formData.append('data', file);

        const headers = new HttpHeaders({
            'Content-Type': "multipart/form-data"
        });

        return this.http.put<any>(fileUrl, formData, {
            responseType: 'text' as 'json'
        });
}

Thank you in advance for your help!

you can dot it without formData(); const headers: HttpHeaders = new HttpHeaders(); headers.set('Content-Type', file.type); return this._httpClient.put<object>(signedUrl, file, { headers }); — Alpine A110R
– Alpine A110R, Commented Mar 27, 2024 at 16:14
not an answer, but you should be aware that when you send a FormData() object the headers and content-type are set automatically. (Don't pass/set headers when you send FormData()...) — browsermator
– browsermator, Commented Mar 27, 2024 at 21:09

codewithakki · Accepted Answer · 2024-03-29 11:32:37Z

0

I tried this solution instead of directly use PUT http method use request object and create requests headers and method name passed it to request method problem will be resolved: The solution is here,

uploadFileToS3(presignedUrl, file) {
        const headers = new HttpHeaders({
            'Content-Type': file.type,
        });

        const req = new HttpRequest(
            'PUT', presignedUrl, file, { headers: headers }
        );
        return this.http.request<any>(req);
    }

answered Mar 29, 2024 at 11:32

codewithakki

1091 silver badge6 bronze badges

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

1 Comment

codewithakki Over a year ago

by using "new formData()" image parsing into size null so it wont be in used

Fabio Franco · Accepted Answer · 2024-03-27 11:17:52Z

To achieve what you are after you need the following:

On your component, a function to get the file from the form:

onFileSelected(event: any) {
  const file: File = event.target.files[0];
  if (file) {
    this.http.put(url, file, {
      headers: {
        'Content-Type': file.type
      },
      reportProgress: true,
      observe: 'events'
    }).subscribe({
      next: (event) => {
        console.log(event); // Handle the upload progress
      },
      error: (error) => {
        console.error('Upload failed:', error);
      },
      complete: () => {
        console.log('Upload complete');
      }
    });
}

Now on your template, something like this:

<input type="file" (change)="onFileSelected($event)">

Some important notes:

As you can see, although sending the file from the browser directly to s3 bucket is possible, it is very insecure and bad practice. Here we are assuming your bucket is completely public and will accept uploads from anyone, unless your application is a non-public app and the client has allowed access to the bucket (which is technically possible via, for example, direct connect or a vpn connection to a vpc with a gateway to s3).
A more appropriate way to achieve this is to either: a) have a backend processing the request (authenticating, authorizing and validating) and then forward to the s3 bucket; b) having a backend function - like a lambda - to return a pre-signed url for the s3 bucket

Collectives™ on Stack Overflow

Uploading Files/Images to S3 Server Using Angular HTTP PUT Method

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related