JSFiddle - React, Tailwind, and code Playground

by Lardpower

HTML

<!-- The `multiple` attribute lets users select multiple files. -->
<input type="file" id="file-selector" multiple>

<div id="placeholder">
  
</div>

JavaScript

const fileSelector = document.getElementById('file-selector');
  fileSelector.addEventListener('change', (event) => {
    const fileList = event.target.files;

 var oFile =fileList[0];
    var mytest = document.getElementById('mytest');
    // prepare HTML5 FileReader
    var oReader = new FileReader();
        oReader.onload = function(e){
        console.log(e.target.result);
        mytest.src = e.target.result;
        mytest.onload = function () { // binding onload event
            console.log('load');
        };
    };
    // read selected file as DataURL
    oReader.readAsDataURL(oFile);
    var myVid=document.getElementById("mytest");
    console.log(myVid.duration);

  });