I have just upgraded a VueJS website from version 2 to 3, I use Vue File Pond to allow users to upload files.
The File Pond Uploader is working fine for all file types I allow except font files. If I try and upload a font file I get an error message saying 'Invalid File Type' with a list of the name of valid font file types passed in via the accepted-file-types property.
The error is happening at the pre upload stage as I do not see a request server side or anything on the Chrome Dev Tools' Network tab.
All the details are below, hopefully this can be resolved in what is a very good File Uploader Component.
Details:
Seems like it could be the same issue as this:
Try to handle font files with filepond
Which was raised as a result of:
https://github.com/pqina/vue-filepond/issues/214
Tried using a variety of fonts and types including ones from https://fonts.google.com/
Vue Compoent:
<file-pond
ref="filepond"
credits="false"
name="file"
style-button-remove-item-position="right"
:allow-multiple="true"
:allow-file-type-validation="true"
:accepted-file-types="fontFileTypes"
:drop-on-element="dropOnElement"
:element="root"
:max-files="5"
:server="server"
/>
adding this validates and the files pass but the error still happens:
:file-validate-type-detect-type="customValidator"
custom validator is based on https://pqina.nl/filepond/docs/api/plugins/file-validate-type/#custom-type-detection
changing allow-file-type-validation to false allows the files through as expected
accepted-file-types is:
function fontFileTypes() { return ['font/ttf', 'font/woff', 'font/woff2']; }
I also tried checking the mime types via C# code using https://github.com/zone117x/MimeMapping
My font files gave the same mime types as above, I also tried some variants as well like the below but made no difference to FilePond:
.woff - application/font-woff .ttf - application/x-font-truetype
Vue App:
VueJS 3 - Composition API, Vite, Javascript:
"vue": "^3.3.8", "filepond": "^4.28.0", "filepond-plugin-file-validate-type": "^1.2.6", "vue-filepond": "7.0.4",
Browsers:
Edge and Chrome
I tried different font files (TTF, WOFF, WOFF2, OTF etc) and even allowing any files, the 'invalid file type' message still appeared and stopped the upload