Javascript R拖放时输入反应性错误_Javascript_R_Drag And Drop_Shiny_Reactive Programming

Javascript R拖放时输入反应性错误

javascript r shiny

Javascript R拖放时输入反应性错误,javascript,r,drag-and-drop,shiny,reactive-programming,Javascript,R,Drag And Drop,Shiny,Reactive Programming,我目前正在创建一个带有一些自定义js的R闪亮应用程序，以提供拖放功能。虽然拖放对单个文件非常有效，但当我使用shinyJS重置它时，再次上载同一个文件无法正常工作。我理解这是因为在重新输入同名文件时未触发onchange函数（无论文件内容是否已修改） JS: 我不知道如何使我的闪亮值反应，以触发与输入$datafile关联的事件。非常感谢您的帮助我看了一下这个，玩了一会儿，首先把它变成了一个工作示例。我认为这里的拖放功能是一个有用的例子。它也能正确地处理多点。其中也有一些有趣的javascri

我目前正在创建一个带有一些自定义js的R闪亮应用程序，以提供拖放功能。虽然拖放对单个文件非常有效，但当我使用shinyJS重置它时，再次上载同一个文件无法正常工作。我理解这是因为在重新输入同名文件时未触发onchange函数（无论文件内容是否已修改）

JS:

我不知道如何使我的闪亮值反应，以触发与输入$datafile关联的事件。非常感谢您的帮助

我看了一下这个，玩了一会儿，首先把它变成了一个工作示例。我认为这里的拖放功能是一个有用的例子。它也能正确地处理多点。其中也有一些有趣的javascript结构——至少对我来说是这样

为了解决这个问题，我没有像BigDataScientist建议的那样使用一个随机数，而是使用了一个对其他事情也有用的计数

总共进行了以下更改：

将片段完成为一个完整的工作示例，并将其保存到自己的目录中
将javascript代码放入名为
```
www
```
的子目录中，该子目录位于保存代码的目录下
在UI代码中添加了一个
```
tag$head（tag$script（…
```
语句）来加载该javascript
将一些innerhtml文本添加到
```
拖放区域
```
```
div
```
，因此可以将其放入一些内容中
在javascript中添加了一个
```
dropcount
```
更改html，以便
```
dropcount
```
将回显到
```
drop区域
```
div
将输出更改为
```
verbatumPrintOutput
```
，这样您可以在较小的区域中看到更多的数据帧
在输出中添加了更多字段，以便更好地查看
```
input$datafile
```
中的内容
将JS
```
for
```
循环更改为不会生成警告的内容
在顶部添加了一个
```
jslint
```
注释，以消除另一个警告
添加了一些输出字段（
```
inputdatafile
```
和
```
rowsdatafile
```
），以便您可以跟踪
```
input$datafile
```
中的内容-直到我这样做之前，我不清楚真正的错误是什么，但那只是我
稍微更改了输出中的逻辑，以使重置功能按预期方式工作（示例代码似乎仍然不完整）
可能还有一些我忘了的小事情

代码如下：

JS:

/*jshint loopfunc:true*///git摆脱警告
var数据集={}；
var dragOver=函数（e）{e.preventDefault（）；}；
var dropData=函数（e）{
e、 预防默认值（）；
handleDrop（例如dataTransfer.files）；
};
var-dropcount=0；
var removeFiles=函数（e）{
txt=“下降区域”+下降计数；
jQuery（'#drop area'）.html（txt）；
数据集={}；
onInputChange（“数据文件”，数据集）；
};
var handleDrop=函数（文件）{
对于（var i=0；iI）使用解决方法。除了input$datafile
，引入shinn.onInputChange（“trigger”，Math.random（））；
并使用observeEvent（输入$trigger，
，而不是依赖于输入$datafile，，…虽然你的答案对我不起作用，但它让我思考。检查我的答案，了解原因。谢谢！嗯，这与我做的有何不同？我还将总丢弃计数附加到名称上。我的错，你是对的。你的代码只是在“drpel”上抛出了一个错误我只是将“datasets={}；”添加到removeFiles（）中函数，您的答案是正确的！我在那里复制它时一定是输入错误。在我的测试中效果很好。我回来后会修复它。好的，做了更多的更改，使它更完整，更有用，作为一个示例，我想没有更多的输入错误。请注意，您现在也可以向上投票：）
var datasets = {};
var dragOver = function(e) { e.preventDefault(); };

var dropData = function(e) {
    e.preventDefault();
    handleDrop(e.dataTransfer.files);
};

var removeFiles = function(e){
    jQuery('#datafile').empty();
}

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;
        Shiny.onInputChange("datafile", datasets);
        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);
    }
};

