tablas - Cómo agregar un archivo en un objeto dataTransfer ya existente usando Javascript

obtener datos de una tabla html javascript

Question

Suposición: una página web local de HTML / Javascript que tiene acceso al archivo: //

Al comienzo de un arrastre sobre un elemento HTML arrastrable, en la función del controlador de eventos dragStart(e) , ¿cómo agrego un objeto File para que se reconozca como un archivo y termine en la lista dataTransfer.files ?

Ex:

function dragStart(e){
    var file = getSomeFileObjFromSomewhere();
    e.originalEvent.dataTransfer.effectAllowed = "all";
    e.originalEvent.dataTransfer.setData("file", file);

    console.log("/nFiles:");
    i = 0;
    var files = e.originalEvent.dataTransfer.files,
    len = files.length;
    for (; i < len; i++) {
        console.log("/nIndex: " + i + "/nFilename: " + files[i].name);
        console.log("Type: " + files[i].type);
        console.log("Size: " + files[i].size + " bytes");
        console.dir(files[i]);
    }
}

Específicamente, debe funcionar en Chrome / Chromium. Y, podemos suponer que el archivo existe en la unidad local. Básicamente, quiero que estén disponibles los mismos datos que cuando se arrastra un archivo desde el Explorador de Windows a una página HTML en un elemento que se puede eliminar.

Sé que esto existe en Chrome:

e.originalEvent.dataTransfer.setData("DownloadURL", fileType + ":" + name + ":" + filePath);

que descarga el archivo. Pero esto no es lo que quiero, porque quiero suponer que este es un archivo existente y que se debe acceder al archivo original.

Answer 1

Puede usar el enfoque publicado por @kol en el evento Simulate drop file

Es decir, tenemos que pasar un argumento a ondrop, que

• tiene un campo de dataTransfer con un subcampo de matriz de files , que contiene el File seleccionado, y
• un método preventDefault (una función sin cuerpo lo hará).

ajustado a continuación para adjuntar .addEventListener("drop") al elemento drop en el evento dragstart , con los objetos File pasados ​​a una función vinculada con Function.prototype.bind() que devuelve el objeto apropiado descrito anteriormente, con once:true pasado en el tercer parámetro a .addEventListener() , para llamar al evento drop como máximo una vez por cada evento dragstart donde se acceda o cree File .

FileList objeto FileList es de solo lectura, una Array se utiliza para almacenar el objeto File en la propiedad dataTransfer.files dentro de un objeto javascript simple en los controladores de eventos.

Nota: La interfaz FileList debe considerarse "en riesgo" ya que la tendencia general en la Plataforma Web es reemplazar tales interfaces con el objeto de la plataforma Array en ECMAScript [ECMA-262] . En particular, esto significa que la sintaxis del tipo filelist.item(0) está en riesgo; la mayoría del otro uso programático de FileList es poco probable que se vea afectado por la migración eventual a un tipo de Array .

Si event.dataTransfer.files en el evento dragstart contiene objetos File , itere FileList e FileList cada objeto File a la matriz de files .

var drag = document.getElementById("drag")
var drop = document.getElementById("drop")

function handleDrop(evt) {
  evt.preventDefault();
  console.log(evt.dataTransfer.files);
}

function getSomeFileObjFromSomewhere() {
  var data = ["abc", "def"];
  var files = [];
  for (var i = 0; i < data.length; i++) {
    files.push(new File([data[i]], data[i] + ".text", {
      type: "text/plain",
      lastModified: new Date().getTime()
    }));
  }
  return files
}

function dataTransferFileObject(files) {
  return {
    preventDefault: function() {},
    dataTransfer: {
      files: Array.isArray(files) ? files : [files]
    }
  }
}

drag.addEventListener("dragstart", function dragStart(e) {

  var files = getSomeFileObjFromSomewhere();
  e.dataTransfer.effectAllowed = "all";

  console.log("/nFiles:");
  
  for (let i = 0; i < files.length; i++) {
    var {name, size, type} = files[i];
    console.log("/nFilename: " + name);
    console.log("Type: " + type);
    console.log("Size: " + size + " bytes");
  }
  // if `e.dataTransfer.files`, push `File` objects dragged
  // to `files` array
  if (e.dataTransfer.files) {
    for (let file of e.dataTransfer.files) {
      files.push(file);
    }
  }
  
  drop.addEventListener("drop"
  , handleDrop.bind(drop, dataTransferFileObject(files))
  , {once: true});

});

drop.addEventListener("dragover", function(evt) {
  evt.preventDefault()
});

div {
  width: 50px;
  height: 50px;
  padding: 10px;
  margin: 10px;
}

div:nth-child(1) {
  border: 2px dotted blue;
}

div:nth-child(2) {
  border: 2px dotted green;
}

<div draggable="true" id="drag">drag</div>
<div droppable="true" id="drop" webkitdropzone="webkitdropzone">drop</div>

plnkr http://plnkr.co/edit/ihQqs4t2zOg2XhIuNwal?p=preview