diff --git a/assets/upload_single_video.webm b/assets/upload_single_video.webm new file mode 100644 index 0000000000..563f4849f3 Binary files /dev/null and b/assets/upload_single_video.webm differ diff --git a/docs/library/forms/upload.md b/docs/library/forms/upload.md index c3f31e1e35..0b33a6a71b 100644 --- a/docs/library/forms/upload.md +++ b/docs/library/forms/upload.md @@ -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, diff --git a/docs/library/media/audio.md b/docs/library/media/audio.md index 88b5d2ed7f..57c3429ac4 100644 --- a/docs/library/media/audio.md +++ b/docs/library/media/audio.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}). +``` \ No newline at end of file diff --git a/docs/library/media/image.md b/docs/library/media/image.md index 7ecdbfd98e..611c4534c7 100644 --- a/docs/library/media/image.md +++ b/docs/library/media/image.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}). +``` \ No newline at end of file diff --git a/docs/library/media/video.md b/docs/library/media/video.md index 4783fc2a6c..472ae0f814 100644 --- a/docs/library/media/video.md +++ b/docs/library/media/video.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}). +``` \ No newline at end of file