fix: change upload of images process to make it easier, fixing bugs

Author: careagain-org

webapp/backend/routes/organizations_routes.py

@@ -34,16 +34,20 @@ async def upload_image(org_id: str,
             file_options={"content-type": file.content_type,
                         "cache-control": "3600", "upsert": "true",},
         )
-        
-        return {"filename":f"{url_s3_object}/{url_photo}", "detail": "Image uploaded","org_id":org_id}
+
+        return {"filename":f"{url_s3_object}{url_photo}", "detail": "Image uploaded","org_id":org_id}
 
     except Exception as err:
         raise HTTPException(status_code=500, detail=str(err))
 
 def validate_float(my_string:str):
     try:
-        return float(my_string)
+        if my_string is None or my_string=="":
+            return None
+        else:
+            return float(my_string)
     except:
+        print("Invalid float value")
         return None
 
 @organization_route.post("/create_org",tags = ['organizations'])

webapp/backend/routes/project_routes.py

@@ -26,8 +26,8 @@ async def create_project(input:project_schema.CreateProject,
                                  name = input.name,
                                  type = input.type,
                                  description= input.description,
-                                 logo = f"{url_s3_object}projects/{input.project_id}/images/{input.logo}" if input.logo else "",
-                                 image = f"{url_s3_object}projects/{input.project_id}/images/{input.image}" if input.image else "",
+                                 logo = f"{input.logo}" if input.logo else "",
+                                 image = f"{input.image}" if input.image else "",
                                  website = input.website,
                                  repo = input.repo,
                                  guide = input.guide,

webapp/frontend/components/forms_popover.py

@@ -2,8 +2,8 @@
 import reflex_clerk_api as reclerk
 from .user_input_text import SimpleTextInput
 from .forms import ProjectForm,InstitutionForm, VideoForm
-from .org_forms  import form_org,search_org
-from .project_forms  import form_project,search_project
+from .org_forms  import form_org,search_org,upload_logo_org
+from .project_forms  import form_project,search_project,upload_image,upload_logo
 from .user_forms import form_user,search_user_org,search_user_project
 from ..states.auth_state import AuthState
 from ..constants import urls
@@ -49,6 +49,9 @@ def add_new_popover(my_title:str):
             ("user", form_user()),
             form_org(),
             ),
+        on_open_change=[upload_logo_org.State.clear_image,
+                    upload_image.State.clear_image,
+                    upload_logo.State.clear_image,]
     )
 
 def search_popover(my_title:str):

webapp/frontend/components/org_forms.py

@@ -1,22 +1,21 @@
 import reflex as rx
-import uuid
-from typing import List,Dict
-from .user_input_text import SimpleTextInput
-from .upload import upload_logo_org
-from ..states.project_state import ProjectState
+from .upload import ImageUpload
 from ..states.org_state import OrgState
-from .upload import upload_logo_org
+# from .upload import upload_logo_org, upload_image
 from .map import interactive_map
 import clipboard
 import os
 from ..components.org_card import org_grid_vertical
 
+upload_logo_org = ImageUpload.create()
 
 def form_org() -> rx.Component:
     all_organization: list[str] = ["Hospital", "Logistics and Transport",
                                     "Research and Development","Manufacturer"]
+    
 
-    return rx.dialog.content(
+    return rx.fragment(
+        rx.dialog.content(
         rx.dialog.title(f"Add new organization"),
         rx.dialog.description(
                 f"Add new organization details, required fields marked with *",
@@ -67,7 +66,14 @@ def form_org() -> rx.Component:
                         width="100%",
                     ),
                     rx.hstack(
-                            upload_logo_org(title="Logo",my_image=rx.get_upload_url(OrgState.logo)),
+                        rx.vstack(rx.heading("Organization Logo",size="3"),
+                            upload_logo_org,
+                            rx.input(
+                                name="logo",
+                                value=upload_logo_org.State.image_name,
+                                type="hidden",
+                            ),),
+#                            upload_logo_org(title="Logo",my_image=rx.get_upload_url(OrgState.logo)),
                             rx.vstack(
                                 rx.hstack(rx.heading("Locate in the map",color="grey",size="3")),
                                 interactive_map(),
@@ -95,7 +101,7 @@ def form_org() -> rx.Component:
                                 "Cancel",
                                 color_scheme="gray",
                                 variant="soft",
-                                justify="start",),
+                                justify="start"),
                         ),
                         rx.dialog.close(
                             rx.button("Save",
@@ -115,8 +121,8 @@ def form_org() -> rx.Component:
                 on_submit=OrgState.create_new_org,
                 reset_on_submit=True,
             )
-        )
-
+        ),
+    )
 
 
 def search_org() -> rx.Component:
@@ -162,6 +168,7 @@ def search_org() -> rx.Component:
         on_submit=OrgState.join_org,
         reset_on_submit=True,
     )
+        
 )
 
 def discover_org():
