Fix being able to select fnt files on ios (#8843)

Author: ClementPasteau

newIDE/app/src/ResourcesList/FileToCloudProjectResourceUploader.js

@@ -78,9 +78,20 @@ const getAcceptedMimeTypes = (resourceKind: ResourceKind): string[] => {
   return resourceKindToInputAcceptedMimes[resourceKind] || [];
 };
 
+const usesFilePseudoMime = (resourceKind: ResourceKind): boolean => {
+  const acceptedMimes = getAcceptedMimeTypes(resourceKind);
+  return acceptedMimes.length === 1 && acceptedMimes[0] === 'file';
+};
+
 export const getInputAcceptedMimesAndExtensions = (
   resourceKind: ResourceKind
 ): string => {
+  // iOS Safari/WKWebView maps each extension of the `accept` attribute to a mime type,
+  // dropping the unrecognized ones. If at least one is recognized (like .xml), the picker
+  // is restricted to it, greying out the others (like .fnt). So when the 'file' pseudo-mime
+  // is used, don't send any extension: validation happens post-picking.
+  if (usesFilePseudoMime(resourceKind)) return 'file';
+
   const acceptedExtensions = getAcceptedExtensions(resourceKind);
   const acceptedMimes = getAcceptedMimeTypes(resourceKind);
 
@@ -205,11 +216,9 @@ export const FileToCloudProjectResourceUploader = ({
 
   const shouldValidateFilePostPicking = React.useMemo(
     () => {
-      const acceptedMimeTypes = getAcceptedMimeTypes(options.resourceKind);
-      // Safari does not use file extensions to filter files pre-picking and
-      // Safari also does not recognize all mime types. So if the only accepted
-      // mime type is 'file', the file validation should happen post-picking.
-      return acceptedMimeTypes.length === 1 && acceptedMimeTypes[0] === 'file';
+      // If the only accepted mime type is the 'file' pseudo-mime, no filtering
+      // happens pre-picking, so the file validation should happen post-picking.
+      return usesFilePseudoMime(options.resourceKind);
     },
     [options.resourceKind]
   );

newIDE/app/src/ResourcesList/FileToCloudProjectResourceUploader.spec.js

@@ -9,7 +9,7 @@ describe('FileToCloudProjectResourceUploader', () => {
     );
     expect(
       getInputAcceptedMimesAndExtensions('bitmapFont')
-    ).toMatchInlineSnapshot(`"file,.fnt,.xml"`);
+    ).toMatchInlineSnapshot(`"file"`);
     expect(getInputAcceptedMimesAndExtensions('font')).toMatchInlineSnapshot(
       `"font/ttf,font/otf,.ttf,.otf"`
     );
@@ -29,10 +29,10 @@ describe('FileToCloudProjectResourceUploader', () => {
       `"video/mp4,video/webm,.mp4,.webm"`
     );
     expect(getInputAcceptedMimesAndExtensions('model3D')).toMatchInlineSnapshot(
-      `"file,.glb"`
+      `"file"`
     );
     expect(getInputAcceptedMimesAndExtensions('atlas')).toMatchInlineSnapshot(
-      `"file,.atlas"`
+      `"file"`
     );
     expect(getInputAcceptedMimesAndExtensions('spine')).toMatchInlineSnapshot(
       `"application/json,.json"`