Comments (5)
kyle-power
commented on May 27, 2024
2
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!
from shiny.fluent.
jhk0530
commented on May 27, 2024
1
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.
from shiny.fluent.
kamilzyla
commented on May 27, 2024
Related issue: Appsilon/shiny.react#11.
from shiny.fluent.
willgryan
commented on May 27, 2024
Are there any plans to add this? The workaround above does not work for me.
from shiny.fluent.
Patrikios
commented on May 27, 2024
Any progress on file upload?
from shiny.fluent.
Related Issues (20)
- downloadHandler doesn’t work with shiny.fluent in R v4.2.2 HOT 4
- Sidebar collapse to menu button which does not respond HOT 1
- Stack blocks off event bubbling up HOT 2
- Relative links in R documentation does not work in RStudio Help HOT 3
- Improve documentation for unsupported features with workarounds HOT 1
- Not rendering the content in the second PivotItem HOT 4
- shiny.fluent::runExample("demo") returns Error in $: $ operator is invalid for atomic vectors
- Download links and downloadHandlers do not work from inside a PivotItem HOT 3
- Temporary alert for application users HOT 1
- [docs] add shiny.router on DESCRIPTION HOT 1
- selected item in navigation bar after clicking route_link HOT 2
- Refactor E2E tests to make them more resilient and easy to maintain
- Move CommandBar binding to JavaScript
- 'TimePicker' is not an exported object from 'namespace:shiny.fluent'
- The PivotItem resets state whenever the tab is changed HOT 2
- Enable reactableOutput to be used in shiny.fluent HOT 2
- Errors do not propagate into R console
- Add few examples for R users how to work the DetailsList
- Bugs: cannot provide/override props of SpinButton.shinyInput HOT 1
- `SpinButton.shinyInput` uses `value` improperly
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from shiny.fluent.