@@ -238,8 +245,11 @@ def update_image_form():
         rx.dialog.trigger(rx.button("Update image"), on_click=OrgState.remove_uploaded_files),
         rx.dialog.content(
             rx.form(
-                rx.dialog.title("Update location"),
-                upload_logo_org(title="Logo",my_image=rx.get_upload_url(OrgState.logo)),
+                rx.dialog.title("Update image"),
+                rx.box(
+                    upload_logo_org,
+                ),
+                #upload_logo_org(title="Logo",my_image=OrgState.logo),
                 rx.spacer(size="5"),
                 rx.flex(
                     rx.dialog.close(
@@ -265,10 +275,11 @@ def update_image_form():
                 ),
                 spacing="5",
                 align="center",
-                on_submit=OrgState.supabase_upload(OrgState.org_id),
+                on_submit=OrgState.supabase_upload(OrgState.org_id,upload_logo_org.State.image_name),
                 reset_on_submit=True,
             ),
-        )
+        ),
+        on_open_change=[upload_logo_org.State.clear_image],
     ),
 
 # class OrganizationForm(rx.ComponentState):

webapp/frontend/components/project_forms.py

@@ -1,15 +1,12 @@
 import reflex as rx
-import uuid
-from typing import List,Dict
-from .user_input_text import SimpleTextInput
-from .project_upload import upload_logo_project,upload_image_project
+from .upload import ImageUpload
 from ..states.project_state import ProjectState
 from ..states.org_state import OrgState
-from .upload import upload_logo_org
-from .map import interactive_map
 from ..components.project_card import project_grid_vertical
 from ..constants import urls
 
+upload_logo = ImageUpload.create()
+upload_image = ImageUpload.create()
 
 def form_project() -> rx.Component:
         status: list[str] = ["Prototype","Technically tested","Clinically tested",
@@ -86,9 +83,22 @@ def form_project() -> rx.Component:
                         width="100%",
                     ),
                     rx.hstack(
-                        upload_logo_project(title="Logo",my_image=rx.get_upload_url(ProjectState.logo)),
-                        upload_image_project(title="Representative image",my_image=rx.get_upload_url(ProjectState.image)),
+                        rx.vstack(rx.heading("Project Logo",size="3"),
+                            upload_logo,
+                            rx.input(
+                                name="logo",
+                                value=upload_logo.State.image_name,
+                                type="hidden",
+                            ),),
+                        rx.vstack(rx.heading("Project Image",size="3"),
+                            upload_image,
+                            rx.input(
+                                name="image",
+                                value=upload_image.State.image_name,
+                                type="hidden",
+                            ),),
                         width="100vw",
+                        spacing="2",
                     ),
                     rx.hstack(
                         rx.vstack(
@@ -130,7 +140,7 @@ def form_project() -> rx.Component:
                     direction = "column",
                     width="100%",
                 ),
-                on_submit=ProjectState.create_new_project,
+                on_submit=[ProjectState.create_new_project,ProjectState.remove_uploaded_files],
                 reset_on_submit=True,
                 )
             )
@@ -198,11 +208,11 @@ def discover_project():
 
 def update_logo_form() -> rx.Component:
     return rx.dialog.root(
-        rx.dialog.trigger(rx.button("Update project logo")),
+        rx.dialog.trigger(rx.button("Update project logo"), on_click=ProjectState.remove_uploaded_files),
         rx.dialog.content(
             rx.form(
-                rx.dialog.title("Update location"),
-                upload_logo_project(title="Logo",my_image=rx.get_upload_url(ProjectState.logo)),
+                rx.dialog.title("Update project logo"),
+                upload_logo,
                 rx.spacer(size="5"),
                 rx.flex(
                     rx.dialog.close(
@@ -228,20 +238,21 @@ def update_logo_form() -> rx.Component:
                 ),
                 spacing="5",
                 align="center",
-                on_submit=ProjectState.supabase_upload_logo(ProjectState.project_id),
+                on_submit=ProjectState.supabase_upload_logo(ProjectState.project_id, upload_logo.State.image_name),
                 reset_on_submit=True,
             ),
-        )
+        ),
+        on_open_change=[upload_logo.State.clear_image],
     ),
 
 
 def update_image_form() -> rx.Component:
     return rx.dialog.root(
-        rx.dialog.trigger(rx.button("Update image")),
+        rx.dialog.trigger(rx.button("Update image"), on_click=ProjectState.remove_uploaded_files),
         rx.dialog.content(
             rx.form(
-                rx.dialog.title("Update location"),
-                upload_image_project(title="Logo",my_image=rx.get_upload_url(ProjectState.image)),
+                rx.dialog.title("Update image"),
+                upload_image,
                 rx.spacer(size="5"),
                 rx.flex(
                     rx.dialog.close(
@@ -267,10 +278,11 @@ def update_image_form() -> rx.Component:
                 ),
                 spacing="5",
                 align="center",
-                on_submit=ProjectState.supabase_upload_image(ProjectState.project_id),
+                on_submit=ProjectState.supabase_upload_image(ProjectState.project_id,upload_image.State.image_name),
                 reset_on_submit=True,
             ),
-        )
-    ),
+        ),
+        on_open_change=[upload_image.State.clear_image],
+    )