I'm having trouble getting photos to orient the correct way in my angular/node app.
My app is set up so that I use ng2-file-upload to send the file from the angular app to the server where multer and multer-s3 saves that photo in AWS S3. I then save the filename in my postgres database and use it to call the photo by url.
My issue is, is the photo is uploaded by the iPhone (could be others I only tried iphone) and is returned rotated to the left.
Ive looked into different options on the server side that have not worked for me. This includes the libraries fix-orientation and jpeg-autorotate.
Does anyone have a solution they've implemented on the client-side in Angular2+ ?
Here is my image-upload code on the server side
aws.config.loadFromPath(path3);
var s3 = new aws.S3();
var fileName = '';
var uploadM = multer({
storage: multerS3({
s3: s3,
bucket: 'XXX',
acl: 'public-read',
metadata: function (req, file, cb) {
console.log(file);
console.log(req.file);
cb(null, {fieldName: file.fieldname});
},
key: function (req, file, cb) {
fileName = Date.now().toString() + "-" + (Math.round(Math.random() * 10000000000000000)).toString() + '-' + file.originalname;
cb(null, fileName)
}
})
});
router.post('/upload', uploadM.array('photo', 3), function(req,res) {
if (res.error) {
return res.status(400).json({
message: "Error",
error: res.error
});
}
return res.status(200).send(fileName);
});
module.exports = router;
And here is my code on the angular app
public uploader:FileUploader = new FileUploader({url: this.devUrl, itemAlias: 'photo'});
constructor(
private userS: UserService,
private authS: MyAuthService,
private router: Router,
private itemS: ItemService,
private uis: UiService) {}
ngOnInit() {
this.uploader.onAfterAddingFile = (file)=> { file.withCredentials = false; };
this.uploader.onCompleteItem = (item:any, response:any, status:any, headers:any) => {
this.awsUrls.push('AWSURL' + response);
this.filesUploaded = true;
this.uploaderLoading = false;
};
}
addItem() {
this.uploaderLoading = true;
this.itemS.onNewItem(this.awsUrls)
.subscribe(data => {
this.uis.onFlash('Posted Successfully. Add Details!', 'success');
this.itemS.onSetUpdateItemId(data.id, false);
this.uploaderLoading = false;
this.onPhotoAdded();
}, resp => {
this.uploaderLoading = false;
this.uis.onFlash('Error Posting', 'error');
console.log(resp);
});
}
onUploadClicked() {
this.uploader.uploadAll();
this.uploaderLoading = true;
}
