Issue in filename and img show

JavaScript
1

I have a box and button to choose a file and when I choose my file then it shows in the picture box
and I have file window under each box and can get defference picture in the boxes

Under my picture I have a input line there I want to display only the filename of the picture not the whole pathname…

So it has to do 2 function or ?

so It still shows my picture in the box and its gets only the filename from picture to my input Value how ?

And if it could so I don’t need the filebrowse on button but in the img click it could be nice, but its fine if could not work with img click

Here is my code - ( have 4 function and 4 box ) but the code are the same only the name is different so it gets a difference picture in each box

function previewFeatureFile() {
  var preview = document.querySelector('#feature_prev');
  var file = document.querySelector('#browse').files[0];
  var reader = new FileReader();
  reader.addEventListener("load", function() {
    preview.src = reader.result;
  }, false);
  if (file) {
    reader.readAsDataURL(file);
    console.log(reader);
  }
}

function previewFeatureFiles() {
  var preview = document.querySelector('#feature_prevs');
  var file = document.querySelector('#browse1').files[0];
  var reader = new FileReader();
  reader.addEventListener("load", function() {
    preview.src = reader.result;
  }, false);
  if (file) {
    reader.readAsDataURL(file);
  }
}

function previewFeature1() {
  var preview = document.querySelector('#feature_prev1');
  var file = document.querySelector('#browse2').files[0];
  var reader = new FileReader();
  reader.addEventListener("load", function() {
    preview.src = reader.result;
  }, false);
  if (file) {
    reader.readAsDataURL(file);
  }
}

function previewFeature2() {
  var preview = document.querySelector('#feature_prev2');
  var file = document.querySelector('#browse3').files[0];
  var reader = new FileReader();
  reader.addEventListener("load", function() {
    preview.src = reader.result;
  }, false);
  if (file) {
    reader.readAsDataURL(file);
  }
}

function previewFeature3() {
  var preview = document.querySelector('#feature_prev3');
  var file = document.querySelector('#browse4').files[0];
  var reader = new FileReader();
  reader.addEventListener("load", function() {
    preview.src = reader.result;
  }, false);
  if (file) {
    reader.readAsDataURL(file);
  }
}
<div class="empty">
  <div class="fill" draggable="true"> </div>
</div><br>
<div class="empty">
  <img id="feature_prev" src="aadrag.png" width="160" height="160" />
  <input id="browse" type="file" onchange="previewFeatureFile()">
</div><br>

<div class="empty">
  <img id="feature_prevs" src="aadrag.png" width="160" height="160" />
  <input id="browse1" type="file" onchange="previewFeatureFiles()">
</div><br>

<div class="empty">
  <img id="feature_prev1" src="aadrag.png" width="160" height="160">
  <input id="browse2" type="file" onchange="previewFeature1()">
</div><br> 

<p>in this part i try to make a onclick on img its open windod but not show the picture in my img then i click done.. </p>

<div class="empty">
  <a href="#" onclick="openFileOption();"><img id="feature_prev2" src="aadrag.png" width="160" height="160" /></a>
  <input id="browse3" type="file" onchange="previewFeature2()">  
  
  <p>here i try to get the filename of the picture in input - i know its wrong but i dont know how i do, so its only for show you what i want to here</p>

  <input id="feature_prev2" type="text" onchange="previewFeature2()">
</div><br>


<div class="empty">
  <img id="feature_prev3" src="aadrag.png" width="160" height="160" />
  <input id="browse4" type="file" onchange="previewFeature3()">
  <span id="previewFeature3()">a</span>
  <input id="feature_prev3" type="text" onchange="previewFeature3()">
</div><br>
2

I really hobe some one could help me out.