I am creating a website with two file uploads, in the first file input, I want an image, and in the second one, I want a video.

I tried it out, it works. But I also showed it to my friends and family and they were not able to upload images from their iPhone/iPad. The images from iPhone are .HEIC.

This is my code, I am working with vue and firebase:

Javascript

const imageTypes = ["image/png", "image/jpeg", "image/HEIC"];
const handleImageChange = (e) => {
  let selected = e.target.files[0];
  console.log(selected);

  if (selected && imageTypes.includes(selected.type)) {
    imageFile.value = selected;
    fileError.value = null;
  } else {
    imageFile.value = null;
    fileError.value = "Please select an image file (png or jpg)";
  }
};

const videoTypes = ["video/mp4", "video/mov", "video/MOV"];
const handleVideoChange = (e) => {
  let selected = e.target.files[0];
  console.log(selected);

  if (selected && videoTypes.includes(selected.type)) {
    videoFile.value = selected;
    fileError.value = null;
  } else {
    videoFile.value = null;
    fileError.value = "Please select an image file (mp4 or mov)";
  }
};

Html

<input id="image" type="file" @change="handleImageChange" />
<div class="error">{{ fileError }}</div>

<label for="image"
  ><span class="material-icons icon">&#xe43e;</span>Upload Playlist Cover
  Image</label
>

<input id="video" type="file" @change="handleVideoChange" />
<div class="error">{{ fileError }}</div>

<label for="video"
  ><span class="material-icons icon">&#xe02c;</span>Upload Video</label
>

So what I basically want to do, is add all the image and video types possible so this file upload works for anyone (including iPhone/iPad users)

If anyone knows a suggestion, please let me know.