Context Menu - Insert Image

by Wagner Viana

HTML

<div class="div-text" oncontextmenu="contextMenu(); return false;" contentEditable="true">
        	        
</div>
<div id="context-menu">
        <input type="file" onchange="previewFile()" class="custom-file-input">
</div>

CSS

/*Context-Menu*/
#context-menu {	
    width:200px;    
    border-radius: 5px;
    padding:0;
    position:fixed;
    visibility:hidden;
}

#context-menu ul{
    list-style-type:none;
    margin:0;
    line-height:50px;
    padding:0;
    text-align:center;
}

#context-menu > ul > li {
    cursor:pointer;
}

#context-menu > ul > li:nth-child(n < 3) {
    border-bottom:1px dotted;
}

#context-menu > ul > li:hover {
    background-color:#D5D8DE;
}
/*Input File*/

.custom-file-input {
  color: transparent;
}
.custom-file-input::-webkit-file-upload-button {
  visibility: hidden;
}
.custom-file-input::before {
	content: 'Inserir Imagem';
	color: black;
	display: inline-block;
	background: #fff;
	border: 1px solid #999;
	border-radius: 3px;
	padding: 5px 8px;
	outline: none;
	white-space: nowrap;
	-webkit-user-select: none;
	cursor: pointer;	
	font-weight: 300;
	font-size: 10pt;
}
.custom-file-input:hover::before {
  	background-color: #D5D8DE;
}
.custom-file-input:active{
  	outline: 0;
}
.custom-file-input:focus{
	outline:none !important;
}
.custom-file-input:active::before {
  background-color: #fff; 
}
.div-text{
	width: 500px;
	height: 500px;
	border: 1px solid #000;
}

JavaScript

/**
 * 
 * 
 * Context Menu
 * 
 * 
 */
function contextMenu() {
        var X = event.clientX;
        var Y = event.clientY;

        var menu = document.getElementById("context-menu");
            
        menu.style.top = Y.toString() + "px";
        menu.style.left = X.toString() + "px";
        menu.style.visibility = "visible";

        var lis = document.querySelectorAll("#context-menu > ul > li");
        for (var i = 0; i < lis.length; i++) {
            lis.item(i).addEventListener("click", function () {
                menu.style.visibility = "hidden";
            });
        }
    }
        
    window.onload = function () {
        document.addEventListener("click",
            function () {
                document.getElementById("context-menu").style.visibility = "hidden";
            }
        );            
   }
   
/**
 * 
 * 
 * Add Tag img
 * 
 * 
 */
document.addEventListener("contextmenu", function(e) {   
	
    var $divtext= document.querySelector('.div-text'),    
	HTMLTemporario = $divtext.innerHTML,    
	HTMLNovo = '<img src="" height="200" alt="Visualisar...">';
	HTMLTemporario = HTMLNovo + HTMLTemporario;
	$divtext.innerHTML = HTMLTemporario; 
	
}); 
/**
 * 
 * 
 * Preview Image
 * 
 * 
 */
function previewFile(){
    var preview = document.querySelector('img');
    var file    = document.querySelector('input[type=file]').files[0]; 
    var reader  = new FileReader();

    reader.onloadend = function () {
        preview.src = reader.result;
    }

    if (file) {
        reader.readAsDataURL(file);
    } else {
        preview.src = "";
        }
}