update upload docs and links to audio, video and image docs (#1159)

* update upload docs and links to audio, video and image docs

* change gif to webm

---------

Co-authored-by: Tom Gotsman <tomgotsman@Toms-MacBook-Pro.local>

Author: tgberkeley

assets/upload_single_video.webm

@@ -31,7 +31,10 @@ an event handler.
 To upload the file(s), you need to bind an event handler and pass the special
 `rx.upload_files(upload_id=id)` event arg to it.
 
-A full example is shown below.
+
+### Multiple File Upload
+
+Below is an example of how to allow multiple file uploads (in this case images).
 
 ```python demo box
 rx.image(src="/upload.gif")
@@ -92,6 +95,87 @@ def index():
     )
 ```
 
+### Uploading a Single File (Video)
+
+Below is an example of how to allow only a single file upload and render (in this case a video).
+
+```python demo box
+rx.el.video(src="/upload_single_video.webm", auto_play=True, controls=True, loop=True)
+```
+
+```python
+class State(rx.State):
+    """The app state."""
+
+    # The video to show.
+    video: str
+
+    @rx.event
+    async def handle_upload(
+        self, files: list[rx.UploadFile]
+    ):
+        """Handle the upload of file(s).
+
+        Args:
+            files: The uploaded files.
+        """
+        current_file = files[0]
+        upload_data = await current_file.read()
+        outfile = rx.get_upload_dir() / current_file.filename
+
+        # Save the file.
+        with outfile.open("wb") as file_object:
+            file_object.write(upload_data)
+
+        # Update the video var.
+        self.video = current_file.filename
+
+
+color = "rgb(107,99,246)"
+
+
+def index():
+    """The main view."""
+    return rx.vstack(
+        rx.upload(
+            rx.vstack(
+                rx.button(
+                    "Select File",
+                    color=color,
+                    bg="white",
+                    border=f"1px solid \{color}",
+                ),
+                rx.text(
+                    "Drag and drop files here or click to select files"
+                ),
+            ),
+            id="upload1",
+            max_files=1,
+            border=f"1px dotted \{color}",
+            padding="5em",
+        ),
+        rx.text(rx.selected_files("upload1")),
+        rx.button(
+            "Upload",
+            on_click=State.handle_upload(
+                rx.upload_files(upload_id="upload1")
+            ),
+        ),
+        rx.button(
+            "Clear",
+            on_click=rx.clear_selected_files("upload1"),
+        ),
+        rx.cond(
+            State.video,
+            rx.video(url=rx.get_upload_url(State.video)),
+        ),
+        padding="5em",
+    )
+```
+
+
+### Customizing the Upload
+
 In the example below, the upload component accepts a maximum number of 5 files of specific types.
 It also disables the use of the space or enter key in uploading files.
 
@@ -166,6 +250,7 @@ def index():
     )
 ```
 
+
 ## Handling the Upload
 
 Your event handler should be an async function that accepts a single argument,

docs/library/forms/upload.md

@@ -7,6 +7,7 @@ components:
 
 ```python exec
 import reflex as rx
+from pcweb.pages.docs import library
 ```
 
 The audio component can display an audio given an src path as an argument. This could either be a local path from the assets folder or an external link.
@@ -20,3 +21,8 @@ rx.audio(
 ```
 
 If we had a local file in the `assets` folder named `test.mp3` we could set `url="/test.mp3"` to view the audio file.
+
+```md alert info
+# How to let your user upload an audio file
+To let a user upload an audio file to your app check out the [upload docs]({library.forms.upload.path}).
+```

docs/library/media/audio.md

@@ -5,6 +5,7 @@ components:
 
 ```python exec
 import reflex as rx
+from pcweb.pages.docs import library
 ```
 
 # Image
@@ -54,3 +55,8 @@ def image_pil_example():
 # rx.image only accepts URLs and Pillow Images
 A cv2 image must be covnerted to a PIL image to be passed directly to `rx.image` as a State variable, or saved to the `assets` folder and then passed to the `rx.image` component.
 ```
+
+```md alert info
+# How to let your user upload an image
+To let a user upload an image to your app check out the [upload docs]({library.forms.upload.path}).
+```

docs/library/media/image.md

@@ -7,6 +7,7 @@ components:
 
 ```python exec
 import reflex as rx
+from pcweb.pages.docs import library
 ```
 
 The video component can display a video given an src path as an argument. This could either be a local path from the assets folder or an external link.
@@ -20,3 +21,9 @@ rx.video(
 ```
 
 If we had a local file in the `assets` folder named `test.mp4` we could set `url="/test.mp4"` to view the video.
+
+
+```md alert info
+# How to let your user upload a video
+To let a user upload a video to your app check out the [upload docs]({library.forms.upload.path}).
+```