Filepond: File Type Validation Issues

Created on 16 May 2018 · 19Comments · Source: pqina/filepond

I'm having trouble validating file types using the File Type Validation plugin

Here's my jQuery:

$('.filepond').filepond({
    server: './',
    acceptedFileTypes: [
        'application/doc',
        'application/pdf',
        'application/rtf',
        'application/txt',
        'application/odf',
        '.docx',
        'application/pages'
    ]
});

PDF's are passing the validation, but nothing else is. I've tried removing the "application/" text and using an extension with a dot (.doc) too, but with no luck.

Also, check out the attached screenshot. Is there anyway to style this so the file types subtitle doesn't push everything out of view?

filepond-validation-error

bug enhancement

Source

cd13sr

👍1

Most helpful comment

Yes, it doesn't work. Looking the implementation of the plugin, I discovered that all the files related to Microsoft end up having an _empty string_ as their identified extension. Therefore, the plugin won't ever be able to match the string against the desired files/extensions.

The only workaround I found for the moment was to implement the Promise in the fileValidateTypeDetectType key. Detecting the extension on my own and then comparing against some desired extensions was the most effective way to fix this bug.

As @alexandr-kazakov proposed, I recommend adding this lack of functionality to the documentation. Hope it will be fixed soon!

manuelnucci on 11 Sep 2019

👍2

All 19 comments

Hi @cd13sr

Sorry to hear it's not working.

At the moment the acceptedFileTypes property only accepts mime types ( and mime type wildcards ), not extensions, so .docx won't work ( I see the docs say it should work so that's a problem ). Its functionality is based on the <input type="file"/> accept attribute which unfortunately doesn't function on Edge and is only just now fully supported on Safari 11.1, but not iOS Safari.

What device and browser does the problem occur on?

I did a quick search for .rtf mime types, and it seems there's some other types that might be used for that extension, maybe extending the list solves the issue? _application/rtf, application/x-rtf, text/rtf, text/richtext, application/msword, application/doc, application/x-soffice_

Looks like we need a method to set a custom validation message for file types. 🙃

Instead of the list of mime types you could then return something like _".pdf, .rtf, .txt, .doc or .pages"_

I will see if I can reproduce the problem later today.

rikschennink on 17 May 2018

@cd13sr Just logged the mime types for a .pages and .docx file, it shows these two,

docx application/vnd.openxmlformats-officedocument.wordprocessingml.document ( I kid you not )
pages application/x-iwork-pages-sffpages

So while adding those will probably fix the validation of those files it'll make the error message even more ridiculous, so I'm adding a property to override it.

rikschennink on 17 May 2018

❤1

@cd13sr Just published version 1.5.1 of FilePond and version 1.1.0 of the File Type Validation plugin.

About to update the docs, see below for changes.

FilePond.create({

    // set allowed file types with mime types
    acceptedFileTypes: [
        'text/plain',
        'application/pdf',
        'application/doc',
        'application/rtf',
        'application/x-iwork-pages-sffpages'
    ],

    // allows mapping of file types to label values ( how type is shown in error label )
    // "null" means don't show
    fileValidateTypeLabelExpectedTypesMap: {
        'text/plain': '.txt',
        'application/pdf': '.pdf',
        'application/doc': '.doc',
        'application/rtf': null,
        'application/x-iwork-pages-sffpages': '.pages'
    }

    // the label to show, {placeholders} are automatically replaced
    fileValidateTypeLabelExpectedTypes: 'Expects {allButLastType} or {lastType}'
});

When adding an incorrect file this would output:

Expects .txt, .pdf, .doc or .pages

If you have a lot of mime types to check, you can either opt for nulling exotic types or replacing the label with a custom label. I'm planning to improve rendering of the label in the near future, it can still grow way too wide and interfere with the file information block, but the custom label option should help remedy that for now.

{ fileValidateTypeLabelExpectedTypes: 'Expects a document format' }

rikschennink on 17 May 2018

😄1

Awesome, thanks Rik! I'll give it a try a little later today.

I was testing this in Chrome on a Mac.

cd13sr on 17 May 2018

👍1

Hey—

.doc and .rtf files aren't working for me. However, .pages, .doc, and .txt files are working.

I'm currently using the unpkg.com CDN for Filepond, Filepond jQuery, and the file type validation plugin.

Thanks!

cd13sr on 18 May 2018

@cd13sr Can you check if the mime types you entered are the actual mime types of the files?

There are some websites that can read the mime type from the file so you know what types to add to the list. See google query below:
https://www.google.com/search?client=safari&rls=en&q=get+mime+type+of+file+online&ie=UTF-8&oe=UTF-8

rikschennink on 18 May 2018

Ah yes. So the mime types for the files were different then what I originally had. It works great with the correct ones! Ha.

Thanks again.

cd13sr on 21 May 2018

@cd13sr Fantastic, glad to hear it's working!

rikschennink on 22 May 2018

I'm trying to add some specific extensions and couldn't make the plugin work.
Following the docs from the official site I wasn't able to allow .doc and .docx extensions.

I've tried using this parameters to the "acceptedFileTypes" property: "application/doc", "application/docx", "applications/msword", ".doc", ".docx"
I know the last two are not supported so far but I gave them a try anyway.

Could you help me with this problem? Which MIME type should I introduce to be recognized by the plugin?

manuelnucci on 23 Aug 2019

👍2

@ManuelNucci Hi, drop the file in this codepen to see what mime type the browser thinks it is.

rikschennink on 26 Aug 2019

