new component for native `fileInput()`

[kyle-power]

Add support for a shiny.fluent component that allows users to upload a file; similar to shiny::fileInput().

[kyle-power]

Similar to the downloadButton issue https://github.com/Appsilon/shiny.fluent/issues/39

I have implemented a work-around using the following...

## UI Stack Component
Stack(
  grow = TRUE,
  DefaultButton.shinyInput(
    inputId = ns("uploadButton"), text = "Upload File", styles = list(root = list(width = "100%"))
  ),
  tags$input(id = ns("upload"), type = "file", style = "visibility: hidden; height: 0; width: 0; margin: 0;")
)

## Server Event
observeEvent(input$uploadSSIM, {
  shinyjs::click("upload")
})

Again, it would be helpful to have a uploadHelper() function as part of shiny.fluent. Thanks!

[kamilzyla]

Related issue: Appsilon/shiny.react#11.

[willgryan]

Are there any plans to add this? The workaround above does not work for me.

[Patrikios]

Any progress on file upload?

[jhk0530]

Hi,

I made custom fileinput UI looks simillar with fluentUI which modified basic shiny's fileInput

below is minimal reproducible example

library(shiny)
library(shiny.fluent)
#> 
#> Attaching package: 'shiny.fluent'
#> The following object is masked from 'package:shiny':
#> 
#>     runExample
fileInput.fluent <- function(inputId, label = 'file', multiple = FALSE, accept = NULL, capture = NULL) {
  restoredValue <- restoreInput(id = inputId, default = NULL)
  if (!is.null(restoredValue) && !is.data.frame(restoredValue)) {
    warning("Restored value for ", inputId, " has incorrect format.")
    restoredValue <- NULL
  }
  if (!is.null(restoredValue)) {
    restoredValue <- toJSON(restoredValue, strict_atomic = FALSE)
  }
  inputTag <- tags$input(
    type = "file", 
    id = inputId, 
    name = inputId, 
    style = "position: absolute !important; top: -99999px !important; left: -99999px !important;",
    `data-restore` = restoredValue
  )
  if (multiple) {
    inputTag$attribs$multiple <- "multiple"
  }
  if (length(accept) > 0) {
    inputTag$attribs$accept <- paste(accept, collapse = ",")
  }
  if (!is.null(capture)) {
    inputTag$attribs$capture <- capture
  }
  tags$label(
    icon('upload', style = 'padding-top:7px'),
    label,
    class = 'fileupload',
    inputTag
  )
}

ui <- fluentPage(
  tags$head( # you may change this in .css file
    tags$style(HTML('
      .fileupload{
          margin-top: auto;
          margin-bottom: auto;
          outline: transparent;
          position: relative;
          font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
          -webkit-font-smoothing: antialiased;
          font-size: 14px;
          font-weight: 400;
          box-sizing: border-box;
          border: 1px solid rgb(0, 120, 212);
          display: inline-block;
          text-decoration: none;
          text-align: center;
          cursor: pointer;
          padding: 0px 16px;
          border-radius: 2px;
          min-width: 80px;
          height: 32px;
          background-color: rgb(0, 120, 212);
          color: rgb(255, 255, 255);
          user-select: none;
      }

      .fileupload:hover{
        background-color: rgb(16, 110, 190);
        border: 1px solid rgb(16, 110, 190);
        color: rgb(255, 255, 255);
        cursor: pointer;
      }'
                    ))
  ),
  fileInput.fluent(inputId = 'file',label = 'file'),
)

server <- function(input, output, session){
  observeEvent(input$file,{
    print(input$file)
  })
}

shinyApp(ui, server)
#> 
#> Listening on http://127.0.0.1:6717

^{Created on 2023-09-13 with reprex v2.0.2}

Session info

