AWS Cloudfront Link does not serve through the web - url

Question

I am using AWS S3 and Cloudfront to store images and render images on a webpage. I have managed to generate a signed URL using Cloudfront to render S3 Objects.
The problem is, I tried attaching that signed URL within an a tag for href='' tagger. I was hoping that, when users clicked on the link, it would direct them to the image through the web. Instead, the file is downloaded when a user clicks on the link.
How photo key is generated
var photoKey = $ctrl.clientDetail["_id"] + '/' + fileName;
I created a subdirectory for each user, and store the file in the respective subdirectory.
My Upload Function in AngularJS
s3.upload({
Key: photoKey,
Body: file,
ACL: 'public-read',
Metadata: {
'id': $ctrl.clientDetail["_id"],
'phone': $ctrl.phone
}
}, function(err, data){
if (err) {
$scope.uploadedFail = true;
console.log(err)
genericServices.setErrorInfo($scope.configErrorAddDocAlert, addDoc_reason);
}
else {
$scope.uploadedSuccess = true;
genericServices.setSuccessInfo($scope.configSuccessAddDocAlert, addDoc_success);
}
}
);
What I found interesting was that when I manually uploaded a file in a subdirectory in the AWS S3 console, the generated URL was able to serve the file through the web.
How do I make it, so that the Object within the bucket is not a downloadable file, but a link?

Answer 1

For those who faced the same problem, here is the solution.
When uploading, specify the content-type.
S3 Upload Process modified
s3.upload({
Key: photoKey,
Body: file,
ContentType: file.type,
Metadata: {
'id': $ctrl.clientDetail["_id"],
'phone': $ctrl.phone
}
}, function(err, data){
if (err) {
$scope.uploadedFail = true;
console.log(err)
genericServices.setErrorInfo($scope.configErrorAddDocAlert, addDoc_reason);
}
else {
$scope.uploadedSuccess = true;
genericServices.setSuccessInfo($scope.configSuccessAddDocAlert, addDoc_success);
}
}
);
Initially, the type was application/octet-stream, so it was only downloadable.
Thanks you #michael-sqlbot for the comment