File pond issue with validate file type

[lokeshKumar90]

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 (

(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) }); }} />

);

} }

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.

[rikschennink]

Please format your code snippets

[lokeshKumar90]

Hi Rikschennink,

I have found the solution. Thanks.

[thepower50]

@lokeshKumar90 What was the resolution? I am writing a spfx webpage using react and have an issue where it doesn't recognise the type for msg files I am also unable to use the property fileValidateTypeDetectType even though I have installed the plugin. Did you have to include any particular code to get it to work?

[muhammederdinc]

@thepower50 Sometimes a browser doesn’t succeed in detecting the correct mime type for a file. In that situation the file type property is empty and FilePond can’t determine the correct type either (it relies on the browser engine). I faced the same problem and looked at https://pqina.nl/filepond/docs/patterns/plugins/file-validate-type/#custom-type-detection for a solution. I think you can fix the problem by using :allow-file-type-validation = "false". Sample usage: