Last active
October 11, 2021 09:40
-
-
Save binodpanta/2a2a2d1a8adafec115fb6145e909002e to your computer and use it in GitHub Desktop.
A simple and effective method to upload image files to AWS S3. I will create a Vue component at some point.
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
import axios from 'axios'; | |
import AWS from "aws-sdk"; | |
/** Steps to use this: | |
* Refer to this doc from AWS on how to create S3 supporting Identity to use in this component. https://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/s3-example-photo-album.html | |
* (1) Create Cognito identity pool (see this) and grab the ID of the pool | |
* (2) Ensure the IAM created by cognito has access to your S3 bucket | |
* (3) Use this vue component as a uploader component to upload one image. We can rewrite it to support multi images easily. | |
* | |
* Once done through with the Prerequisite tasks part of the above, just grab the cognito Identity pool id and come here. | |
* Use it like this: | |
* | |
*/ | |
let payload = { | |
contentType: contentType, // you can set it based on the type of image you are uploading like image/png | |
fileName: fileName, | |
file: this.result.replace("data:*/*;base64,", "").replace("data:image/png;base64,","").replace("data:image/jpeg;base64,", "") }; | |
new Uploader().uploadImage(payload, contentType).then(response => { | |
that.loading = false; | |
that.yourCallbackAfterUploadIfNeeded(response); | |
}); | |
*/ | |
/** | |
* Documentation for reference to this: | |
* 1. AWS S3 JavaScript SDK ref: https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#upload-property | |
* 2. Cognito for identity pool to use here | |
* 3. Nice blog on how to do the UI portion: https://www.academind.com/learn/vue-js/snippets/image-upload/ | |
* 4. Nice blog on how to handle image file base64: | |
*/ | |
class Uploader { | |
constructor() { | |
AWS.config.update({ | |
region: "us-east-1", | |
credentials: new AWS.CognitoIdentityCredentials({ | |
IdentityPoolId: "<YOUR COGNITO POOL ID>" | |
}) | |
}); | |
//*/ get reference to S3 client | |
this.s3 = new AWS.S3(); | |
} | |
uploadImage(payload) { | |
let s3 = this.s3; | |
return new Promise(function(resolve, reject) { | |
let encodedImage = payload.file; | |
let decodedImage = Buffer.from(encodedImage, 'base64'); | |
var filePath = payload.fileName; | |
var params = { | |
"Body": decodedImage, | |
"Bucket": "<YOURBUCKETNAME>", | |
"Key": filePath, | |
"ACL": "public-read", /* This makes the image public, but only works if your S3 bucket allows public access */ | |
"ContentType": payload.contentType /* This is important to handle jpg vs png etc */ | |
}; | |
s3.upload(params, function (err, data) { | |
if (err) { | |
reject(err); | |
} else { | |
/** | |
* data returned after upload will look like this: | |
* Bucket: "bucketName" | |
Key: "somefilenametouseinS3.png" | |
Location: "URL to your image" | |
*/ | |
resolve(data); | |
} | |
}); | |
}) | |
} | |
} | |
export default Uploader; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment