Detectando se o usuário solta o mesmo arquivo duas vezes em uma janela do navegador

Question

May 02, 2015, 08:56 PM

Detectando se o usuário solta o mesmo arquivo duas vezes em uma janela do navegador

Quero permitir que os usuários arrastem imagens da área de trabalho para uma janela do navegador e depois carreguem essas imagens em um servidor. Quero fazer upload de cada arquivo apenas uma vez, mesmo que ele caia na janela várias vezes. Por motivos de segurança, as informações do objeto File acessíveis ao JavaScript são limitadas. De acordo commsdn.microsoft.com, apenas as seguintes propriedades podem ser lidas:

namelastModifiedDate

(O Safari também expõesize etype)

O usuário pode soltar duas imagens com o mesmo nome e data da última modificação de pastas diferentes na janela do navegador. Há uma chance muito pequena, mas finita, de que essas duas imagens sejam de fato diferentes.

Criei um script que lê o dataURL bruto de cada arquivo de imagem e o compara aos arquivos que foram descartados anteriormente na janela. Uma vantagem disso é que ele pode detectar arquivos idênticos com nomes diferentes.

Isso funciona, mas parece um exagero. Também requer uma enorme quantidade de dados para serem armazenados. Eu poderia melhorar isso (e aumentar o exagero) criando um hash do dataURL e armazenando-o.

Espero que exista uma maneira mais elegante de alcançar meu objetivo. O que você pode 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>