Use <input type="file"/> in HTML

[ThulaniMabena]

Hi, I create a code where I can read duration of submitted files and I think your plugin is great to upload the files and it requires the use of in html, not in javascript. How may I achieve that? Here's the code,

const formatSeconds = seconds => new Date(seconds * 1000).toISOString().substr(11, 8);

let myVideos = [];
window.URL = window.URL || window.webkitURL;
function setFileInfo(files) {
  myVideos.push(files[0]);
  var video = document.createElement('video');
  video.preload = 'metadata';
  video.onloadedmetadata = function() {
    window.URL.revokeObjectURL(this.src)
    var duration = video.duration;
    myVideos[myVideos.length - 1].duration = duration;
    updateInfos();
  }
  video.src = URL.createObjectURL(files[0]);;
}

function updateInfos(deleteName) {
  let info = document.querySelector('#infos');
  info.innerHTML="";
  let total = 0;
  for (let i = myVideos.length - 1; i >= 0; i--) {
    let v = myVideos[i];
    if (deleteName === myVideos[i].name) {
      myVideos.splice(i, 1);
    } else {
      info.innerHTML += "<div class='row' data-name='" + v.name + "'>" + 
                            "<div class='close' onclick=remove(this)>&times</div>" +
                             v.name + ", duration: " + formatSeconds(v.duration) + 
                        "</div>";
      total += myVideos[i].duration;
    }
  }
  if (myVideos.length)
    info.innerHTML += "<div class='row'>Total: " + formatSeconds(total) + '</div>';
}

function remove(e) {
    updateInfos(e.parentNode.dataset.name);
}

.close {
    width: 15px;
    height: 15px;
    background-color: rgb(35, 179, 119);
    float: left;
    cursor: pointer;
    color: white;
    box-shadow: 2px 2px 7px rgb(74, 72, 72);
    text-align: center;
    vertical-align: middle;
    padding-bottom: 2px;
    margin: 0 10px 10px 0;
}
.row {
    position: relative;
    float: left;
    width: 100%;
}
#infos {
    margin-top: 20px;
    position: relative;
}

<div id="input-upload-file" class="box-shadow">
  <span>- Try Upload -</span> 
  <input type="file" class="upload" id="fileUp" name="fileUpload" onchange="setFileInfo(this.files)">
</div>
<div id="infos"></div>

[hayageek]

is the code related to my plugin. ?

[hayageek]

You can make use of onSelect(), onSubmit() you can get the file object and show the duration using customProgressBar option.

Check 8).Custom UI in Features tab in http://hayageek.com/docs/jquery-upload-file.php#customui

[ThulaniMabena]

But how, I only know how to use extraHTML but it will be possible if the is in HTML. Lets say I put this $("input[type=file]").on('change',function(){ alert(this.files[0].name); }); in javascript. If the <input type="file... is in html it will trigger. How can I achieve this or do I have any solution?

[ThulaniMabena]

If I put myVideos.push(files[0]); in onSelect, it will alert the duration but won't show the box