Estoy creando un sitio web con dos cargas de archivos, en la primera entrada de archivo, quiero una imagen y en la segunda, quiero un video.

Lo probé, funciona. Pero también se lo mostré a mis amigos y familiares y no pudieron cargar imágenes desde su iPhone/iPad. Las imágenes del iPhone son .HEIC .

Este es mi código, estoy trabajando con vue y 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 >

Entonces, lo que básicamente quiero hacer es agregar todos los tipos de imágenes y videos posibles para que esta carga de archivos funcione para cualquier persona (incluidos los usuarios de iPhone/iPad)

Si alguien sabe una sugerencia, por favor hágamelo saber.