add user auth to upload

src/components/FileUploadModal/index.tsx

@@ -11,6 +11,8 @@ import FileSelectButton from "../FileSelectButton";
 import Input from "../Input";
 import config from "../../util/config";
 import URLPreview from "../URLPreview";
+import {useDispatch} from "react-redux";
+import {ipfsUploadOne} from "../../util/upload";
 
 type Props = {
     className?: string;
@@ -23,6 +25,7 @@ type Props = {
 const maxFileSize = 4194304;
 
 export default function FileUploadModal(props: Props): ReactElement {
+    const dispatch = useDispatch();
     const drop = useRef<HTMLDivElement>(null);
     const [err, setError] = useState('');
     const [previewUrl, setPreviewUrl] = useState('');
@@ -111,17 +114,13 @@ export default function FileUploadModal(props: Props): ReactElement {
 
         try {
             if (file) {
-                const data = new FormData();
-                data.append('files', file);
-                const res = await fetch(`${config.indexerAPI}/ipfs/upload`, {
-                    method: 'POST',
-                    body: data,
-                });
-                const json = await res.json();
+                const json: any = await dispatch(ipfsUploadOne(file));
 
                 if (!json.error) {
                     const {url} = json.payload;
                     props.onAccept(url);
+                } else {
+                    setError(json.payload);
                 }
             } else if (link) {
                 props.onAccept(link);

src/components/URLPreview/url-preview.scss

@@ -14,25 +14,31 @@
   }
 
   &__img {
-    position: absolute;
+    position: relative;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
+    max-height: 20rem;
     object-fit: contain;
-    object-position: top;
+    object-position: center;
+    margin: 0 auto;
   }
 
   &__img-container {
     position: relative;
-    padding-top: 56.25%;
+    max-height: 20rem;
     background: black;
 
     &--showAll {
       padding-top: 0;
+      max-height: 999rem;
 
       .url-preview__img {
         position: relative;
+        max-height: 999rem;
+        width: fit-content;
+        max-width: 100%;
       }
     }
   }

src/util/upload.ts

@@ -0,0 +1,33 @@
+import {Dispatch} from "redux";
+import {AppRootState} from "../store/configureAppStore";
+import config from "./config";
+import {signWithP256} from "./crypto";
+
+export const ipfsUploadOne = (file: File) => async (
+    dispatch: Dispatch,
+    getState: () => AppRootState,
+) => {
+    const { worker: {selected}} = getState();
+
+    if (selected?.type !== 'gun') {
+        throw new Error('user is not authenticated');
+    }
+
+    const signature = signWithP256(selected.privateKey, selected.address) + '.' + selected.address;
+
+    const data = new FormData();
+
+    data.append('files', file);
+
+    const res = await fetch(`${config.indexerAPI}/ipfs/upload`, {
+        method: 'POST',
+        body: data,
+        headers: {
+            'X-SIGNED-ADDRESS': signature,
+        },
+    });
+
+    const json = await res.json();
+
+    return json;
+}