[Bug] PKCS12 file type validation not working

[necik11]

Is there an existing issue for this?

• I have searched the existing issues

Have you updated FilePond and its plugins?

• I have updated FilePond and its plugins

Describe the bug

Hi,

first of all I want to show that I found a similar topic/problem - ngx-filepond, I use react not angular and I have the same problem - but i didn't find any solution :)

I would try to elaborate a bit:

I'm trying to make my filepond accepts only pkcs12 (.pfx extension) files using filepond-plugin-file-validate-type. The expected behaviour is that when the dialog to select file opens, only .pfx files would be listed. However, no files are displayed.

I tried multiple ways:
1.

 <FilePond
            files={files}
            allowReorder={true}
            allowMultiple={false}
            allowFileTypeValidation={true}
            acceptedFileTypes={["application/x-pkcs12", "application/pkcs12"]}
          />

and on Q: "Can you confirm the file type the browser detects actually is 'application/x-pkcs12' with this util:" - yes i did. This is exactly the place where i found that i have to use x-pkcs12.

I try even fileValidateTypeDetectType but without attribute acceptedFilesTypes its again not working - not call :

 <FilePond
            files={files}
            allowReorder={true}
            allowMultiple={false}
            allowFileTypeValidation={true}
            fileValidateTypeDetectType={(source, type) =>
              new Promise((resolve, reject) => {
                // Do custom type detection here and return with promise
                console.log("source", source);
                console.log("type", type);
                resolve(type);
              })}
          />

and again after add:
acceptedFileTypes={["application/x-pkcs12"]}
stop working and i cant choose any file/certificate.

I even try:

       <FilePond
            files={files}
            allowReorder={true}
            allowMultiple={false}
            allowFileTypeValidation={true}
            acceptedFileTypes={["application/x-pkcs12", "application/x-x509-ca-cert"]}
          />

and this is funny cause its work, but just show certificate/files type .cer ...

Last try was add acceptedFileTypes empty with fileValidateTypeDetectType - i thought it will follow Promise resolve/reject:

    <FilePond
         files={files}
         allowReorder={true}
         allowMultiple={false}
         allowFileTypeValidation={true}
         acceptedFileTypes={[""]}
         fileValidateTypeDetectType={(source, type) =>
           new Promise((resolve, reject) => {
             // Do custom type detection here and return with promise
             console.log("source", source);
             console.log("type", type);
             resolve(type);
           })}
       />

But when i try upload cert its show error: this type is not supported, even there is explicit all resolve(type) ...

so i guess there is more then 3 years a bug which is not solved ? :)

Reproduction

Just install latest version of react-filepond filepond and filepond-plugin-file-validate-type .

Environment

- Device:
- OS: Windows 10
- Browser: Microsoft Edge

[rikschennink]

You can detect the file type with https://codepen.io/rikschennink/pen/NzRvbj then you add it to the accepted file types list.

In the fileValidateTypeDetectType function you return one of the types in the acceptedFileTypes list.

[necik11]

I don't want to be rude, but this is exactly what I wrote in point 1:
and on Q: "Can you confirm the file type the browser detects actually is 'application/x-pkcs12' with this util:" - yes i did. This is exactly the place where i found that i have to use x-pkcs12.:

and like i share picture problem is not in part 1, but in part 2:

its show just folders ... any files could be selected :) 👍

And yes for any other type of extension seems it works... i was trying .cer - and there is validation working.

[rikschennink]

Sorry totally missed that. I wonder if the detected type differs per browser, maybe the OS detects these files with a different mime type.

…

On Monday, July 17, 2023, Dušan Neckař ***@***.***> wrote: I don't want to be rude, but this is exactly what I wrote in point 1: and on Q: "Can you confirm the file type the browser detects actually is 'application/x-pkcs12' with this util:" - yes i did. This is exactly the place where i found that i have to use x-pkcs12.: [image: image] <https://user-images.githubusercontent.com/25322303/253966324-cbdd0fb5-4e57-4e56-be09-3e3d88ace021.png> and like i share picture problem is not in part 1, but in part 2: [image: image] <https://user-images.githubusercontent.com/25322303/253966878-50f61cad-0dcd-4e36-831c-b4fa45f7215e.png> its show just folders ... any files could be selected :) 👍 — Reply to this email directly, view it on GitHub <#923 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAIUQH2G66K22VTI3J4U2O3XQVBDZANCNFSM6AAAAAA2M3OGHY> . You are receiving this because you commented.Message ID: ***@***.***>

[necik11]

Nope mime is good cause when i set empty acceptedFileTypes with fileValidateTypeDetectType console log:
Case 4 - i can see type is good:

But in case i set empty accepted file types i cant upload any file...:

so there is no way how to make workaround... just validate on another event what is not much pretty...

[necik11]

Here is the same problem with dropzone:

#react-dropzone/react-dropzone#1169

I found a good workaround...

acceptedFileTypes={["application/x-pkcs12", ".pfx"]}

But i still dont understand how should this validation work... cause if I take any guide, it everywhere wrote:

const [files, setFiles] = useState([]);
.
.
.
      <FilePond
                files={files}
                onupdatefiles={setFiles}

But if you write files, the file is uploaded even if there is bad validation.

okay i add this method which work, but its really correct ? :

 function onupdatefiles(incomeFiles: FilePondFile[]): void {
        const someError = incomeFiles.some(i => i.status !== 2);
        if (!someError) {
            setFiles(incomeFiles);
        }
    }

From this filepond thing is already giving me a headache, thanks for the answers and advice
Anyway, this code works! 👍

Edit:
When i look on docs:
There is Status & FileStatus:

In some reason FilePondFile have only status but there is FileStatus 🤕 :

And when validation is Okay it show FaleStatus === 2 => Idle.
In else case 8 === LOAD_ERROR.