I've tried the codepen you provided me but I was in the right path. Due to I don't have Microsoft Word installed in my machine (Windows 10) the browser cannot read properly which is the mime type and thus the plugin ends confused.
One of my teammates who has the software tried the codepen and also the implementation we were working on and had the expected results, he could load the files without any error throwing at his face.
I quite don't understand if this is a problem with the library itself but I think it should allow to upload the accepted files without the need to have any software installed.
The only hint I can give you is that the .docx file is recognized in my case as an XML Office Document rather than a Microsoft Office Document.
Despite that, in Ubuntu which obviously doesn't have MS Word, everything works fine. Clearly the problem is with Windows 10.

I hope you can replicate the same experiments that I did and find if I'm the one who is wrong or it's in fact a bug to solve.

Greetings and good coding.

manuelnucci on 27 Aug 2019

👍1

@ManuelNucci you can use fileValidateTypeDetectType to work around the issue by detecting the type manually (using the file extension).
https://pqina.nl/filepond/docs/patterns/plugins/file-validate-type/

rikschennink on 27 Aug 2019

@rikschennink thanks for the advice. I was able to implement the type validation without any problems. You made a great job with the plugin. Keep up the good work!!

manuelnucci on 31 Aug 2019

Yeah, it's not working. I tried adding docx and others like that:

acceptedFileTypes: [
      'image/*',
      'application/pdf',
      'application/x-zip-compressed',
      'text/plain',
      'application/msword',
      'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
      'application/vnd.ms-powerpoint',
],

docx has not started to be defined. I spent hours on it. I propose to add the documentation item that is not working.

alexandr-kazakov on 10 Sep 2019

As @alexandr-kazakov proposed, I recommend adding this lack of functionality to the documentation. Hope it will be fixed soon!

manuelnucci on 11 Sep 2019

👍2

@ManuelNucci PR is welcome https://github.com/pqina/filepond-docs

rikschennink on 11 Sep 2019

@rikschennink Hi, Rik. Thanks for your reply.
Can you give an example where using fileValidateTypeDetectType correctly identify the files .docx?
@ManuelNucci or maybe you can give an example of how you managed to configure the plugin?
Thanks.

alexandr-kazakov on 11 Sep 2019

I think there's another issue topic on this problem, it is related to office being installed or not. I would advice to simply use the fileValidateTypeDetectType method and return a basic type based on extension. It's been added for situations like these.

rikschennink on 11 Sep 2019

👍1

Hi,

I am using filepond plugin for uploading the files and was not able to upload the outlook item i.e. .msg file. then i found a solution and now i am using fileValidateTypeDetectType to resolve the type of .msg file as it was coming as "". it is working for msg file alone and if i add other mime types to the accepted filetypes it doesnt work all of them work excepts outlook item.

Below is the code for that.
import React, { Component } from "react";
import ReactDOM from "react-dom";

// import "./styles.css";

// Import React FilePond
import { FilePond, registerPlugin } from "react-filepond";

// Import FilePond styles
import "filepond/dist/filepond.min.css";

// Import the Image EXIF Orientation and Image Preview plugins
// Note: These need to be installed separately
// npm i filepond-plugin-image-preview filepond-plugin-image-exif-orientation --save
import FilePondPluginImageExifOrientation from "filepond-plugin-image-exif-orientation";
// import FilePondPluginImageCrop from 'filepond-plugin-image-crop';
import FilePondPluginImageResize from "filepond-plugin-image-resize";
import FilePondPluginImageTransform from "filepond-plugin-image-transform";
import FilePondPluginImagePreview from "filepond-plugin-image-preview";
import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css";
import FilePondPluginFileValidateType from "filepond-plugin-file-validate-type";
// Register the plugins
registerPlugin(
FilePondPluginImageExifOrientation,
FilePondPluginImageResize,
FilePondPluginImageTransform,
FilePondPluginImagePreview,
FilePondPluginFileValidateType
);

// Component
class App extends Component {
constructor(props) {
super(props);

this.state = {
  // Set initial files, type 'local' means this is a file
  // that has already been uploaded to the server (see docs)
  // files: [
  //   {
  //     source: "photo.jpeg",
  //     options: {
  //       type: "local"
  //     }
  //   }
  // ]
};

}

handleInit() {
console.log("FilePond instance has initialised", this.pond);
}

render() {
const allowedType = [
"application/vnd.ms-outlook",
"image/png",
"application/pdf"
];
return (

ref={ref => (this.pond = ref)}
files={this.state.files}
allowMultiple={true}
acceptedFileTypes={allowedType}
imageResizeTargetWidth="200"
imageResizeTargetHeight="200"
fileValidateTypeDetectType={(source, type) =>
new Promise((resolve, reject) => {
debugger;
if (source.name.includes("msg")) {
type = "application/vnd.ms-outlook";
}
// Do custom type detection here and return with promise

          resolve(type);
        })
      }
      server={{
        // fake server to simulate loading a 'local' server file and processing a file
        process: (fieldName, file, metadata, load) => {
          // simulates uploading a file
          setTimeout(() => {
            load(Date.now());
          }, 1500);
        },
        load: (source, load) => {
          console.log(source);
          console.log(load);
          // simulates loading a file from the server
          fetch(source)
            .then(res => {
              console.log(res);
              return res.blob();
            })
            .then(blob => {
              console.log(blob);
              return load(blob);
            });
        }
      }}
      oninit={() => this.handleInit()}
      onupdatefiles={fileItems => {
        // Set currently active file objects to this.state
        this.setState({
          files: fileItems.map(fileItem => fileItem.file)
        });
      }}
    />
  </div>
);

}
}

const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);

what can i do to resolve this issue. i want .msg file to be uploaded with other file types as well.