JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.js"></script>
<script src="https://threejs.org/examples/js/loaders/OBJLoader.js"></script>

 <div class="uploadBox">
        <!--         <form method="post" enctype="multipart/form-data">
 -->
   <form>
     <div>
       <label for="modal">Choose images to upload (.obj)</label>
       <input type="file" id="modal" name="modal" accept=".obj">
     </div>
     <div class="preview">
       <p>No files currently selected for upload</p>
     </div>
     <div>
       <button>View</button>
     </div>
   </form>
   <div id="objPreview"></div>
</div>

CSS

html {
  font-family: sans-serif;
}

form {
    width: 600px;
    background: #eee;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
}

form ol {
  padding-left: 0;
}

form li, div > p {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  list-style-type: none;
  border: 1px dashed #ccc;
}
 
form img {
  height: 64px;
  order: 1;
}

form p {
  line-height: 32px;
  padding-left: 10px;
}

form label, form button {
    background-color: #38c;
    padding: 5px 10px;
    border: 1px solid #38c;
    font-size: 0.8rem;
    height: auto;
    color: #fff;
}

form label:active, form button:active,
form label:hover, form button:hover {
  background-color: white;
  color: #38c;
}

JavaScript

var input = document.querySelector('input');
var preview = document.querySelector('.preview');
var button = document.querySelector("button");

input.style.opacity = 0;
input.addEventListener('change', updateImageDisplay);
button.addEventListener("click", handlePreview);


function updateImageDisplay() {
  while (preview.firstChild) {
    preview.removeChild(preview.firstChild);
  }

  var curFiles = input.files;
  if (curFiles.length === 0) {
    var para = document.createElement('p');
    para.textContent = 'No files currently selected for upload';
    preview.appendChild(para);
  } else {
    var list = document.createElement('ol');
    preview.appendChild(list);
    for (var i = 0; i < curFiles.length; i++) {
      var listItem = document.createElement('li');
      var para = document.createElement('p');
      if (validFileType(curFiles[i])) {
        para.textContent = 'File name ' + curFiles[i].name + ', file size ' + returnFileSize(curFiles[i].size) + '.';
        // var image = document.createElement('img');
        // image.src = window.URL.createObjectURL(curFiles[i]);

        // listItem.appendChild(image);
        listItem.appendChild(para);

      } else {
        para.textContent = 'File name ' + curFiles[i].name + ': Not a valid file type. Update your selection.';
        listItem.appendChild(para);
      }

      list.appendChild(listItem);
    }
  }
}
var fileTypes = [
  'image/jpeg'
]

function validFileType(file) {
  for (var i = 0; i < fileTypes.length; i++) {
    console.log(file.type);
    if (file.type === fileTypes[i]) {
      return true;
    }
  }
  return true; // change this to false for proper validation
}

function returnFileSize(number) {
  if (number < 1024) {
    return number + 'bytes';
  } else if (number >= 1024 && number < 1048576) {
    return (number / 1024).toFixed(1) + 'KB';
  } else if (number >= 1048576) {
    return (number / 1048576).toFixed(1) + 'MB';
  }
}

// vars
var camera, scene, renderer;

var width =...