save jpg image in s3 with signed URL - amazon-s3

Question

I am using a signed URL returned by AWS Lambda to upload an jpg image with Angular HTTPClient to S3 bucket. I can see the image.jpg file but when I open it, it says it is invalid format. Please help!
I am expecting I need these HTTP request headers:
'Content-Type': 'image/jpeg'
'Content-Encoding': 'base64'
and I tried with and without the
"data:image/jpeg;base64,"
followed by the based64 encoded data as string.
My lambda is:
var AWS = require('aws-sdk');
var s3 = new AWS.S3({
signatureVersion: 'v4',
});
exports.handler = (event, context, callback) => {
const url = s3.getSignedUrl('putObject', {
Bucket: 'landlord-bucket',
Key: 'image' + '.jpg',
Expires: 20,
ContentEncoding: 'base64',
ContentType: 'image/jpeg',
});
callback(null, url);
};
I upload it using:
#Effect() postToS3$: Observable<Action> = this.actions$
.ofType(PropertyActions.UPLOAD_FILE_PUTS3)
.switchMap((action: PropertyActions.UploadFilePutS3) => {
return this.httpClient.put(action.payload, "data:image/jpeg;base64," + this.filesToUpload)
.pipe(map(res => {
return new PropertyActions.OpenAllProperties(res);},
err => {
console.log("Error occured in get signed url");
}))
})
this.filesToUpload is the string of the base64 encoded jpg. This is correctly encoded since I can see the image at any decoder site.
HTTP interceptor is:
#Injectable()
export class AuthInterceptor implements HttpInterceptor {
constructor(private authService: AuthService) {}
intercept (req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
return this.authService.getAuthenticatedUser().getSession((err, session) => {
if (err) {
console.log("Error getSession")
return next.handle(req);
}
let authReq = null;
if (req.url.indexOf('X-Amz-Algorithm') === -1) {
authReq = req.clone({
headers: req.headers.set('Authorization', session.getIdToken().getJwtToken())
});
} else {
authReq = req.clone({
setHeaders: {'Content-Type': 'image/jpeg', 'Content-Encoding': 'base64'}
});
}
return next.handle(authReq);
})
}
}