4

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);
        })
    }
}
Evan
  • 507
  • 2
  • 7
  • 21

0 Answers0