observeEvent(input$datafile, {
    infile <- input$datafile
    if (is.null(infile)) {
      # User has not uploaded a file yet
      return(NULL)
    }

    # CLEAN FILE
    name <- names(input$datafile)[1]
    csvFile <- read.csv(text=input$datafile[[name]])

  output$dataTable <- renderDataTable(csvFile , options = list(scrollX = '1100px') )

   # DRAG AND DROP FILE INPUT
   h3(id="data-title", "Drop Datasets"),

   div(class="col-xs-12", id="drop-area", ondragover="dragOver(event)", 
       ondrop="dropData(event)" , onClick="fallback(event)"),

   div(onClick="removeFiles(event)", actionButton(inputId="resetAutomaticInput", label="Reset Input")

/*jshint loopfunc:true */ // git rid of warning
var datasets = {};
var dragOver = function(e) { e.preventDefault(); };

var dropData = function(e) {
  e.preventDefault();
  handleDrop(e.dataTransfer.files);
};
var dropcount=0;

var removeFiles = function(e){
    txt = "Drop Area "+dropcount;
    jQuery('#drop-area').html(txt);
    datasets = {};
    Shiny.onInputChange("datafile", datasets);
};
var handleDrop = function(files) {
  for (var i = 0; i<files.length; i++) {
    f = files[i];
    var reader = new FileReader();

    reader.onload = (function(file) {
      return function(e) {
        datasets[file.name.toLowerCase()+'|'+dropcount] = e.target.result;
        Shiny.onInputChange("datafile", datasets);
        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('');
        drpel = document.getElementById("drop-area");
        drpel.appendChild(div);
        drpel.childNodes[0] = "Drop Area "+dropcount;
      };
    })(f);
    reader.readAsText(f);
    dropcount++;
  }
};

library(plotly)
library(htmlwidgets)
library(shiny)
library(ggplot2)

ui <- shinyUI(fluidPage(

  tags$head(tags$script(type="text/javascript", src = "fileUp.js")),

  # DRAG AND DROP FILE INPUT
  h3(id="data-title", "Drop Datasets"),

  div(class="col-xs-12",id="drop-area",ondragover="dragOver(event)", 
      ondrop="dropData(event)",onClick="fallback(event)","Drop Area"),

  div(onClick="removeFiles(event)",
      actionButton(inputId="resetAutomaticInput",label="Reset Input"),
      verbatimTextOutput("inputdatafile"),
      verbatimTextOutput("rowsdatafile"),
      verbatimTextOutput("dataTable"))
))    
server <- shinyServer(function(input, output) {

  observeEvent(input$datafile, {
    infile <- input$datafile
    if (length(infile)==0) {
      # User has not uploaded a file yet
        return(NULL)
    }    
    # CLEAN FILE
    name <- names(input$datafile)[length(infile)]
    csvFile <- reactive(
      if (length(input$datafile)>0){
        read.csv(text=input$datafile[[name]])
      }
    )

    output$dataTable <- renderPrint(csvFile())
    output$inputdatafile <- renderPrint(names(input$datafile))
    output$rowsdatafile <- renderPrint(sapply(input$datafile,nchar))
  })
})
shinyApp(ui, server)