BLUR-6

blurme/pages/settings.py

@@ -16,17 +16,27 @@ def settings() -> rx.Component:
         rx.upload(
             rx.vstack(rx.text("Przeciągnij albo kliknij, aby wybrać pliki"),),
             border=f"1px dotted {color}",
-            padding="5em",),
+            padding="5em",
+            multiple=True,
+            accept={
+                "image/png": [".png"],
+                "image/jpeg": [".jpg", ".jpeg"],
+                "image/webp": [".webp"],
+                "image/tiff": [".tif", ".tiff"], }, 
+            max_files=5,
+            ),
         rx.hstack(rx.foreach(rx.selected_files, rx.text)),
         rx.button( "Załaduj zdjęcie",
             on_click=lambda: State.handle_upload(
             rx.upload_files()),),
-        #rx.button("Clear",
-        #    on_click=rx.clear_selected_files),),
-        rx.foreach(
-            State.img,
-            lambda img: rx.vstack(
-                rx.image(src=f'/{img}', max_width = "800px"),
+
+        rx.responsive_grid(
+            rx.foreach(
+                State.img,
+                lambda img: rx.vstack(
+                    rx.image(src=f'/{img}'),
+                    rx.text(img),
+            
                 rx.hstack(rx.button("Usuń",
                           on_click=lambda img_name=img: State.delete_image(img_name),
                           width = "125px"),
@@ -37,6 +47,27 @@ def settings() -> rx.Component:
                           width = "125px"),
                           padding="1em"
             ),
-        padding="3em",
-    )
-    ))
+            ),
+            
+        ),columns=[2],
+            spacing="5px",
+
+
+        #rx.foreach(
+        #    State.img,
+        #    lambda img: rx.vstack(
+        #        rx.image(src=f'/{img}', max_width = "800px"),
+        #        rx.hstack(rx.button("Usuń",
+        #                  on_click=lambda img_name=img: State.delete_image(img_name),
+        #                  width = "125px"),
+        #                  rx.button("Anonimizuj",
+        #                  width = "125px"),
+        #                  rx.button("Pobierz",
+        #                  on_click=lambda img_name=img: State.download_image(img_name),
+        #                  width = "125px"),
+        #                  padding="1em"
+        #    ),  
+        #    padding="3em",
+
+    ),)
+ 

blurme/state.py

@@ -11,6 +11,11 @@ class State(rx.State):
    img: list[str]  = []
    # Dark mode status
    #dark_mode: bool = False
+   show: bool = False
+
+   def change(self):
+        self.show = not (self.show)
+
 
    async def handle_upload(self, files: list[rx.UploadFile]):
        """Handle the upload of file(s).