如何将数据拖放到闪亮的应用程序中？我可以拖放到一个区域并用javascript读取它，但是我不知道如何让闪亮的注册它，这样我就可以在服务器上处理它。这是一个示例设置-它有点长b/c我不认为有一个javascript函数内置处理拖放。
library(shiny)
ui <- shinyUI(
fluidPage(
tags$head(tags$link(rel="stylesheet", href="css/styles.css", type="text/css"),
tags$script(src="getdata.js")),
h3(id="data-title", "Drop Datasets"),
div(class="col-xs-12", id="drop-area", ondragover="dragOver(event)",
ondrop="dropData(event)"),
tableOutput('table'), # doesn't do anything now
## debug
div(class="col-xs-12",
tags$hr(style="border:1px solid grey;width:150%"),
tags$button(id="showData", "Show", class="btn btn-info",
onclick="printData('dat.csv')")),
div(id="data-output") # print the data
)
)
## Make a sample dataset
# write.csv(data.frame(a=1:10, b=letters[1:10]), "dat.csv", row.names=FALSE)
server <- function(input, output, session) {
output$table <- renderTable(input$data) # this variable doesn't exist
}
var datasets = {};
var dragOver = function(e) { e.preventDefault(); };
var dropData = function(e) {
e.preventDefault();
handleDrop(e.dataTransfer.files);
};
var handleDrop = function(files) {
for (var i = 0, f; f = files[i]; i++) {
var reader = new FileReader();
reader.onload = (function(file) {
return function(e) {
datasets[file.name.toLowerCase()] = e.target.result;
var div = document.createElement("div");
var src = "https://cdn0.iconfinder.com/data/icons/office/512/e42-512.png";
div.id = "datasets";
div.innerHTML = [
"<img class='thumb' src='", src, "' title='", encodeURI(file.name),
"'/>", "<br>", file.name, "<br>"].join('');
document.getElementById("drop-area").appendChild(div);
};
})(f);
reader.readAsText(f);
}
};
// debug
var printData = function(data) {
var div = document.createElement("div");
div.innerHTML = datasets[data];
document.getElementById("data-output").appendChild(div);
};
#data-title {
text-align:center;
}
#drop-area {
background-color:#BCED91;
border:2px solid #46523C;
border-radius:25px;
height:90px;
overflow:auto;
padding:12px;
}
#drop-area #datasets {
display:inline-block;
font-size:small;
margin-right:8px;
text-align:center;
vertical-align:top;
}
.thumb {
height:45px;
}
您只需要将以下行添加到js文件中
datasets[file.name.toLowerCase()] = e.target.result;
# Add this line
Shiny.onInputChange("mydata", datasets);
然后可以在服务器代码中使用input$mydata。请注意，它是一个列表，因此您需要对其进行迭代（如果您计划删除多个文件，这也是必要的）。
完整代码（也显示多个csv文件，请注意，如果您删除多个同名文件，将只显示一个）：
getdata.js（如上加一行）
styles.css（无变化）
用户界面。R
library(shiny)
ui <- shinyUI(
fluidPage(
tags$head(tags$link(rel="stylesheet", href="css/styles.css", type="text/css"),
tags$script(src="getdata.js")),
sidebarLayout(
sidebarPanel(
h3(id="data-title", "Drop Datasets"),
div(class="col-xs-12", id="drop-area", ondragover="dragOver(event)",
ondrop="dropData(event)")
),
mainPanel(
uiOutput('tables')
)
)
)
)
服务器。R
server <- function(input, output, session) {
observeEvent(input$mydata, {
len = length(input$mydata)
output$tables <- renderUI({
table_list <- lapply(1:len, function(i) {
tableName <- names(input$mydata)[[i]]
tableOutput(tableName)
})
do.call(tagList, table_list)
})
for (name in names(input$mydata)) {
output[[name]] <- renderTable(read.csv(text=input$mydata[[name]]))
}
})
}
截至2017年8月，此功能现在由fileInput直接从shinny提供！太好了。
下面是一篇博客文章，宣布了这项功能https://blog.rstudio.com/2017/08/15/shiny-1-0-4/
