HTML5 - drag and drop (arrastar e soltar) do desktop

Vo compartilhar com vocês o script que permite com que o usuário araste um arquivo diretamente para página para fazer o upload sem precisar de selecionar peguei esse script na área de playground do HTML5 vou postar logo depois desse post um outro disponibilizando o link onde peguei esse que serve para estudos e tem outros scripts interessantes para serem estudados e mais 2 links que também serve para estudos.

veja o exemplo

<div id="content"></div> 
    <p id="log" style="color: gray"></p> 
    <script> 
      // Content section used alot
      var content = document.getElementById('content');
      
      if (!window.FileReader) {
        content.innerHTML = "<p>Seu navegador não da suporte ao arrastar e soltar do HTML5</p>";
      } else {
        // Layout da Página
        content.innerHTML =
          '<p>Escolha um arquivo clicando abaixo ou araste do seu desktop para ca<br> <input type="file" id="file" /></p>' +
          '<p><b>Nome:</b> <span id="name"></span><br>' +
          '<b>Tamanho do arquivo:</b> <span id="size"></span><br>' +
          '<b>Conteudo:</b> <br><br> <span id="file-content"></span>' +
          '</p>';
      
        // Imprime as propiedades do arquivo
        function displayFile(file) {
          document.getElementById('name').textContent = file.fileName;
          document.getElementById('size').textContent = file.fileSize;
      
          var reader = new FileReader();
      
          reader.onload = function(event) {
            document.getElementById('file-content').innerHTML = 
              event.target.result.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n|\r/g, '<br>');
          };
      
          reader.onerror = function() {
            document.getElementById('file-content').innerHTML = 'Não é possivel ler arquivo ' + file.fileName;
          };
      
          reader.readAsBinaryString(file);
        }
      
        // Inserir arquivos
        document.getElementById('file').onchange = function() {
          displayFile(this.files[0]);
        };
      
        // esconde a borda de destaque ao soltar o arquivo
        content.style.border = '10px solid transparent';
      
        // Adiciona borda se existir evento arrastar
        content.ondragenter = function() {
          content.style.border = '10px solid #b1ecb3';
          return false;
        };
      
        content.ondragover = function() {
          return false;
        };
      
        content.ondragleave = function() {
          return false;
        };
        // esconde a borda de destaque ao soltar o arquivo
        content.ondrop = function(event) {
          content.style.border = '10px solid transparent';
          displayFile(event.dataTransfer.files[0]);
          return false;
        };
      }
    </script>