Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(awards): add file storage for award logos #32

Merged
merged 52 commits into from
Feb 28, 2024
Merged

feat(awards): add file storage for award logos #32

merged 52 commits into from
Feb 28, 2024

Conversation

zhammer
Copy link
Contributor

@zhammer zhammer commented Feb 24, 2024

award logos are now stored as images in s3 or the local filesystem rather than data blobs. doesn't require a db or api schema migration. whereas before img src={} is the data blob, now it's the url to the uploaded image.

uploading a logo works like this:

  1. i visit /awards/new
  2. i use the image uploader to input an image
  3. the image gets uploaded to the awards API, which stores it in an s3 bucket after passing validation and returns a url for image
  4. i click submit changes
  5. the new award, with { image: <new_image_url> }, is sent to the backend

plugins/awards-backend/src/service/router.ts Outdated Show resolved Hide resolved
});
});

router.get('/logos/:key', async (request, response) => {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

so here we are essentially creating an s3 proxy so we can serve images from a private s3 bucket.

my main q is: do we want to just use a public s3 bucket here? only because it’d be nice to post award logos in automated slack messages. we may also be able to use presigned urls for sharing images from a private bucket to slack though not 100% sure

plugins/awards/src/api/AwardsBackendClient.ts Show resolved Hide resolved
setAwardImage(reader.result?.toString() ?? '');
};

const newImage = `https://picsum.photos/100/50/?original=${random(
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i got rid of the auto image generation since it doesn’t work as well with the new model, and i don’t think it’s super important

</Grid>
<Grid item>
<img alt="" src={awardImage} height="50" width="150" />
<img alt="" src={awardImage} height="200" width="600" />
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just picking an arbitrary “nice size”.

Copy link
Contributor

@jeduardo jeduardo Feb 26, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@zhammer maybe we should have a big and a small image? The big one would be displayed on the awards page itself, and the small one as a badge on Slack, Backstage profile, etc.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yep i was thinking we could add image resizing, though that may be a good amount of work so was going to leave that for the future. for now showing the same image in both places shouldn't be too much trouble

@zhammer zhammer changed the base branch from zh-slack to main February 26, 2024 20:36
Copy link
Member

@colinodell colinodell left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it would be nice to support storage backends other than S3, but given that many cloud providers offer S3-compatible storage I don't think that needs to be a blocker.

I'm fine with merging this as-is though!

plugins/awards-backend/src/awards.ts Outdated Show resolved Hide resolved
plugins/awards-backend/src/service/router.ts Outdated Show resolved Hide resolved
@zhammer zhammer changed the title feat(awards): add s3 storage for award logos feat(awards): add file storage for award logos Feb 27, 2024
Copy link
Member

@colinodell colinodell left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm really liking how this is coming together - nicely done! I do have two questions, but nothing that would block this.

```yaml
awards:
storage:
fs:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(Optional nit) what do you think about using local instead of fs?

@@ -23,6 +23,7 @@
"postpack": "backstage-cli package postpack"
},
"dependencies": {
"@aws-sdk/client-s3": "^3.521.0",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this still needed?

@zhammer zhammer merged commit 53cefa7 into main Feb 28, 2024
9 checks passed
Copy link

🎉 This PR is included in version 1.0.2 🎉

The release is available on @seatgeek/[email protected]

Your semantic-release bot 📦🚀

Copy link

🎉 This PR is included in version 2.0.0 🎉

The release is available on @seatgeek/[email protected]

Your semantic-release bot 📦🚀

Copy link

🎉 This PR is included in version 2.0.0 🎉

The release is available on @seatgeek/[email protected]

Your semantic-release bot 📦🚀

Copy link

🎉 This PR is included in version 1.0.0 🎉

The release is available on @seatgeek/[email protected]

Your semantic-release bot 📦🚀

Copy link

🎉 This PR is included in version 1.0.2 🎉

The release is available on @seatgeek/[email protected]

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants