Objective:
Within my application, users are required to upload a file in .csv format. If they attempt to upload a file that is not in the correct format, an alert message (showFeedbackWarning()) should be displayed near the fileInput() element. Once the user corrects their input by uploading a valid .csv file, the alert message should disappear (hideFeedback()). This functionality is currently functioning as intended in the app. Now, I aim to alter the color of the progress bar within the fileInput() section to red, similar to the example shown in this reference. However, I want to maintain the default orange color for the warning message.
Issue:
The custom CSS introduced by shinyFeedback seems to override my style changes, preventing the progress bar color from updating. While using !important may temporarily resolve the issue, it also affects the color of the bar in the warning message, which is undesirable.
If you have any insights or solutions to address this challenge, please share them.
Example:
library(shiny)
library(shinyFeedback)
ui <- fluidPage(
useShinyFeedback(),
fileInput(
inputId = "upload",
label = "Choose File:",
accept = ".csv"
),
tags$style(".progress-bar {
background-color: red;
}"),
verbatimTextOutput("text")
)
server <- function(input, output, session) {
data_in <- reactive({
req(input$upload)
ext <- tools::file_ext(input$upload$name)
if (ext == "csv") {
hideFeedback("upload")
read.delim(
input$upload$datapath,
sep = ";"
)
} else {
showFeedbackWarning(
inputId = "upload"
)
}
})
output$text <- renderPrint({
class(data_in())
})
}
shinyApp(ui, server)