Issues with custom file type validation

[ab-hi]

Hi, i recently came across an issue where uploading file from Filepond works on browsers of some laptops while not on others(tried with different laptops of similar built in Chrome v71 and windows 10)

Doing some research i figured out it may be issue with MIME type mapping of file so i decided to write custom file type validation function using fileValidateTypeDetectType However, there are a couple of issues while trying to implement this:

1. It doesn't work without passing acceptedFileTypes array
2. If i pass acceptedFileTypes array then even after resolving the promise in `fileValidateTypeDetectType, file is not processed and gives error 'file is of invalid type' if the MIME type of uploaded file is not in the list of accepted file types. Basically beating the whole purpose of custom file type validation

I'm using react wrapper of FIlepond. This is my sample code for the same

<FilePond 
   acceptedFileTypes = {['image/png']}
   fileValidateTypeDetectType = {(source, type) => new Promise((resolve, reject) => {        
    if(acceptedFileTypes.includes(type){
      resolve(type)
    }
    else{
      reject();
    }
})} 
/>

const acceptedFileTypes = ['image/jpeg', 'application/pdf', 'image/png', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document']

"filepond": "^3.5.1", "filepond-plugin-file-validate-type": "^1.2.1", "react-filepond": "^5.0.0"

Now, how to get filepond working across all browsers or how to get the fileValidateTypeDetectType working properly without the above mentioned issues

[rikschennink]

You don't use fileValidateTypeDetectType to test the type detected by FilePond against a list of types. You use it to read the actual file data or use the file extension to map to a mime type. You then return the detected mime type to FilePond in the resolve callback.

<FilePond 
   acceptedFileTypes = {['image/jpeg', 'application/pdf', 'image/png', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document']}
   fileValidateTypeDetectType = {(source, type) => new Promise((resolve, reject) => {        
     // read source data and determine type of file here, you can use extension or actually read the file data
   })} 
/>

[bennetsadyba]

Thank you, it was very helpful :) For anyone looking:

                fileValidateTypeDetectType: (source, type) => new Promise((resolve, reject) => {
                        // source is the file input element
                        // Get the file name
                        const fileName = source.name;
                        // Check if the file extension is '.heic'
                        if (fileName.toLowerCase().endsWith('.heic')) {
                            type = 'image/heic';
                        }   
                        resolve(type);

                    })

I'm now stuck at "415 (Unsupported Media Type)" which is an Apache server problem to resolve.