JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
                                    <div class="col-lg-12">
                                        <label class="fieldlabels">Photos:</label> 
                                        <!--input type="file" name="pic" accept="image/*"-->
                                        <input type="file" class="form-control" id="file_name2"  onchange="return fileValidation2(this)" name="file_name2" value="" title="Photos" accept="image/*" multiple="multiple"/>        
                                        <table class="table table-striped table-bordered" style="width:100%;" id="add_files2">
                                            <thead>
                                                <tr>
                                                    <th style="color:blue; text-align:center;">File Name</th>
                                                    <th style="color:blue; text-align:center;">Status</th>
                                                    <th style="color:blue; text-align:center;">File Size</th>
													<th style="color:blue; text-align:center;">Type</th>
                                                    <th style="color:blue; text-align:center;">Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>

                                            </tbody>
                                        </table>
                                    </div>
                                </div>

JavaScript

function isVideo(film) {
  const ext = ['.jpeg', '.jpg', '.tif', '.tiff', 'bmp', '.png'];
  return ext.some(el => film.endsWith(el));
}

function fileValidation2() {
	  let files = document.getElementById('file_name2');
      for (let i = 0; i < files.files.length; ++i) {
		  let fname = files.files.item(i).name;
		  if (!isVideo(fname)) {
		  alert("File extension not supported!");
		  files.value = '';
		  return false;
		}
	  }
    if (window.FileReader && window.Blob) {
        if (files.files && files.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                var img = new Image();
                // img.onload = function() {
                    // var preview = document.getElementById('preview');
                    // preview.src = e.target.result;
                    // };
                img.onerror = function() { 
                    alert('Please choose actual files');
                    files.value = '';
					//window.location.reload();
                    return false;   					
                    };
                img.src = e.target.result;				
                }
            reader.readAsDataURL(files.files[0]);
            }
        }
/*     else {
        var ext = files.value.split('.');
        ext = ext[ext.length-1].toLowerCase();      
        var arrayExtensions = ['jpg' , 'jpeg', 'png', 'bmp'];
        if (arrayExtensions.lastIndexOf(ext) == -1) {
            alert('error');
            files.value = '';
			return false;
            }
        else {
            var preview = document.getElementById('preview');
            preview.setAttribute('alt', 'Browser does not support preview.');
            }
        } */
    }