Add blurhash to upload form, fixes #661

app/soapbox/features/compose/components/upload.js

@@ -7,6 +7,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import Icon from 'soapbox/components/icon';
+import Blurhash from 'soapbox/components/blurhash';
 
 const messages = defineMessages({
   description: { id: 'upload_form.description', defaultMessage: 'Describe for the visually impaired' },
@@ -102,6 +103,7 @@ class Upload extends ImmutablePureComponent {
 
     return (
       <div className='compose-form__upload' tabIndex='0' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} onClick={this.handleClick} role='button'>
+        <Blurhash hash={media.get('blurhash')} className='media-gallery__preview' />
         <Motion defaultStyle={{ scale: 0.8 }} style={{ scale: spring(1, { stiffness: 180, damping: 12 }) }}>
           {({ scale }) => (
             <div

app/styles/components/compose-form.scss

@@ -219,6 +219,9 @@
       flex: 1 1 0;
       min-width: 40%;
       margin: 5px;
+      position: relative;
+      border-radius: 4px;
+      overflow: hidden;
 
       &__actions {
         background: linear-gradient(180deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent);
@@ -298,7 +301,6 @@
     }
 
     .compose-form__upload-thumbnail {
-      border-radius: 4px;
       background-position: center;
       background-size: contain;
       background-repeat: no-repeat;