Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mfkimbell/aws-amplify-file-dashboard
https://github.com/mfkimbell/aws-amplify-file-dashboard
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/mfkimbell/aws-amplify-file-dashboard
- Owner: mfkimbell
- Created: 2024-03-19T01:52:04.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-05-21T18:54:40.000Z (7 months ago)
- Last Synced: 2024-05-21T20:05:54.025Z (7 months ago)
- Language: JavaScript
- Size: 681 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# AWS Amplify File Dashboard
An AWS Amplify React application that allows users to sign in using Amplify's authenication through Cognito User Pools, then add comments and files to a group dashboard. A user can upload files for all other users to see and download, as well as add comments. Files are stored in S3 and comments are stores via GraphQL into a DynamoDB table.
# Sign Into Account
# Create Account
# Email Sent To User
# Email Verification
# Uploading and Downloading Files
https://github.com/mfkimbell/aws-amplify-auth/assets/107063397/ecea9d35-6007-4402-9e72-87795a9e2235
Here we can see the files have successfully made it on AWS S3
# Adding Comments
https://github.com/mfkimbell/aws-amplify-auth/assets/107063397/7174762f-5064-4a33-8553-980d787649ba
``` Javascript
const uploadComment = async (name, comment) => {
const result1 = await client.graphql({
query: createTodo,
variables: {
input: {
name: name,
description: comment,
},
},
});
console.log("result1", result1);
};
```
# Deleting Entries
https://github.com/mfkimbell/aws-amplify-auth/assets/107063397/c6d4bbbb-103e-472a-bc82-534ba62a7401
``` Javascript
const deleteFile = async (filename) => {
console.log("filename", filename);
try {
await remove({ key: filename, level: "public" });
console.log("File deleted successfully:", filename);
// Optionally, refresh the list of files after successful deletion
await listObjectsFromS3();
} catch (error) {
console.error("Error deleting file:", error);
}
};
const deleteComment = async (id) => {
try {
const result = await client.graphql({
query: deleteTodo,
variables: {
input: {
id: id,
},
},
});
console.log("Delete result", result);
setItems(items.filter((item) => item.id !== id)); // Update state to remove the deleted item
} catch (error) {
console.error("Error deleting comment:", error);
}
};
```
# Why use AWS Amplify?
AWS Amplify is a development platform provided by Amazon Web Services (AWS) that makes it easy for developers to build, deploy, and scale mobile and web applications. It integrates with various AWS services and provides a set of tools and is easy to use and allows for rapid build speeds.
# Adding Comment
We can see the files clearly in the DynamoDB
https://github.com/mfkimbell/aws-amplify-auth/assets/107063397/d45fd6e7-a0b4-4f2c-b2f2-a74f7595882c
``` Javascript
async function listTodoItem() {
const entries = await client.graphql({ query: listTodos });
console.log("entries: ", entries.data.listTodos.items);
setItems(entries.data.listTodos.items);
}
```
This code accesses the AWS Amplify Graphql Client, which interacts with AWS Appsync. The Appsync endpoint takes in the GraphQL request and translates that into the DynamoDB database. GraphQL is useful since it's good for quickly making a flexible api. AppSync allows you to skip the creation of your own GraphQL resolvers and data-source connections, so it streamlines the creation of the API from your application.
# Adding Photos
``` Javascript
const uploadFile = async () => {
try {
const result = await uploadData({
level: "public",
key: fileData.name,
data: fileData,
options: {
accessLevel: "public", // had to change this to public
},
});
console.log("Succeeded: ", result);
setFileStatus(true);
// Refresh the list of files after successful upload
await listObjectsFromS3();
} catch (error) {
console.log("Error : ", error);
}
};
```
Here instead of using AppSync, we use the uploadData() function from `aws-amplify/storage`. This connects directly to S3 to allow for storage of larger more complex files (like images shown above).
# Permissions
In order to allow for users to access these files I made the bucket public.
As well as updating the bucket policy to allow for reading and deleting of files:
```
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": [
"s3:GetObject",
"s3:DeleteObject"
],
"Resource": "arn:aws:s3:::amplifyb3502e3fafb5443b9693b46ee84fbfbb215210-dev/*"
}
]
}
```
# Authentication
This "withAuthenticator" wrapper `export default withAuthenticator(App);` redirects unauthorized users to the login page. AWS Amplify allows you to designate the preferred authentication method, and I chose Cognito. Here we can see my two users in my Cognito User Pool that was set up by Amplify:
