Last active
February 12, 2018 23:39
-
-
Save ihadeed/bf599e8ba51cf9034fb12d6425e0ffaa to your computer and use it in GitHub Desktop.
Ionic/Cordova Image Upload to AWS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
changeAvatar(): void { | |
let handler: Function = (source: number) => { | |
let updateAvatar: Function = (image_url?: string) => { | |
this.api.post('user/avatar', {image_url: image_url}) | |
.then( | |
()=> { | |
this.events.publish('auth:status', true); | |
this.updateUserInfo(); | |
}, | |
(e)=>console.error(e) | |
) | |
}; | |
if(source === -1) return updateAvatar(); | |
let options: CameraOptions = { | |
sourceType: source, | |
quality: 100, | |
encodingType: 0, | |
targetWidth: 500, | |
targetHeight: 500, | |
correctOrientation: true | |
}; | |
this.platform.ready() | |
.then(()=>{ | |
Camera.getPicture(options) | |
.then( | |
(picture: any) => { | |
console.log(picture); | |
Crop.crop(picture, {quality: 100}) | |
.then((pic: string)=>{ | |
this.api.get('user/signed-url') | |
.then((data: any)=>{ | |
let upload_url: string = data.data.upload_url; | |
let image_url: string = data.data.public_url; | |
let transfer = new Transfer(); | |
let options: FileUploadOptions = { | |
httpMethod: 'PUT', | |
chunkedMode: false, | |
headers: { | |
'Content-Type': 'image/jpeg' | |
} | |
}; | |
transfer.upload(pic, upload_url, options) | |
.then( | |
() => updateAvatar(image_url), | |
(e)=>console.error(e) | |
) | |
}, (error) => console.error(error)) | |
}); | |
}, | |
(error: any) => console.error(error) | |
) | |
}); | |
}; | |
let select = this.actionSheetCtrl.create({ | |
title: 'Pick a source', | |
buttons: [ | |
{ | |
text: 'Camera', | |
icon: 'camera', | |
handler: () => handler(1) | |
}, | |
{ | |
text: 'Gallery', | |
icon: 'image', | |
handler: () => handler(0) | |
}, | |
{ | |
text: 'Delete avatar', | |
icon: 'trash', | |
role: 'destructive', | |
handler: () => handler(-1) | |
}, | |
{ | |
text: 'Cancel', | |
role: 'cancel', | |
icon: 'close' | |
} | |
] | |
}); | |
select.present(); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
static getSignedUrl(req: any, res: any){ | |
// creating new instance of aws.S3 service | |
let s3 = new aws.S3(); | |
// here we are setting the path to where the picture should be saved | |
let file_name = 'avatars/' + req.auth.user_id + '/' + Date.now() + '.jpg'; | |
// params for the signedURL requestd | |
let params = { | |
Bucket: 'BUCKET-NAME', // name of the bucket | |
Key: file_name, // file path + name | |
Expires: 120, // signed URL expires in 120 seconds | |
ContentType: 'image/jpeg', // mime type (ideally, we should allow multiple types, and ask the client to send us the type) | |
ACL: 'public-read' // this is important so when the image is uploaded, it is accessible to public | |
}; | |
s3.getSignedUrl('putObject', params, (err, data) => { | |
if(err) console.log(err); | |
Utils.res(res, { | |
upload_url: data, // this will be the url we upload to | |
public_url: 'https://BUCKET-NAME.s3.amazonaws.com/' + file_name // this will be the public url to access the image after upload | |
}); | |
}); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This was the only piece of Cordova-S3 releated code that worked for me.
Thanks for sharing.