JS Drag and Drop Upload Photo

(function(window) { 
  function triggerCallback(e, callback) { 
    //  if(!callback || typeof callback !== 'function') { 
    //   return; 
    // } 
    var files; 
    if (e.dataTransfer) { 
      files = e.dataTransfer.files; 
    } else if (e.target) { 
      files = e.target.files; 
    } 
    callback.call(null, files); 
  } 
 
  function makeDroppable(ele, callback) { 
    var input = document.createElement('input'); 
    input.setAttribute('type', 'file'); 
    input.setAttribute('multiple', true); 
    input.style.display = 'none'; 
    input.addEventListener('change', function(e) { 
      triggerCallback(e, callback); 
    }); 
    ele.appendChild(input); 
 
    ele.addEventListener('dragover', function(e) { 
      e.preventDefault(); 
      e.stopPropagation(); 
      ele.classList.add('dragover'); 
    }); 
 
    ele.addEventListener('dragleave', function(e) { 
      e.preventDefault(); 
      e.stopPropagation(); 
      ele.classList.remove('dragover'); 
    }); 
 
    ele.addEventListener('drop', function(e) { 
      e.preventDefault(); 
      e.stopPropagation(); 
      ele.classList.remove('dragover'); 
      triggerCallback(e, callback); 
    }); 
 
    ele.addEventListener('click', function() { 
      input.value = null; 
      input.click(); 
    }); 
  } 
  window.makeDroppable = makeDroppable; 
})(this); 
(function(window) { 
  makeDroppable(window.document.querySelector('.demo-droppable'), function(files) { 
    console.log(files); 
    var output = document.querySelector('.output'); 
    output.innerHTML = ''; 
    for (var i = 0; i < files.length; i++) { 
 
      if (files[i].type.indexOf('image/') === 0) { 
        output.innerHTML += '<img class= "imgSize" src="' + URL.createObjectURL(files[i]) + '" />'; 
      } 
      output.innerHTML += '<p>' + files[i].name + '</p>'; 
      output.innerHTML += '<p>' + files[i].size + 'byte</p>'; 
    } 
  }); 
})(this);

/* form action */ 
 
.title-section { 
 	font-size: 36px; 
 	font-family: 'Lora', serif; 
 	text-transform: uppercase; 
 	color: #686867; 
 	margin:20px 0; 
} 
 
@media screen and (max-width: 830px) { 
	.title-section { 
		font-size: 30px; 
		text-align: center; 
	} 
} 
 
@media screen and (max-width: 428px) { 
	.title-section { 
		font-size: 23px; 
		text-align: center; 
	} 
} 
 
@media screen and (max-width: 339px) { 
	.title-section { 
		font-size: 18px; 
		text-align: center; 
	} 
} 
 
.section { 
  background: #edece7; 
} 
 
.demo-droppable { 
    background: #fff; 
    color: #bfbfbf; 
    padding-top: 25px; 
    text-align: center; 
    box-shadow: inset 0px 2px 3px rgba(0,0,0,0.2); 
    margin-top: 12px; 
  } 
  .demo-droppable.dragover { 
    background: #748190; 
  } 
 
  .myBtn { 
  	background: #f0ede6; 
  	color: #c8b4a0; 
  	text-transform: uppercase; 
  	font-family: Roboto; 
  	font-size: 18px; 
  	border-radius: 0px; 
  } 
 
  .fc { 
  	color: #999; 
  	background: none;  
  	border: none; 
  	border-bottom: 1px solid #999; 
  	border-radius: 0; 
  	margin-top: 10px; 
  	font-family: Roboto; 
  	font-size: 14px; 
  } 
 
    .form-control:focus { 
  	color: #666; 
  	background: none;  
  	border: none; 
  	border-bottom: 2px solid #777; 
  	border-radius: 0; 
  } 
 
  .form-image { 
  	margin-bottom: 10px; 
  } 
 
  .submitBtn { 
  	font-family: Roboto; 
  	text-transform: uppercase; 
  	font-size: 16px; 
  	width: 160px; 
  	height: 40px; 
  	background: #baa187; 
  	color: #fff; 
  	border-radius: 0px; 
  	margin: 20px 0; 
  } 
 
  @media screen and (max-width: 430px) { 
  	.submitBtn { 
 
  	} 
  } 
 
  .containerSize { 
  	width: 60%; 
  	margin: 0 auto; 
  	padding-top: 5px; 
  } 
 
  @media screen and (max-width: 936px) { 
  	.containerSize { 
  		width: 75%; 
  	} 
  } 
 
  @media screen and (max-width: 767px) { 
  	.containerSize { 
  		width: 100%; 
  	} 
  } 
 
  .imgSize { 
  	width: 100px; 
  	float: left; 
  } 
 
.output { 
	display: inline-block; 
} 
 
/* end form action */

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" rel="stylesheet" /> 
 
 
<!-- form action --> 
<div class="section"> 
  <div class="container containerSize"> 
    <h1 class="title-section">Please fill in the form</h1> 
    <form> 
      <div class="row"> 
        <div class="col-md-4"> 
          <div class="form-group"> 
            <input type="name" class="form-control fc" id="name" placeholder="Name*"> 
          </div> 
        </div> 
        <div class="col-md-4"> 
          <div class="form-group"> 
            <input type="phone" class="form-control fc" id="phone" placeholder="Phone number*"> 
          </div> 
        </div> 
        <div class="col-md-4"> 
          <div class="form-group"> 
            <input type="email" class="form-control fc" id="email" placeholder="Email*"> 
          </div> 
        </div> 
      </div> 
 
      <div class="row"> 
        <div class="col-md-4"> 
          <div class="form-group"> 
            <input type="model" class="form-control fc" id="model" placeholder="Watch brand/model*"> 
          </div> 
        </div> 
        <div class="col-md-4"> 
          <div class="form-group"> 
            <input type="year" class="form-control fc" id="year" placeholder="Year"> 
          </div> 
        </div> 
        <div class="col-md-4"> 
          <div class="form-group"> 
            <input type="serial" class="form-control fc" id="serial" placeholder="Serial if knowns"> 
          </div> 
        </div> 
      </div> 
 
      <div class="row"> 
        <div class="col-md-6"> 
          <div class="form-group"> 
            <select class="form-control fc" name="material" id="matrial"> 
								<option>Box</option> 
								<option>Papers</option> 
							</select> 
          </div> 
        </div> 
        <div class="col-md-6"> 
          <div class="form-group"> 
            <input type="price" class="form-control fc" id="price" placeholder="Desired amount in BYN" style="margin-top: 14px;"> 
          </div> 
        </div> 
      </div> 
 
      <div class="row"> 
        <div class="col-md-12"> 
          <div class="form-group"> 
            <input type="other" class="form-control fc" id="other" placeholder="Additional information"> 
          </div> 
        </div> 
      </div> 
 
      <div class="row"> 
        <div class="col-md-12"> 
          <div class="demo-droppable"> 
            <img class="form-image" src="img/clock.png" alt=""> 
            <br> 
            <button type="button" class="btn myBtn" onclick="file_explorer();">Add files</button> 
            <p style="margin-bottom: 0px;">or drag and drop files here</p> 
            <div class="output"></div> 
          </div> 
        </div> 
      </div> 
      <div class="button-center"> 
        <button type="button" class="btn submitBtn" data-dismiss="modal" data-toggle="modal" data-target="#call">Submit →</button> 
      </div> 
    </form> 
  </div> 
</div> 
<!-- end form action -->