Support extensions in acceptedFileTypes

[BudgieInWA]

The acceptedFileTypes option is comparable to the DOM accept attribute (it is even populated from the attribute in a progressive-enhancement configuration), so I find myself wanting to use it as a drop-in replacement.

If acceptedFileTypes contains a file extension, .blah, it is passed on to accept so that the file chooser narrows the selection to .blah files as desired (in most browsers), but the plugin does not validate .blah files.

While fileValidateTypeDetectType can be used to cause .blah files to be validated, it is an onerous way to configure a behaviour that would work with accept: a MIME type and an extension needs to be included in acceptedFileTypes and the detection function needs to be written.

[exzizt]

+1 for this issue. Our application wants to accept various file extensions that all share the same MIME type ("application/octet-stream") and it would be nice to have those as accepted extensions in the "Custom Files option" and not have them have to select "All Files".

For example, it would be nice if all of these file extensions were visible under Custom Files:

export const UNIQUELY_SPATIAL = {
  ".dbf": "application/dbf",
  ".geoJSon": "application/vnd.geo+json",
  ".gml": "application/gml+xml",
  ".kml": "application/vnd.google-earth.kml+xml",
  ".kmz": "application/vnd.google-earth.kmz",
  ".prj": APPLICATION_OCTET_STREAM,
  ".sbn": APPLICATION_OCTET_STREAM,
  ".sbx": APPLICATION_OCTET_STREAM,
  ".shp": APPLICATION_OCTET_STREAM,
  ".shpz": APPLICATION_OCTET_STREAM,
  ".shx": APPLICATION_OCTET_STREAM,
  ".wkt": APPLICATION_OCTET_STREAM,
};

[cavasinf]

Had a problem with .dwg files.

• Extension : .dwg.
• Mime Type (recognized as) : image/vnd.dwg.

ATE, the file is not recognized by <input type="file" accept="image/vnd.dwg">.
So there's no way to display that extension on picking files when browsing files to upload.

Example with text/plain and image/vnd.dwg:

<input type="file" accept="text/plain,image/vnd.dwg">

---

So I've found a work around to allow file extension with filepond with the current version @1.2.6.

Filepond option

acceptedFileTypes

In acceptedFileTypes you should put:

• A custom non existing mime type, for me it's allowed/extension.
• All your extensions that you want to allows, for me only .dwg.

Example with:

1. .txt mime type
2. .dwg mime type (optional)
3. MY custom mime type
4. .dwg extension

[
  "text/plain",
  "image/vnd.dwg",
  "allowed/extension",
  ".dwg",
]

With that configuration, we are able to see the file by default when browsing the file to upload.
But the upload will be refused.

fileValidateTypeDetectType

We now need to add a custom function to allow extensions.

• acceptedFileTypes needs to be an array with mime types and extensions + our custom mime type.
• in this function we are using our custom mime type, allowed/extension in my case.

if (type) {
    // Recognized mime type
    if (acceptedFileTypes.find(fileType => fileType === type)) {
        // Accepted mime type
        resolve(type);
    } else {
        // Rejected mime type
        reject(type);
    }
} else {
    // Unrecognized mime type, looking for a file extension
    const uploadedFileExtension = source.name.split('.').pop();
    // Checking if the file extension is accepted
    const isAllowed = acceptedFileTypes.find(fileType => fileType.split('.').pop() === uploadedFileExtension) !== undefined;

    if (isAllowed) {
        // Resolve with our "false" mime type
        resolve('allowed/extension');
    } else {
        // Even the extension is not accepted, reject
        reject('.' + uploadedFileExtension);
    }
}

TLDR

const acceptedFileTypes = [
    "text/plain",
    "image/vnd.dwg",
    "allowed/extension",
    ".dwg",
];
const filepondContainer = document.querySelector('#filepond_container');
this.pond = FilePond.create(filepondContainer, {
    // ...
    // ...
    // ...
    // YOUR filepond configuration
    // ...
    // ...
    // ...

    allowFileTypeValidation: true,
    acceptedFileTypes: acceptedFileTypes,
    fileValidateTypeDetectType: (source, type) => new Promise((resolve, reject) => {
        if (type) {
            // Recognized mime type
            if (acceptedFileTypes.find(fileType => fileType === type)) {
                // Accepted mime type
                resolve(type);
            } else {
                // Rejected mime type
                reject(type);
            }
        } else {
            // Unrecognized mime type, looking for a file extension
            const uploadedFileExtension = source.name.split('.').pop();
            // Checking if the file extension is accepted
            const isAllowed = acceptedFileTypes.find(fileType => fileType.split('.').pop() === uploadedFileExtension) !== undefined;

            if (isAllowed) {
                // Resolve with our "false" mime type
                resolve('allowed/extension');
            } else {
                // Even the extension is not accepted, reject
                reject('.' + uploadedFileExtension);
            }
        }
    }),
});

[MoritzLost]

+1
I found this issue trying to find out why the extension displayed an error message (Expects .jpg or .png) when I'm trying to upload a JPG.

Allowing extensions would also make for a better user experience. Normal users don't know MIME types, but do know file extensions. So the error message above that lists extensions is much more user-friendly than Expects image/jpg or image/png.

This issue has been open for years without any activity. Is this plugin still supported? When might this issue be addressed?

[cloydlau]

I implemented this in a Vue wrapper for FilePond called 'faim': https://github.com/cloydlau/faim#faupload
acceptedFileTypes accepts both MIMEs and extensions.
Since acceptedFileTypes is only a format filter rather than a validator, user can still select files of unmatched formats.
So 'faim' will automatically generate fileValidateTypeDetectType based on the value of acceptedFileTypes to validate file extensions.