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 #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

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.