Drag and drop file upload not working in Firefox

Question

I am trying to integrate file upload with Browse and drag and drop option in my website. The below code file upload option working good in chrome at the same its not working in Firefox browser. I tried many articles. But I am playing around with this. Anyone help me to resolve this. Thanks in advance.

var imageLoader = document.getElementById('filePhoto');
imageLoader.addEventListener('change', handleImage, false);

function handleImage(e) {
    var reader = new FileReader();
    reader.onload = function(event) {
        $('#uploader img').attr('src', event.target.result);
    }
    reader.readAsDataURL(e.target.files[0]);
    $('#cancel_file').show();
}

var dropbox;
dropbox = document.getElementById("uploader");
dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("drop", drop, false);

function dragenter(e) {
    e.stopPropagation();
    e.preventDefault();
}

function dragover(e) {
    e.stopPropagation();
    e.preventDefault();
}

function drop(e) {
    e.stopPropagation();
    e.preventDefault();
    //you can check e's properties
    //console.log(e);
    var dt = e.dataTransfer;
    var files = dt.files;

    //this code line fires your 'handleImage' function (imageLoader change event)
    imageLoader.files = files;
}
$('#cancel_file').click(function(e) {
    $('.fimg').attr('src', "https://i.imgur.com/j0KblIu.png");
    $('#cancel_file').hide();
});

#uploader {
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 350px;
  background: transparent;
  border: 2px dashed #e8e8e8;
  cursor: pointer;
  padding: 5px;
  color: #555;
  font-family: 'Segoe UI';
  font-weight: bold;
} 
#uploader p {
  padding: 30px;
  text-align: center;
  position: relative;
  font-size: 25px;
  color: #000;
  top: 56px;
}	
#filePhoto {
  display: none;
}    
#uploader img {
  position: absolute;
  width: 100%;
  height: 362px;
  top: -1px;
  left: -1px;
  z-index: -1;
  border: none;
  background-color: #eee;
}

<div id="uploader" onclick="$('#filePhoto').click()">
    <p> click here or drag here to upload image</p>
    <img class="fimg" src="https://i.imgur.com/j0KblIu.png" />
</div>
<input type="file" name="userprofile_picture" id="filePhoto" />
<button type="button" id="cancel_file" style="display: none;">Cancel</button>


<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
   

Answer 1

May be imageLoader.files = files; don't trigger "change event" in firefox so that i have manually triggered change event in drop function and it works for me, you can try this

var imageLoader = document.getElementById('filePhoto');
imageLoader.addEventListener('change', handleImage, false);

function handleImage(e) {
    var reader = new FileReader();
    reader.onload = function(event) {
        $('#uploader img').attr('src', event.target.result);
    }
    reader.readAsDataURL(e.target.files[0]);
    $('#cancel_file').show();
}

var dropbox;
dropbox = document.getElementById("uploader");
dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("drop", drop, false);

function dragenter(e) {
    e.stopPropagation();
    e.preventDefault();
}

function dragover(e) {
    e.stopPropagation();
    e.preventDefault();
}

function drop(e) {
    e.stopPropagation();
    e.preventDefault();
    //you can check e's properties
    //console.log(e);
    var dt = e.dataTransfer;
    var files = dt.files;
    //this code line fires your 'handleImage' function (imageLoader change event)
    
    imageLoader.files = files;
    
    // Create a new 'change' event
    var event = new Event('change');
    // Dispatch it.
    imageLoader.dispatchEvent(event);

}
$('#cancel_file').click(function(e) {
    $('.fimg').attr('src', "https://i.imgur.com/j0KblIu.png");
    $('#cancel_file').hide();
});

#uploader {
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 350px;
  background: transparent;
  border: 2px dashed #e8e8e8;
  cursor: pointer;
  padding: 5px;
  color: #555;
  font-family: 'Segoe UI';
  font-weight: bold;
} 
#uploader p {
  padding: 30px;
  text-align: center;
  position: relative;
  font-size: 25px;
  color: #000;
  top: 56px;
}	
#filePhoto {
  display: none;
}    
#uploader img {
  position: absolute;
  width: 100%;
  height: 362px;
  top: -1px;
  left: -1px;
  z-index: -1;
  border: none;
  background-color: #eee;
}

<div id="uploader" onclick="$('#filePhoto').click()">
    <p> click here or drag here to upload image</p>
    <img class="fimg" src="https://i.imgur.com/j0KblIu.png" />
</div>
<input type="file" name="userprofile_picture" id="filePhoto" />
<button type="button" id="cancel_file" style="display: none;">Cancel</button>


<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>