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

[#8604] update file upload widget #5937

Merged
merged 1 commit into from
Jan 16, 2025
Merged

[#8604] update file upload widget #5937

merged 1 commit into from
Jan 16, 2025

Conversation

hom3mad3
Copy link
Contributor

@hom3mad3 hom3mad3 commented Jan 14, 2025

Update styles for the file uploader
This PR updates the styles for the file uploader with some compromises due to my lack of knowledge on the Django/Python side. I wasn’t sure how to create a new widget for the user-facing side, so I adjusted the styles on the existing snippet.

Changes:

  • Style update
  • Added the thumbnail preview inside the input, for better visual feedback. We should also indicate the file size and do client-side validation, but that also required too much django.
  • Included file size display information (image_uploader.js: add file size information adhocracy4#1751)
  • Removed the blue info box, as it wasn’t the right element for this input field and replaced it with a form-hint/help-text approach for better alignment with the design. I'd remove this text altogether, as it's confusing due to the different contexts.

Before upload:
before-upload

With preview:
image-uploader

Select to delete image:
delete-bild

Side effects on dashboard help-text:
dashboard-1
dashboard
upload-image

TODO (backend) - Would require more Django integration, which I couldn’t implement:

  • We should probably separate the file uploaders or unify them into one design, everything is too tangled in django classes, so i don't know how to do that.
  • The image rights-of-use checkbox should ideally be linked to the file uploader for better UX and validation.

@hom3mad3
Copy link
Contributor Author

@CarolingerSeilchenspringer @mcastro-lqd tagging you for feedback on the design

@hom3mad3 hom3mad3 changed the title update file upload widget [#8604] update file upload widget Jan 14, 2025
@hom3mad3 hom3mad3 merged commit 73aa08c into dev Jan 16, 2025
3 checks passed
@hom3mad3 hom3mad3 deleted the mr-2025-01-image-upload branch January 16, 2025 11:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant