Fix profile picture preview (#26538)

app/javascript/packs/public.jsx

@@ -231,8 +231,8 @@ delegate(document, '#account_display_name', 'input', ({ target }) => {
   }
 });
 
-delegate(document, '#account_avatar', 'change', ({ target }) => {
-  const avatar = document.querySelector('.card .avatar img');
+delegate(document, '#edit_profile input[type=file]', 'change', ({ target }) => {
+  const avatar = document.getElementById(target.id + '-preview');
   const [file] = target.files || [];
   const url = file ? URL.createObjectURL(file) : avatar.dataset.originalSrc;
 
@@ -254,14 +254,6 @@ delegate(document, 'img#profile_page_avatar', 'mouseover', getProfileAvatarAnima
 
 delegate(document, 'img#profile_page_avatar', 'mouseout', getProfileAvatarAnimationHandler('data-static'));
 
-delegate(document, '#account_header', 'change', ({ target }) => {
-  const header = document.querySelector('.card .card__img img');
-  const [file] = target.files || [];
-  const url = file ? URL.createObjectURL(file) : header.dataset.originalSrc;
-
-  header.src = url;
-});
-
 delegate(document, '#account_locked', 'change', ({ target }) => {
   const lock = document.querySelector('.card .display-name i');
 

app/javascript/styles/mastodon/forms.scss

@@ -309,9 +309,19 @@ code {
       border-radius: 4px;
       background: url('images/void.png');
 
+      &[src$='missing.png'] {
+        visibility: hidden;
+      }
+
       &:last-child {
         margin-bottom: 0;
       }
+
+      &#account_avatar-preview {
+        width: 90px;
+        height: 90px;
+        object-fit: cover;
+      }
     }
   }
 

app/views/settings/profiles/show.html.haml

@@ -35,10 +35,10 @@
       .fields-group
         = f.input :avatar, wrapper: :with_block_label, input_html: { accept: AccountAvatar::IMAGE_MIME_TYPES.join(',') }, hint: t('simple_form.hints.defaults.avatar', dimensions: '400x400', size: number_to_human_size(AccountAvatar::LIMIT))
 
-    - if @account.avatar.present?
-      .fields-row__column.fields-row__column-6
-        .fields-group
-          = image_tag @account.avatar.url, class: 'fields-group__thumbnail', width: 90, height: 90
+    .fields-row__column.fields-row__column-6
+      .fields-group
+        = image_tag @account.avatar.url, class: 'fields-group__thumbnail', id: 'account_avatar-preview'
+        - if @account.avatar.present?
           = link_to settings_profile_picture_path('avatar'), data: { method: :delete }, class: 'link-button link-button--destructive' do
             = fa_icon 'trash fw'
             = t('generic.delete')
@@ -48,10 +48,10 @@
       .fields-group
         = f.input :header, wrapper: :with_block_label, input_html: { accept: AccountHeader::IMAGE_MIME_TYPES.join(',') }, hint: t('simple_form.hints.defaults.header', dimensions: '1500x500', size: number_to_human_size(AccountHeader::LIMIT))
 
-    - if @account.header.present?
-      .fields-row__column.fields-row__column-6
-        .fields-group
-          = image_tag @account.header.url, class: 'fields-group__thumbnail'
+    .fields-row__column.fields-row__column-6
+      .fields-group
+        = image_tag @account.header.url, class: 'fields-group__thumbnail', id: 'account_header-preview'
+        - if @account.header.present?
           = link_to settings_profile_picture_path('header'), data: { method: :delete }, class: 'link-button link-button--destructive' do
             = fa_icon 'trash fw'
             = t('generic.delete')