Shiny - Change "Upload complete" and "... files" text in fileInput

Question

As soon as multiple files (say, 6) are uploaded via fileInput, I receive the text "6 files" next to the button, and "Upload complete" in the progress bar. Also, I suppose some text is provided in progress bar in case of emergency (faulty upload or smth.). UI of the app I am writing is in Russian, so all the labels are to be in Russian. According to documentation, I can set just buttonLabel and placeholder labels in fileInput, nothing about the text I mentioned above. Any ideas how can I change it?

Answer 1

It's not a complete solution, as it doesn't solve the problem you were having with multiple files, but it's possibly a start. This changes the text in the progress bar:

---

You can do this using a custom javascript function stored in a file which you include with tags$script(). The javascript file needs to sit in the www folder

app.r
www
|__ fileInput_text.js

app.r

ui <- fluidPage(
    tags$script(src="fileInput_text.js"),
    fileInput('uploaded', 'Data Upload')
)

shinyApp(ui = ui, server = function(input, output) {})

Custom javascript function: fileInput_text.js

$(document).ready(function(){
  $('#uploaded_progress').on("DOMSubtreeModified",function(){

    var target = $('#uploaded_progress').children()[0];
    if(target.innerHTML === "Upload complete"){
        console.log('Change')
        target.innerHTML = 'YOUR TEXT HERE';      
    }

  });
});

This function will look for you fileInput's ID (in this case uploaded) And will change it from "Upload complete" to what you set it to:

Answer 2

Since the answer from aeongrail did not work stable in my case, I used the shiny package functions addCustomMessageHandler and sendCustomMessage as mentioned here.This solution did not require any other package than shiny.

I did the following steps:

• Create a variable (character) called jscode_upload_msg which contains the js code as text. The code is similar to the answer from aeongrail.

jscode_upload_msg <- "
Shiny.addCustomMessageHandler('upload_msg', function(msg) {
  var target = $('#uploaded_progress').children()[0];
  target.innerHTML = msg;
});
"

• Added the code via the call: tags$script(jscode_upload_msg) in the UI function
• Added in the server part an update call:

observe({
  req(input$uploaded)
  session$sendCustomMessage("upload_msg", "YOUR TEXT")
})

The advantage from this solution is that you can set the text depending on any variable. In my case I implemented a function which checks the uploaded file. I set the text to Valid File or Invalid File depending on check success or not.