CODEWITHSUNDEEP
javascriptvideofilereader
Web User
Web User

Reputation: 7736

Getting video file details using FileReader

I have a web-based user interface facilitating dragging and dropping files into a container DIV. If the dropped file is an image, I use the following code:

let droppedFile = evt.dataTransfer.files[0];
let img = new Image();
let reader = new FileReader();
reader.onloadend = function() {
  img.src = reader.result;
  let fileDetails = {};
  let n = droppedFile.name.indexOf('.');
  fileDetails.name = droppedFile.name.substring(0, n != -1 ? n : droppedFile.name.length);
  fileDetails.extension = droppedFile.name.substring(n != -1 ? n+1 : '');
  fileDetails.fileType = droppedFile.type;
  fileDetails.width = img.naturalWidth;
  fileDetails.height = img.naturalHeight;
  // display fileDetails in another DIV...
}
reader.readAsDataURL(droppedFile);

I need to be able to do the same thing with a video file (e.g. an MP4). However, I don't see any Video element, similar to the Image element/constructor. How do I go about instantiating a video element, so I can get the generic attributes as well as video specific attributes?

Upvotes: 2

Views: 8690

Answers (2)

Ajibola Bello
Ajibola Bello

Reputation: 474

 var file = e.target.files[0];
    var reader = new FileReader();
    reader.onload = (e) => {
      var videoElement = document.createElement('video');
      videoElement.src = e.target.result;
      var timer = setInterval(() => {
        if (videoElement.readyState === 4) {
          if(videoElement.duration) {
            console.log(file)//the file object
            console.log(videoElement.duration) //video duration
          }
          clearInterval(timer);
        }
      }, 500)
    }
    reader.readAsDataURL(file);

Upvotes: 1

Michał Perłakowski
Michał Perłakowski

Reputation: 92521

You don't need to use FileReader. Use the following code:

const video = document.createElement('video')
video.addEventListener('loadedmetadata', event => {
  console.log(video.videoWidth, video.videoHeight)
})
video.src = URL.createObjectURL(droppedFile)

Full code:

const dropzone = document.getElementById('dropzone')
dropzone.addEventListener('dragover', event => event.preventDefault())
dropzone.addEventListener('drop', event => {
  event.preventDefault()
  const droppedFile = event.dataTransfer.files[0]
  const video = document.createElement('video')
  video.addEventListener('loadedmetadata', event => {
  	console.log(video.videoWidth, video.videoHeight)
  })
  video.src = URL.createObjectURL(droppedFile)
})
*, ::before, ::after {
  box-sizing: border-box;
}
#dropzone {
  width: 600px;
  height: 300px;
  border: 2px dashed blue;
  border-radius: 3px;
  background-color: white;
  color: gray;
  font-family: sans-serif;
  font-size: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 400ms;
}
#dropzone:hover {
  cursor: pointer;
}
<div id="dropzone">drop files here</div>

Upvotes: 4

Related Questions