I’m making a web app that a user can drag and drop images and videos into.

I’ve figured out how to attach images and mp4 videos, but I can’t seem to attach MOV videos (the main video type I want to handle). I’m not sure if FileReader is incompatible with quicktime videos, but if it is, the other option seems to be the createObjectURL() method, which I’ve read is deprecated.

I would appreciate any suggestions for how to fix this. Thank you in advance.

This is what I’ve tried for handling a file drop. Every time I attempt to drop a MOV video (the type is “video/quicktime”), I see a dark video file icon that never loads into a video.

function handleFileDrop(e) {
    e.preventDefault();
    
    let files = e.dataTransfer.files; // holds the file(s) I want to attach
    let section = e.target; // the element I want to attach files to

    if (files.length) { // if dropping a new file
      for (let i = 0; i < files.length; i++) {
        let file = files[i];
        let fileName = files[i].name;
        if (file.type.startsWith('image')) {
          attachImage(file, fileName, section);
        } else if (file.type.startsWith('video')) {
          attachVideo(file, fileName, section);
        }
      }
    } else { 
      // this code is for swapping around existing files; not relevant
    }
  }

  function attachVideo(file, fileName, section) {
    let reader = new FileReader();
    reader.onload = function(e) {
      let video = document.createElement('video');
      video.src = e.target.result;
      video.id = fileName;
      video.controls = true;
      section.appendChild(video);
    }
    reader.readAsDataURL(file);
  }