Merhaba, yapmak istediğim şey, kutunun üstüne gelip mouse ile tıklanırsa bir resim seçip bu resmi igili kutu içinde göstermek. Bundan sonra start scan butonuna basılınca seçmiş olduğum bu resmi server'a göndermek istiyorum.

Resim seçebiliyorum ama bu resmi kutu içerisinde göremiyorum nasıl bir yol izlemeliyim ?
Seçilen resme myFunction içinde ulaşmak istiyorum sonrasında bu resim server'a gönderilecek, XMLHttpRequest() ile yapmaya çalıştım fakat seçilen dosyaya erişemedim.
Önerileriniz nelerdir ?

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.box {
	width: 120px;
	height: 280px;
        border-style: solid;
        border-color: #C0C0C0;
}

.out_box {
	width: 350px;
	height: 380px;
        border-style: solid;
        border-color: #C0C0C0;
	margin-left: 420px;
	margin-top: 40px;
}

.buton {
	margin-left: 570px;
	margin-top: 40px;
        border-style: solid;
        border-color: #C0C0C0;
}

.container { 
  	height: 500px;
  	position: relative;
  	border: 3px solid #C0C0C0;; 
}

div.focus-image {
  	border:1px solid #dddddd;
  	display:inline-block;
  	position:relative;
  	cursor:pointer;

	width: 110px;
	height: 280px;
        border-style: solid;
        border-color: #C0C0C0;
	margin: 32px;
       	margin-left: 550px;
	margin-top: 40px;
}
div.focus-image div {
  	display:none;
  	border:2px solid red;
  	position:absolute;
 	left:90px; /*x*/
  	top:60px; /*y*/
}

#file-input {
  display: none;
}


</style>
</head>
<body>

<div class="container">

<label for="file-input">
<div id="first" class="focus-image"></div>
<input type="file" id="file-input"/>
</label>

<button class="buton" onclick="myFunction()">Start Scan</button>

</div>

<div id="output_box"  class="out_box"></div>

<script>
 

function myFunction() {
    //not implemented

    var formdata =  new FormData();
    formdata.append("snap", img);

    var xhr = new XMLHttpRequest();
    xhr.open("POST", "{{ url_for('upload') }}", true);
    xhr.onload = function() {
        if(this.status = 200) {
            console.log(this.response);
        } else {
            console.error(xhr);
        }
        alert(this.response);
    };
    xhr.send(formdata);

}


</script>

</div>
</body>
</html>