Crash in chrome with input [type = file] / Drag and drop javascript jquery
<p>After hours and hours of searching an answer to my issue I finally decided to come over you.</p>

<p><strong>Here is the problem :</strong></p>

<p>I have a really simple page with an input = file. And a zone for showing the image loaded.</p>

<p>On the other side I have a Jquery/javascript script which load the file and put it in the div with onChange method.</p>

<p><br />
<strong>Two possibilities :</strong> the user selects the image in file explorer and then click ok. Or he leaves the file window without loading any file by clicking cancel or close.</p>

<p>In this case everything is fine
<br /></p>

<p><strong>BUT</strong> the user also can try to drag the file from the file window to the div. But I don't want him to do that and I know how to prevent this. (Look at the code below)</p>

<p>And it works, nothing enter in the div and the browser doesn't redirect on a new page. </p>

<p>It's not necessary for Firefox and internet Explorer, only chrome gives the possibility to drag from intern file explorer of the browser.</p>

<p><strong>Until this point, it's alright.</strong> </p>

<p><strong>BUT</strong> after dragging if the user try to leave the files window (by clicking cancel / close or in loading a new file) then chrome completely crash. (It doesn't crash everytime, but 1 time for 3 tests) and to this point : <strong>the only possibility that remains is forcing the browser to close</strong></p>

<p><a href="http://www.hostingpics.net/viewer.php?id=897781crash.png" rel="nofollow"><strong>Bug in image</strong> </a></p>

<p>And I really don't get why :/ </p>

<p>I tried everything to get where the problem occurred with console.log .. but nothing happend before the crash. Not event the onchange() from the .js...</p>

<p>I also tried to do it with tiny file and the result is the same.</p>

<p>I think the bug is coming from Chrome browser but still, I can't let my website this way and I really need your help for this point.</p>

<p><strong>My idea are :</strong> </p>

<ul>
<li><p>closing the file Window after the user tried to drag something but it seems impossible in javascript to close something we didn't open by ourself </p></li>
<li><p>to make impossible to move or drag any file from the file window of the browser. Like it is in Firefox and Internet Explorer</p></li>
<li><p>or just find the reason of the crash but it seems impossible to realize.. Console.log issue no message. It just crashes.. </p></li>
</ul>

<p>I hope you'll be able to deal with it better than me. I really need help here,</p>

<p>Regards</p>

<p><strong>The code :</strong> </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>jQuery(document).ready(function($) {

  var loadFichier = $('#professionnal-icones-pictures-add'),
    contenerImages = $('#imagesPro');


  loadFichier.on('change', function(event) {


    console.log("change");
    event = event || window.event;


    var fichierLoad = loadFichier[0].files[0],
      output = document.getElementById('output1');


    if (output.src == "") {

      if (event.target.files[0]) {

        var url = URL.createObjectURL(event.target.files[0]);

        output.src = url;

      }

    }


  });



  window.addEventListener("dragover", function(e) {
    e = e || event;

    e.preventDefault();
    e.stopPropagation();
  }, false);
  window.addEventListener("drop", function(e) {
    e = e || event;

    e.preventDefault();
    e.stopPropagation();
  }, false);



  contenerImages.on(
    'dragover',
    function(e) {

      e = e || window.event;

      e.preventDefault();
      e.stopPropagation();
    }
  )
  contenerImages.on(
    'dragenter',
    function(e) {

      e = e || window.event;

      e.preventDefault();
      e.stopPropagation();
    }
  )
  contenerImages.on(
    'drop',
    function(e) {

      e = e || window.event;

      if (e.originalEvent.dataTransfer) {
        if (e.originalEvent.dataTransfer.files.length) {

          e.preventDefault();
          e.stopPropagation();

        }
      }

    }
  );

});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"&gt;

&lt;head&gt;

  &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
  &lt;link href="/sitePerso/vue/profil/style-profil.css" rel="stylesheet" type="text/css" /&gt;
&lt;/head&gt;

&lt;body&gt;

  &lt;div id="professional-get-pictures"&gt;

    &lt;div id="contener-selection"&gt;

      &lt;div id="imagesPro"&gt;


        &lt;div&gt;
          &lt;img id='output1' /&gt;
        &lt;/div&gt;


      &lt;/div&gt;


      &lt;div id="contener-icones-pictures"&gt;

        &lt;input id="professionnal-icones-pictures-add" type="file" accept="image/*"&gt;


      &lt;/div&gt;

    &lt;/div&gt;

  &lt;/div&gt;


  &lt;script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"&gt;&lt;/script&gt;

  &lt;script type="text/javascript" src="profiltest.js"&gt;&lt;/script&gt;

&lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>