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: 6?'text-red-500':'text-green-500'}`}> {12 - media.length}