``` r sessioninfo::session_info() #> ─ Session info ─────────────────────────────────────────────────────────────── #> setting value #> version R version 4.3.1 (2023-06-16) #> os macOS Ventura 13.5.2 #> system aarch64, darwin20 #> ui X11 #> language (EN) #> collate en_US.UTF-8 #> ctype en_US.UTF-8 #> tz Asia/Seoul #> date 2023-09-13 #> pandoc 3.1.6.1 @ /opt/homebrew/bin/ (via rmarkdown) #> #> ─ Packages ─────────────────────────────────────────────────────────────────── #> package * version date (UTC) lib source #> bslib 0.5.1 2023-08-11 [1] CRAN (R 4.3.0) #> cachem 1.0.8 2023-05-01 [1] CRAN (R 4.3.0) #> callr 3.7.3 2022-11-02 [1] CRAN (R 4.3.0) #> cli 3.6.1 2023-03-23 [1] CRAN (R 4.3.0) #> curl 5.0.2 2023-08-14 [1] CRAN (R 4.3.0) #> digest 0.6.33 2023-07-07 [1] CRAN (R 4.3.0) #> ellipsis 0.3.2 2021-04-29 [1] CRAN (R 4.3.0) #> evaluate 0.21 2023-05-05 [1] CRAN (R 4.3.0) #> fastmap 1.1.1 2023-02-24 [1] CRAN (R 4.3.0) #> fontawesome 0.5.2.9000 2023-08-20 [1] Github (rstudio/fontawesome@7d4bd14) #> fs 1.6.3 2023-07-20 [1] CRAN (R 4.3.0) #> glue 1.6.2 2022-02-24 [1] CRAN (R 4.3.0) #> highr 0.10 2022-12-22 [1] CRAN (R 4.3.0) #> htmltools 0.5.6 2023-08-10 [1] CRAN (R 4.3.0) #> httpuv 1.6.11 2023-05-11 [1] CRAN (R 4.3.0) #> jquerylib 0.1.4 2021-04-26 [1] CRAN (R 4.3.0) #> jsonlite 1.8.7 2023-06-29 [1] CRAN (R 4.3.0) #> knitr 1.43 2023-05-25 [1] CRAN (R 4.3.0) #> later 1.3.1 2023-05-02 [1] CRAN (R 4.3.0) #> lifecycle 1.0.3 2022-10-07 [1] CRAN (R 4.3.0) #> magrittr 2.0.3 2022-03-30 [1] CRAN (R 4.3.0) #> memoise 2.0.1 2021-11-26 [1] CRAN (R 4.3.0) #> mime 0.12 2021-09-28 [1] CRAN (R 4.3.0) #> processx 3.8.2 2023-06-30 [1] CRAN (R 4.3.0) #> promises 1.2.1 2023-08-10 [1] CRAN (R 4.3.0) #> ps 1.7.5 2023-04-18 [1] CRAN (R 4.3.0) #> purrr 1.0.2 2023-08-10 [1] CRAN (R 4.3.0) #> R.cache 0.16.0 2022-07-21 [1] CRAN (R 4.3.0) #> R.methodsS3 1.8.2 2022-06-13 [1] CRAN (R 4.3.0) #> R.oo 1.25.0 2022-06-12 [1] CRAN (R 4.3.0) #> R.utils 2.12.2 2022-11-11 [1] CRAN (R 4.3.0) #> R6 2.5.1 2021-08-19 [1] CRAN (R 4.3.0) #> Rcpp 1.0.11 2023-07-06 [1] CRAN (R 4.3.0) #> reprex 2.0.2 2022-08-17 [1] CRAN (R 4.3.0) #> rlang 1.1.1 2023-04-28 [1] CRAN (R 4.3.0) #> rmarkdown 2.24 2023-08-14 [1] CRAN (R 4.3.0) #> rstudioapi 0.15.0 2023-07-07 [1] CRAN (R 4.3.0) #> sass 0.4.7 2023-07-15 [1] CRAN (R 4.3.0) #> sessioninfo 1.2.2 2021-12-06 [1] CRAN (R 4.3.0) #> shiny * 1.7.5 2023-08-12 [1] CRAN (R 4.3.0) #> shiny.fluent * 0.3.0 2023-01-24 [1] CRAN (R 4.3.0) #> shiny.react 0.3.0 2022-12-25 [1] CRAN (R 4.3.0) #> styler 1.10.2 2023-08-29 [1] CRAN (R 4.3.0) #> vctrs 0.6.3 2023-06-14 [1] CRAN (R 4.3.0) #> webshot 0.5.5 2023-06-26 [1] CRAN (R 4.3.0) #> withr 2.5.0 2022-03-03 [1] CRAN (R 4.3.0) #> xfun 0.40 2023-08-09 [1] CRAN (R 4.3.0) #> xml2 1.3.5 2023-07-06 [1] CRAN (R 4.3.0) #> xtable 1.8-4 2019-04-21 [1] CRAN (R 4.3.0) #> yaml 2.3.7 2023-01-23 [1] CRAN (R 4.3.0) #> #> [1] /Library/Frameworks/R.framework/Versions/4.3-arm64/Resources/library #> #> ────────────────────────────────────────────────────────────────────────────── ```

You may change style and icon or label.

Thanks.