MS Outlook .msg file not uploading properly

This has been posted elsewhere, but I have yet to see any solution or response for a full resolution. The “application/vnd.ms-outlook” filetype with the “.msg” extension can’t be properly uploaded right now with FilePond as far as I can see.

The lack of proper support means when clicking Browse to select a file to upload, the .msg files will always be grayed out. The only workaround is to drag the .msg file into the upload section and run the following code:

<FilePond
    ref={ref => (this.pond = ref)}
    files={null}
    allowMultiple={true}
    allowRevert={false}
    maxFiles={5}
    allowFileSizeValidation
    maxFileSize={'5MB'}
    // allowFileTypeValidation
    allowFileEncode
    acceptedFileTypes={[
        'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
        'application/msword',
        'application/pdf',
        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
        'application/vnd.ms-excel',
        'application/vnd.ms-outlook'
    ]}
    fileValidateTypeDetectType={(source, type) =>
        new Promise((resolve, reject) => {
            if (source.name.includes('msg')) {
                type = 'application/vnd.ms-outlook';
                resolve(type);
            }
        })
    }
    fileValidateTypeLabelExpectedTypesMap={{
        'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
            '.docx',
        'application/msword': '.doc',
        'application/pdf': '.pdf',
        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
            '.xlsx',
        'application/vnd.ms-excel': '.xls',
        'application/vnd.ms-outlook': '.msg"'
    }}
    labelIdle={
        '<span class="filepond--label-action">Browse</span><br>Files must be under 5MB each and in one of the following formats: .doc, .docx, .xls, .xlsx, .pdf, .msg'
    }
    server={{
        url: this.state.baseUrl,
        process: {
            url: '[OMITTED FOR CODE SNIPPET]',
            method: 'POST',
            headers: {
                [OMITTED FOR CODE SNIPPET]
            },
            onload: res => {
                [OMITTED FOR CODE SNIPPET];
            }
        }
    }}
/>

This allows me to upload the .msg file but all the metadata is lost, and the title of the file won’t show up when it’s added to the list of files.

The most I’ve seen is people saying “use fileValidateTypeDetectType” but none of those posts have provided an explanation on how to use that to solve all of these issues. (I’ve used it in some capacity, but it’s not a fix for everything.)

[bmalin92]

Thanks for the update! This allows me to add the file through the Browse capabilities. Unfortunately uploading .msg files still prevents the data on the .msg from appearing on the item once uploaded. Basically, any other file I upload, the title of the file will appear as the title in the uploaded item. The .msg will just be blank. Am I not writing this correctly?

fileValidateTypeDetectType={(source, type) =>
   new Promise((resolve, reject) => {
       if (source.name.includes('msg')) {
           type = 'application/vnd.ms-outlook';
           resolve(type);
       }
   })
}

[rikschennink]

See: https://pqina.nl/filepond/docs/patterns/plugins/file-validate-type/#custom-type-detection

It’s probably that the system uses a different type and so setting the type synced to the accept attribute doesn’t match the system type and the files cannot be selected. If you can find out what type the system uses it might work.