patternfly_yew/components/
file_upload.rs

1use yew::prelude::*;
2
3#[derive(Clone, Debug, PartialEq, Properties)]
4pub struct FileUploadProperties {
5    #[prop_or_default]
6    pub children: Html,
7    #[prop_or_default]
8    pub drag_over: bool,
9    #[prop_or_default]
10    pub r#ref: NodeRef,
11}
12
13/// File upload component
14///
15/// > A **file upload** component allows the users to upload a single file into the browser.
16///
17/// See: <https://www.patternfly.org/components/file-upload>
18///
19/// # Properties
20///
21/// Defined in [`FileUploadProperties`].
22#[function_component(FileUpload)]
23pub fn file_upload(props: &FileUploadProperties) -> Html {
24    let mut class = classes!("pf-v5-c-file-upload");
25
26    if props.drag_over {
27        class.push(classes!("pf-m-drag-hover"));
28    }
29
30    html! (
31        <div {class} ref={props.r#ref.clone()}>
32            { props.children.clone() }
33        </div>
34    )
35}
36
37#[derive(Clone, Debug, PartialEq, Properties)]
38pub struct FileUploadSelectProperties {
39    #[prop_or_default]
40    pub children: Html,
41}
42
43#[function_component(FileUploadSelect)]
44pub fn file_upload_select(props: &FileUploadSelectProperties) -> Html {
45    html!(
46        <div class="pf-v5-c-file-upload__file-select">
47            { props.children.clone() }
48        </div>
49    )
50}
51
52#[derive(Clone, Debug, PartialEq, Properties)]
53pub struct FileUploadDetailsProperties {
54    /// The details section, supposed to be a single [`crate::components::TextArea`].
55    #[prop_or_default]
56    pub children: Html,
57
58    /// Set flag if upload is processing.
59    ///
60    /// This will render a spinner on the detail component section.
61    #[prop_or_default]
62    pub processing: bool,
63
64    /// If the validation state is invalid
65    #[prop_or_default]
66    pub invalid: bool,
67}
68
69#[function_component(FileUploadDetails)]
70pub fn file_upload_select(props: &FileUploadDetailsProperties) -> Html {
71    html!(
72        <div class="pf-v5-c-file-upload__file-details">
73            { props.children.clone() }
74            if props.processing {
75                <div class="pf-v5-c-file-upload__file-details-spinner">
76                    <span
77                        class="pf-v5-c-spinner pf-m-lg"
78                        role="progressbar"
79                        aria-label="Loading..."
80                    >
81                        <span class="pf-v5-c-spinner__clipper"></span>
82                        <span class="pf-v5-c-spinner__lead-ball"></span>
83                        <span class="pf-v5-c-spinner__tail-ball"></span>
84                    </span>
85                </div>
86            }
87        </div>
88    )
89}
patternfly_yew/components/file_upload.rs

patternfly_yew/components/
file_upload.rs
