attaching files to comments

src/components/node/CommentForm/index.tsx

@@ -17,6 +17,8 @@ import * as UPLOAD_ACTIONS from '~/redux/uploads/actions';
 import { selectUploads } from '~/redux/uploads/selectors';
 import { IState } from '~/redux/store';
 import pipe from 'ramda/es/pipe';
+import { ImageUpload } from '~/components/upload/ImageUpload';
+import { getImageSize } from '~/utils/dom';
 
 const mapStateToProps = (state: IState) => ({
   node: selectNode(state),
@@ -125,6 +127,23 @@ const CommentFormUnconnected: FC<IProps> = ({
           />
         </div>
 
+        <div className={styles.uploads}>
+          {comment_data[id].files.map(file => (
+            <ImageUpload id={file.id} thumb={getImageSize(file.url)} key={file.id} />
+          ))}
+          {comment_data[id].temp_ids.map(
+            status =>
+              statuses[status] && (
+                <ImageUpload
+                  id={statuses[status].uuid}
+                  thumb={statuses[status].preview}
+                  key={status}
+                  progress={statuses[status].progress}
+                />
+              )
+          )}
+        </div>
+
         <Group horizontal className={styles.buttons}>
           <input type="file" onInput={onInputChange} />
 

src/components/node/CommentForm/styles.scss

@@ -21,3 +21,11 @@
 
   @include outer_shadow();
 }
+
+.uploads {
+  padding: ($gap / 2);
+  display: grid;
+  grid-column-gap: $gap / 2;
+  grid-row-gap: $gap / 2;
+  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+}