File Type Issue in Mobile Safari Ios Version 17 and Chrome ios

[abhishek2393]

Hello Everyone , thank you for making a great react-component , i need your help regarding a very weird problem i encountered while uploading media files , i works fine in chrome and firefox , also no issues in safari for mac , but in mobile version of safari it seems like it is unable to upload file with correct extension , the file object which also contains type (basically what kind of file it is) , so whenever i try to upload a mp4 file from mobile the type shown is image/*extension name , can anybody help me on this

here is my code sample

const fileTypes = ["JPG", "PNG", "JPEG", "WEBP" , "MP4"];
<FileUploader
name="file"
types={fileTypes}
handleChange={(_file) => {
handleChange(_file)
}}
maxSize={200}
onSizeError={(err) => {
console.log(err);
toast('File Size should be less than 200 MB', { duration: 3000, clickable: true, className: 'my-toast-failure', position: 'top-right' });
}}
disabled={isDisabled}
onTypeError={(err) => {
console.log(err);
toast(Extension Not Supported , Supported Extension ${fileTypes.map((type) => .${type}) }, { duration: 5000, clickable: true, className: 'my-toast-failure', position:'top-right' });
}}
>
<div className="h-48 w-48 md:w-full lg:w-full rounded-lg items-center border-dashed border-2 border-blue-600 cursor-pointer text-center mx-auto"
onClick = {()=>{
if(isDisabled){
toast('You can upload only 12 media files', { duration: 3000, clickable: true, className: 'my-toast-failure', position: 'top-right' });
return
}}}
>

Add Your Media

Uploads Left:
<span className={${media.length>6?'text-red-500':'text-green-500'}}> {12 - media.length}