Detectar si el usuario suelta el mismo archivo dos veces en una ventana del navegador

Question

May 02, 2015, 08:56 PM

Detectar si el usuario suelta el mismo archivo dos veces en una ventana del navegador

Quiero permitir a los usuarios arrastrar imágenes desde su escritorio a una ventana del navegador y luego subir esas imágenes a un servidor. Quiero cargar cada archivo solo una vez, incluso si se deja caer en la ventana varias veces. Por razones de seguridad, la información del objeto Archivo accesible para JavaScript es limitada. De acuerdo amsdn.microsoft.com, solo se pueden leer las siguientes propiedades:

namelastModifiedDate

(Safari también exponesize ytype)

El usuario puede colocar dos imágenes con el mismo nombre y la última fecha de modificación desde diferentes carpetas en la ventana del navegador. Existe una posibilidad muy pequeña pero finita de que estas dos imágenes sean de hecho diferentes.

He creado una secuencia de comandos que lee en la URL de datos sin procesar de cada archivo de imagen y la compara con los archivos que se colocaron previamente en la ventana. Una ventaja de esto es que puede detectar archivos idénticos con nombres diferentes.

Esto funciona, pero parece excesivo. También requiere una gran cantidad de datos para ser almacenados. Podría mejorar esto (y aumentar la exageración) haciendo un hash de dataURL y almacenando eso en su lugar.

Espero que haya una forma más elegante de lograr mi objetivo. ¿Qué me puedes sugerir?

<!DOCTYPE html>
<html>
<head>
  <title>Detect duplicate drops</title>
  <style>
html, body {
width: 100%;
height: 100%;
margin: 0;
background: #000;
}
  </style>
  <script>
var body
var imageData = []


document.addEventListener('DOMContentLoaded', function ready() {
  body = document.getElementsByTagName("body")[0]
  body.addEventListener("dragover", swallowEvent, false)
  body.addEventListener("drop", treatDrop, false)
}, false)


function swallowEvent(event) {
  // Prevent browser from loading the dropped image in an empty page
  event.preventDefault()
  event.stopPropagation()
}


function treatDrop(event) {
  swallowEvent(event)

  for (var ii=0, file; file = event.dataTransfer.files[ii]; ii++) {
    importImage(file)
  }
}


function importImage(file) {
    var reader = new FileReader()

    reader.onload = function fileImported(event) {
        var dataURL = event.target.result
        var index = imageData.indexOf(dataURL)
        var img, message

        if (index < 0) {
            index = imageData.length
            console.log(dataURL)
            imageData.push(dataURL, file.name)  
          message = "Image "+file.name+" imported"
        } else {
          message = "Image "+file.name+" imported as "+imageData[index+1]
        }

        img = document.createElement("img")
        img.src = imageData[index] // copy or reference?
        body.appendChild(img)

        console.log(message)
    }

  reader.readAsDataURL(file)
}
  </script>
</head>
<body>
</body>
</html>