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.

Sign up for GitHub

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

Jump to bottom

feat: upload image #447

Merged
merged 7 commits into from
Feb 18, 2025
Merged

feat: upload image #447

merged 7 commits into from
Feb 18, 2025
+318 −23

Conversation

tnkshuuhei
Copy link
Member

@tnkshuuhei tnkshuuhei commented Feb 13, 2025 •
edited
Loading

Closes #388

  • introduces image uploader component(as a button) that allows user to upload image file
  • apply image uploader to minting, collection and setting form
  • add process for storing an image on IPFS first for collection and setting form

@tnkshuuhei
feat: add image uploader component
67ec42f 
this component only allows user to upload image file(png, jpg, jpeg).
@tnkshuuhei
feat: apply image upload to hypercert minting form
098618c 
- when user upload images, then read the image file as base64.
- cardImage(hypercert card preview will be generated based on these). so not necessarily store logo and banner on IPFS.
- Replace URL input with image uploader for logo and banner
- Add validation for image uploads using base64 or valid URL.
@tnkshuuhei
feat: apply image uploader to collection form
6b5eb36 
inside the hooks, if data.backgroundImg exists, convert base64 image to File type to upload. and then store on IPFS by using api '/upload'. this process will be done both create/updateHyperboard
@tnkshuuhei
feat: apply image uploader to setting form
6da41da 
when user upload images, then read the image file as base64.
if data.avatar exists, convert base64 image to File type to upload. and then store on IPFS by using api '/upload'.
@tnkshuuhei tnkshuuhei self-assigned this Feb 13, 2025
@vercel Vercel
Copy link

vercel bot commented Feb 13, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
hypercerts-app ✅ Ready (Inspect) Visit Preview 💬 Add feedback Feb 18, 2025 4:26am

@tnkshuuhei tnkshuuhei linked an issue Feb 13, 2025 that may be closed by this pull request
[UX] Allow users to upload logo and banner images #388
Closed
@tnkshuuhei tnkshuuhei changed the title [WIP] feat: upload image feat: upload image Feb 14, 2025
@tnkshuuhei tnkshuuhei marked this pull request as ready for review February 14, 2025 06:52
bitbeckers
bitbeckers requested changes Feb 14, 2025
View reviewed changes
Copy link
Contributor

@bitbeckers bitbeckers left a comment

Choose a reason for hiding this comment

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

Thanks, works great: https://hypercerts-app-git-feat-upload-image-hypercerts-foundation.vercel.app/hypercerts/11155111-0xa16DFb32Eb140a6f3F2AC68f41dAd8c7e83C4941-295024812120453647822745784643343039332352

components/collections/collection-form.tsx Show resolved Hide resolved
holkexyz
holkexyz requested changes Feb 17, 2025
View reviewed changes
Copy link
Member

@holkexyz holkexyz left a comment

Choose a reason for hiding this comment

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

When I upload a new image on the settings tab, the "Save changes" button is not clickable, e.g. it didn't realize that I made a change:

image

@tnkshuuhei
fix: image validation
27aef52 
- fixed image validation so that form.formState.isValid can handle the state properly.
- set "shouldDirty: true" to disable click "save changes" button when user upload image on /setting
@tnkshuuhei
fix: improve avatar upload validation in settings form
4eecd1d 
skip if data.avatar is not an url. this was causing error when user just wanted to change display name
@tnkshuuhei
Copy link
Member Author

When I upload a new image on the settings tab, the "Save changes" button is not clickable, e.g. it didn't realize that I made a change:

Thanks, applied changes:
https://www.loom.com/share/4512863814da46d5b51b4552403c3ade?sid=e6704d34-3278-4765-b767-6bad605882fa

@holkexyz
Copy link
Member

When I upload a new image on the settings tab, the "Save changes" button is not clickable, e.g. it didn't realize that I made a change:

Thanks, applied changes: https://www.loom.com/share/4512863814da46d5b51b4552403c3ade?sid=e6704d34-3278-4765-b767-6bad605882fa

Great, works for me as well.

It can go into production like that for me. It makes the UX much better. Thanks, @tnkshuuhei

If I would enhance one thing, it would be that after I click "Save" and it is saved, the button either turns gray again or even green and says "Changes saved". But this isn't necessary, this works well enough.

@tnkshuuhei tnkshuuhei added the enhancement New feature or request label Feb 18, 2025
@tnkshuuhei tnkshuuhei merged commit e08fb71 into dev Feb 18, 2025
2 checks passed
@tnkshuuhei tnkshuuhei deleted the feat/upload-image branch February 18, 2025 11:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@bitbeckers bitbeckers bitbeckers approved these changes

@holkexyz holkexyz holkexyz approved these changes

@Jipperism Jipperism Awaiting requested review from Jipperism

@pheuberger pheuberger Awaiting requested review from pheuberger

Assignees

@tnkshuuhei tnkshuuhei

Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[UX] Allow users to upload logo and banner images
3 participants
@tnkshuuhei @holkexyz @bitbeckers