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

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

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!

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);
    }