0

I'm using this this html, CSS and JavaScript to preview multiple images before the upload. I'm getting the image preview fine in the result area, and I want to display the file name and button to remove a file. How can I do that? thank you.

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">

article {
  width: 80%;
  margin: auto;
  margin-top: 10px;
}
.thumbnail {
  height: 100px;
  margin: 10px;
  border-radius: 10px;
}
</style>
<body>
<form id='post-form' class='post-form' method='post'>
  <label for='files'>Select multiple files: </label>
  <input id='files' type='file' multiple/>
  <output id='result' />
</form>


<script type="text/javascript">
    window.onload = function() {
  if (window.File && window.FileList && window.FileReader) {
    var filesInput = document.getElementById("files");
    filesInput.addEventListener("change", function(event) {
      var files = event.target.files; 
      var output = document.getElementById("result");
      for (var i = 0; i < files.length; i++) {
        var file = files[i];
        //Only pics
        if (!file.type.match('image'))
          continue;
        var picReader = new FileReader();
        picReader.addEventListener("load", function(event) {
          var picFile = event.target;
          var div = document.createElement("div");
          var label = document.createElement("label");
          div.innerHTML = "<img class='thumbnail' src='" + picFile.result + "'" +"title='" + picFile.name + "'/>";

          output.insertBefore(div, null);
          output.insertBefore(label, null);
        });
        
        picReader.readAsDataURL(file);
      }
    });
  } else {
    console.log("Error");
  }
}
</script>
</body>
</html>
chamara nishantha
  • 23
  • 1
  • 6
  • It might help to show where specifically you get stuck. Are you having trouble getting the filename, creating a button, removing the file, or something else? – showdev May 19 '21 at 04:37
  • I'm having trouble to get the file name of uploaded file, and adding the button to remove a uploaded item. thanks. – chamara nishantha May 19 '21 at 05:43
  • Does [file.name](https://developer.mozilla.org/en-US/docs/Web/API/File/name) work? See [How can I get the filename from the FileReader](https://stackoverflow.com/questions/35162868/how-can-i-get-the-filename-from-the-filereader-function-in-a-multiple-input). – showdev May 19 '21 at 05:51

0 Answers0