filepond doesn't work with video/* type in safari

Question

i'm using FilePond library in react, which works fine in chrome, but not in safari. my issue is :

when i set acceptedFileTypes={['video/*']}

1. in chrome - it accepts all video types.
2. in safari - it will only accept mov files, and not all video type files.

when i set acceptedFileTypes={['video/mp4']} : it does the expected behaviour on both, and accepts only mp4 files.

i don't wish to set all possible video types, and would like to use the video/* filter.

Safari version : 13.1.1

<FilePond
  ref={fileRef}
  files={files}
  allowMultiple={false}
  labelIdle={labelIdle}
  className="video"
  instantUpload={false}
  onupdatefiles={(items) => {
    setFiles(items)
  }}
  onremovefile={() => toggleDisplayProgress(false)}
  acceptedFileTypes={['video/*']}
  required
/>

i can set the video types specifically here - https://trac.webkit.org/browser/trunk/Source/WebCore/platform/MIMETypeRegistry.cpp as described in this ticket

Answer 1

i ended up using quicktime and mp4, which worked :

acceptedFileTypes={['video/quicktime', 'video/mp4']}.

There's no way to use the video/* on safari.

Answer 2

Browsers don't all detect files in the same manner. Depending on the OS this might differ. The fileValidateTypeDetectType hook helps detect the right type. You can use it to manually set the right type based on (for example) the file extension.

FilePond.create(document.querySelector('input'), {
    acceptedFileTypes: ['image/png'],
    fileValidateTypeDetectType: (source, type) => new Promise((resolve, reject) => {
        
        // Do custom type detection here and resolve promise

        resolve(type);
    })
});

See: https://pqina.nl/filepond/docs/patterns/plugins/file-validate-type/#custom-type-detection