Docker/Maybe
Docker/Maybe
1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-07-22 22:59:39 +02:00
Code Issues Releases Activity Actions 1

Feature/profile image uploads (#687)

Browse source 
* Introduce ActiveStorage

* Add active storage related service gems

* Update storage.yml

* Install image processing gem
- sudo apt-get install libvips (required dependency)

* Set default active storage service

* Add profile image to user model

* Amend form to allow profile images to be saved, introduce stimulus controller.

* Purge image when form is blank

* Update markup/stimulus controller

* Add test for profile image uplaods

* Add profile image validation

* Use rails guide gem versions

* Use correct ERB syntax and make all storage options configurable

* Ensure form submits when user clears profile image

* Add profile image thumbnail method

* Extract profile image to a partial

* Updates env.example and storage.yml

* Fix bug with double form save

* Add profile image to the sidenav

* Update production config

* Fix ERB formatting

* normalize en.yml

* Handle non-square images

* Use pre-processing on thumbnail variant

* Resovle gemfile.lock issues

* Rubocop style changes

---------

Signed-off-by: Christian <47796704+crobbo@users.noreply.github.com>
Co-authored-by: Christian Robinson <christian@robbo.dev>
This commit is contained in:
Christian 2024-04-30 18:38:33 +01:00 • committed by GitHub
parent 19ee773d9b
commit dc024d63b0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
17 changed files with 349 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

27
app/javascript/controllers/profile_image_preview_controller.js Normal file
View file

@ -0,0 +1,27 @@
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = ["imagePreview", "fileField", "deleteField", "clearBtn", "template"]
preview(event) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
this.imagePreviewTarget.innerHTML = `<img src="${e.target.result}" alt="Preview" class="w-24 h-24 rounded-full object-cover" />`;
this.templateTarget.classList.add("hidden");
this.clearBtnTarget.classList.remove("hidden");
};
reader.readAsDataURL(file);
}
}
clear() {
this.deleteFieldTarget.value = true;
this.fileFieldTarget.value = null;
this.templateTarget.classList.remove("hidden");
this.imagePreviewTarget.innerHTML = this.templateTarget.innerHTML;
this.clearBtnTarget.classList.add("hidden");
this.element.submit();
}
}