JSFiddle - React, Tailwind, and code Playground

HTML

<form action="" method="post" enctype="multipart/form-data" style="clear:both" onsubmit="LoadData();  return false;" id="form_sample_2" novalidate="novalidate">

   <input type="hidden" name="nameid" value="">
     <label for="picture">* Upload Files For Client</label>
     <input required="" class="form-control" style="height:auto;" name="photos[]" id="uploadfile" multiple="true" type="file">
                         
    <div col-md-6 id="filelist" style="display:none;"> </div>
    <div col-md-6 id="fileinputtag"> </div>
    <div col-md-6 id="list"> </div>
              
     <input type="submit" class="btn btn-success" value="SUBMIT" name="case_form" />
 </form>

JavaScript

/*  Note: change() event fires if user cancels [Choose Files]
     with files already selected, since cancel clears it.       */

function handleFileSelect(evt) {
  alert('In handleFileSelect. Evt:  ' + evt);
  var files = evt.target.files;                                        // FileList object
  // Loop through the FileList and render image files as thumbnails.
  for (var i = 0, f; f = files[i]; i++) {
    var reader = new FileReader();                             // Only process image files.
    reader.onload = (function(theFile) {                   // Closure to capture the file information.
      return function(e) {                                             // Render thumbnail.
        var span = document.createElement('span');
        span.innerHTML = ['<p>',escape(theFile.name),'</p><input type="text" name="filenam[]" value="">'].join('');

        document.getElementById('list').insertBefore(span, null);
      };              // return
    })(f);          // reader.onload
    reader.readAsDataURL(f);   // Read in the image file as a data URL.
  }   // for
}     // handleFileSelect()

function LoadData() {
  alert(document.getElementById("form_sample_2").innerHTML);
}

document.getElementById('uploadfile').addEventListener('change', handleFileSelect, false);