MNBuyskih/file-manager.html

## file-manager.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>File manager</title>
</head>
<body>
<h3>Click on image to select</h3>

<ul style="list-style: none; margin: 0; padding: 0">
  <li><img src="https://picsum.photos/250/100" alt="image 0" onclick="pickTheImage(this.src)" /></li>
  <li><img src="https://picsum.photos/250/101" alt="image 1" onclick="pickTheImage(this.src)" /></li>
  <li><img src="https://picsum.photos/250/102" alt="image 2" onclick="pickTheImage(this.src)" /></li>
  <li><img src="https://picsum.photos/250/103" alt="image 3" onclick="pickTheImage(this.src)" /></li>
  <li><img src="https://picsum.photos/250/104" alt="image 4" onclick="pickTheImage(this.src)" /></li>
</ul>

<script>
  function pickTheImage(url) {
    window.opener.postMessage(url, "*");
    window.close();
  }
</script>
</body>
</html>

## main.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Main window</title>
</head>
<body>

<h1>Main window</h1>
<a href="./file-manager.html" onclick="handleClick(event)">pick the image</a>
<br>
<input type="text" id="my-image" name="my-image" size="50" readonly />

<script>
  function handleClick(event) {
    event.preventDefault();
    window.open("./file-manager.html", "file-manager", "width=300,height=500");
  }

  window.addEventListener('message', function(event) {
    document.getElementById('my-image').value = event.data;
  });
</script>
</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport"
	content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>File manager</title>
	</head>
	<body>
	<h3>Click on image to select</h3>

	<ul style="list-style: none; margin: 0; padding: 0">
	<li><img src="https://picsum.photos/250/100" alt="image 0" onclick="pickTheImage(this.src)" /></li>
	<li><img src="https://picsum.photos/250/101" alt="image 1" onclick="pickTheImage(this.src)" /></li>
	<li><img src="https://picsum.photos/250/102" alt="image 2" onclick="pickTheImage(this.src)" /></li>
	<li><img src="https://picsum.photos/250/103" alt="image 3" onclick="pickTheImage(this.src)" /></li>
	<li><img src="https://picsum.photos/250/104" alt="image 4" onclick="pickTheImage(this.src)" /></li>
	</ul>

	<script>
	function pickTheImage(url) {
	window.opener.postMessage(url, "*");
	window.close();
	}
	</script>
	</body>
	</html>