Shiny fileInput reset using JavaScript

Shiny fileInput reset using JavaScript

Shiny fileInput reset using JavaScript

active.js

$(document).ready(function() {

    /* clear file button control */
    var fileControl = $("#file1");

    $("#clearFile1").on("click", function () {
        fileControl.replaceWith( fileControl = fileControl.clone( true ) );
        $("#file1_progress").hide();
    });
    
    $("#uploadFormat").on("change", function () {
        fileControl.replaceWith( fileControl = fileControl.clone( true ) );
        $("#file1_progress").hide();
    });
    
    /* file input progress bar control */
    $( "#file1" ).change(function() {
      document.getElementById("file1_progress").setAttribute('style', "height:20px; margin-top:5px;");
    });

});

server.R

shinyServer(function(input, output, session) {

	values <- reactiveValues(
		file1 = NULL
	)
	
	observe({
		input$clearFile1
		input$uploadFormat
		values$file1 <- NULL
	})
	
	observe({
		values$file1 <- input$file1
	})
	
	output$summary <- renderText({
		return(paste("Uploaded file: ", values$file1$name))
	})

})

ui.R

shinyUI(bootstrapPage(

	tags$head(
		tags$style(".clearButton {float:right; font-size:12px;}")
	),
	
	headerPanel("Reset file input example"),

	sidebarPanel(
		HTML("<button id='clearFile1' class='action-button clearButton'>Clear</button>"),
		fileInput('file1', NULL, width="80%"),
		
		selectInput('uploadFormat', label = "Select upload format", 
			choices = c(
				"Option 1" = 'f1',
				"Option 2" = 'f2',
				"Option 3" = 'f3'),
			selected = 'f1')
	),

	mainPanel(
		h4("Summary"),
		verbatimTextOutput("summary")
	),
	singleton(includeScript("active.js"))
))

On Stack Overflow: http://stackoverflow.com/questions/17352086/how-can-i-update-a-shiny-fileinput-object/33271056#33271056