brijeshb42/droppable.html

## droppable.html
<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <meta name="description" content="If you want to edit something of the product, do it here."/>
    <link rel="shortcut icon" href="favicon.ico" />
    <title>Edit Product</title>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <style  type="text/css">
      .holder { border: 4px dashed #ccc; min-width: 50px; height: 90px; margin: 5px auto;}
      .holder.dragover { border: 4px dashed #0c0; }
    </style>
  </head>

  <body>
    <div id="wrapper">
      <div id="content">
        <form class="globalForms noPadding" name="prod_form" style="font:normal 12px arial" action="" method="post" enctype="multipart/form-data">
          <!-- Change - moved holder inside form so that the images are submitted -->
          <table style="font:normal 12px arial">
            <tr>
              <td width="110" rowspan="3" style="text-align:center">
                <div class="holder">
                  <div class="output"><p><br>Drag image file<br>here or<br>click to upload</p></div>
                </div>
              </td>
            </tr>
          </table>
          <table class="globalTables leftAlign noHover" cellpadding="0" cellspacing="0" style="font:normal 12px arial">
            <tbody>
              <tr>
                <td>
                  <label><b>Description</b></label><br>
                  <textarea class="large" name="description" style="height:60px"></textarea>
                </td>
              </tr>
            </tbody>
          </table>
          <div class="buttons">
            <div class="input">
              <button class="button green" name="update" id="update" type="submit" title="Update this product">Update</button>
            </div>
          </div>
          <script type="text/javascript">
            (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);
                // Change
                input.setAttribute('name', 'ImgToUpload');
                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('.holder'), 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 width="90" src="' + URL.createObjectURL(files[i]) + '" />';
                  }
  //                output.innerHTML += '<p>'+files[i].name+'</p>';
                }
                // Change
              });
            })(this);
          </script>
        </form>
      </div>
    </div>
  </body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<meta name="description" content="If you want to edit something of the product, do it here."/>
	<link rel="shortcut icon" href="favicon.ico" />
	<title>Edit Product</title>

	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

	<style type="text/css">
	.holder { border: 4px dashed #ccc; min-width: 50px; height: 90px; margin: 5px auto;}
	.holder.dragover { border: 4px dashed #0c0; }
	</style>
	</head>

	<body>
	<div id="wrapper">
	<div id="content">
	<form class="globalForms noPadding" name="prod_form" style="font:normal 12px arial" action="" method="post" enctype="multipart/form-data">
	<!-- Change - moved holder inside form so that the images are submitted -->
	<table style="font:normal 12px arial">
	<tr>
	<td width="110" rowspan="3" style="text-align:center">
	<div class="holder">
	<div class="output"><p><br>Drag image file<br>here or<br>click to upload</p></div>
	</div>
	</td>
	</tr>
	</table>
	<table class="globalTables leftAlign noHover" cellpadding="0" cellspacing="0" style="font:normal 12px arial">
	<tbody>
	<tr>
	<td>
	<label><b>Description</b></label><br>
	<textarea class="large" name="description" style="height:60px"></textarea>
	</td>
	</tr>
	</tbody>
	</table>
	<div class="buttons">
	<div class="input">
	<button class="button green" name="update" id="update" type="submit" title="Update this product">Update</button>
	</div>
	</div>
	<script type="text/javascript">
	(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);
	// Change
	input.setAttribute('name', 'ImgToUpload');
	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('.holder'), 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 width="90" src="' + URL.createObjectURL(files[i]) + '" />';
	}
	// output.innerHTML += '<p>'+files[i].name+'</p>';
	}
	// Change
	});
	})(this);
	</script>
	</form>
	</div>
	</div>
	</body>
	</html>