fix: FINALLY caught the image error

api/ipfs/utils.py

@@ -18,11 +18,13 @@ def pin_image(imageFile, imageName):
     suffix = imageName.split('.').pop()
 
     try:
-        with NamedTemporaryFile(suffix=f".{suffix}", delete=True) as temp_file:
-            # convert uploaded file to temp file in order to upload.
-            temp_file.write(imageFile.read())
+        with NamedTemporaryFile(suffix=f".{suffix}", delete=True) as temp_file: 
+            with open(temp_file.name, 'wb+') as pin_file:
+                for chunk in imageFile.chunks():
+                    pin_file.write(chunk)
+
             pin_response = pinata.pin_file_to_ipfs(
-                temp_file.name, 
+                pin_file.name, 
                 '', 
                 save_absolute_paths=False
             )

frontend/src/components/Dashboard/Org/OrgForm.js

@@ -96,10 +96,12 @@ const OrgForm = () => {
         }
     }
 
-    // Custom image upload.
-    const onCustomImageUpload = (image) => {
-        setIsCustomImage(true);
-        setOrgImage(image);
+    // Custom image upload. If image gets set to null then get new generative.
+    const onCustomImageUpload = async (image) => {
+        setIsCustomImage(image ? true : false);
+        let customImage = image ? 
+            image : await getPFPImage(firstCharOfName.current);
+        setOrgImage(image ?? customImage);
     }
 
     // Get a generated image for the org.
@@ -117,12 +119,13 @@ const OrgForm = () => {
     
     // Pin the org image to IPFS.
     const pinImage = async (image) => {
-        const response = await postIPFSImage(image)
-        if (response.error) {
+        const response = await postIPFSImage(image);
+
+        if (response?.error) {
             setError({
-                label: 'Could not upload image to IPFS',
+                label: "Error uploading image to IPFS",
                 message: response.error
-            });
+            })
             return;
         }
 

frontend/src/components/Dashboard/Sidebar/OrgSidebar.js

@@ -64,8 +64,6 @@ const OrgSidebar = ({ address }) => {
             openConnectModal()
     }, [openConnectModal, address])
 
-    console.log('ensName', ensName, ensAvatar, ensFetched)
-
     return (
         <div className="sidebar left">
             <div className="sidebar__fixed__container">
@@ -93,15 +91,21 @@ const OrgSidebar = ({ address }) => {
                 {/* Logged in user header */}
                 {address && !orgId && isAuthenticated && !isWrongNetwork &&
                     <>
-                        <div className="sidebar__header">
-                            <ImageLoader 
-                                className="sidebar__header__image"
-                                src={ensAvatar}  
-                            />
-                            <Link className="link-wrapper link-text text-clip" to="/dashboard/" style={{marginTop: "2px"}}>
-                                {userData?.ens_name ? userData.ens_name : sliceAddress(address)}
-                            </Link>
-                        </div>
+                        {ensFetched ? 
+                            <div className="sidebar__header">
+                                <ImageLoader 
+                                    className="sidebar__header__image"
+                                    src={ensAvatar}  
+                                />
+                                <Link className="link-wrapper link-text text-clip" to="/dashboard/" style={{marginTop: "2px"}}>
+                                    {ensName ? ensName : sliceAddress(address)}
+                                </Link>
+                            </div>
+                            :
+                            <button onClick={() => tryAuthentication()} style={{ marginBottom: '20px' }}>
+                                Sign In
+                            </button>
+                        }
 
                     <div className="sidebar__category">
                         <h5>Organizations</h5>

frontend/src/components/Dashboard/Utils/ImageLoader.js

@@ -4,11 +4,6 @@ import ImageErrorFallback from "@static/images/imgerror.svg";
 const ImageLoader = ({className, src, alt}) => {
     const [ loaded, setLoaded ] = useState(false);
 
-    const onLoad = () => {
-        console.log('loaded')
-        setLoaded(true);
-    }
-
     const onError = (e) => {
         e.onError = null;
         e.currentTarget.src = ImageErrorFallback;
@@ -23,7 +18,7 @@ const ImageLoader = ({className, src, alt}) => {
                 className={className}
                 src={src}
                 alt={alt || ""}
-                onLoad={onLoad}
+                onLoad={() => setLoaded(true)}
                 onError={(e) => onError(e)}
                 style={loaded ? {} : { display: 'none' }}
             />