Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support extensions in acceptedFileTypes #13

Open
BudgieInWA opened this issue Mar 1, 2019 · 4 comments
Open

Support extensions in acceptedFileTypes #13

BudgieInWA opened this issue Mar 1, 2019 · 4 comments

Comments

@BudgieInWA
Copy link

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
Copy link

exzizt commented Nov 18, 2020

+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".
image

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,
};

exzizt added a commit to bcgov/mds that referenced this issue Nov 19, 2020
Main
Users can now upload spatial files to a NoW
Other
Fixes an issue where TUSD wouldn't return proper "file type" metadata for obscure file types, such as spatial files
Tidies some code
Screenshots
image

Notes
It's not possible to nicely display all accepted file extensions for files that share the same MIME type (in our case, "application/octet-stream"--many of these files have no MIME type). pqina/filepond-plugin-file-validate-type#13
@cavasinf
Copy link
Contributor

cavasinf commented Apr 6, 2022

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">

image


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.

image

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
Copy link

+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
Copy link

cloydlau commented Nov 6, 2023

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants