Facebook Instant Game文件上传功能在移动端APP无法使用

开发的Facebook Instant Game包含文件选择功能，使用原生<input type="file">实现，网页端（https://www.facebook.com/gaming/play/gameId）可正常触发文件选择界面，但在Facebook手机APP中点击按钮后无任何反应。

相关代码片段 #

<input
  type="file"
  onChange={handleFileChange}
  placeholder="Enter here..."
  className=""
/>

完整代码 #

import React, { useEffect, useState } from "react";
import axios from "axios";
function App() {
  
  const [error, setError] = useState(null);

  const [file, setFile] = useState(null);
  const [response, setResponse] = useState(null);

  const handleFileChange = (e) => {
    const file = e.target.files[0];
    setFile(file);
  };

  const url = "https://api.cloudinary.com/v1_1/hzxyensd5/image/upload";

  const uploadFileToCloudinary = async (e) => {
    e.preventDefault();

    try {
      const formData = new FormData();

      formData.append("file", file);
      formData.append("upload_preset", "docs_upload_example_us_preset");

      const res = await axios.post(url, formData);
      console.log(res.data);

      setResponse(JSON.stringify(res.data, null, 2));

    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    // Initialize the Facebook Instant Games SDK and start the game
    window.FBInstant.initializeAsync()
      .then(() => {
        console.log("SDK initialized");
        // Start loading game assets here

        // Once all assets are loaded, start the game
        return window.FBInstant.startGameAsync();
      })
      .then(() => {
        console.log("Game started");
        // Additional logic after the game starts, if needed
      })
      .catch((error) => {
        console.error("Error initializing SDK or starting the game:", error);
      });
  }, []);

  return (
    <div className="bg-[#0a121c] min-h-screen ">
      <div className="pt-5 flex flex-col items-center justify-center m-auto">
        <form onSubmit={uploadFileToCloudinary}>
          <input
            type="file"
            onChange={handleFileChange}
            placeholder="Enter here..."
            className="mt-3 px-3 py-2 rounded-lg border focus:outline-none focus:ring focus:border-blue-300 text-white"
          />
          <button
            type="submit"
            className="px-4 py-2 ml-2 rounded-lg bg-blue-500 text-white hover:bg-blue-600 focus:outline-none"
          >
            Upload
          </button>
        </form>

        {response ? (
          <p className="text-green-500 mt-4 font-bold text-md mx-5 break-words w-[60%]">
            {response}
          </p>
        ) : null}

        {error ? (
          <p className="text-red-500 mt-4 font-bold text-xl">{error} 😥</p>
        ) : null}

      </div>
    </div>
  );
}

export default App;

问题原因 #

Facebook手机APP的内嵌WebView环境对原生<input type="file">控件有严格限制，出于安全和平台体验规范，这类原生文件选择操作会被拦截，无法唤起系统文件选择器。

解决方案 #

使用Facebook Instant Games SDK提供的pickMediaAsync()API替代原生file input，该API专门适配移动端Instant Games环境，能够正常唤起系统媒体选择器。

修改后的代码实现

1. 添加媒体选择处理函数：

const handlePickMedia = async () => {
  try {
    // 调用SDK媒体拾取API，指定选择图片类型
    const media = await window.FBInstant.pickMediaAsync({
      mediaType: 'image',
      allowMultiple: false
    });

    // 将返回的媒体URL转换为File对象，适配原上传逻辑
    const response = await fetch(media.url);
    const blob = await response.blob();
    const selectedFile = new File([blob], `selected-media.${blob.type.split('/')[1]}`, {
      type: blob.type
    });

    setFile(selectedFile);
  } catch (error) {
    console.error('媒体选择失败:', error);
    // 处理用户取消选择的情况
    if (error.code === 'USER_CANCELED') {
      console.log('用户取消了媒体选择');
    }
  }
};

2. 替换原生input为自定义触发按钮：

{/* 移除原<input type="file">，替换为以下按钮 */}
<button
  onClick={handlePickMedia}
  className="mt-3 px-3 py-2 rounded-lg border focus:outline-none focus:ring focus:border-blue-300 text-white"
>
  选择图片
</button>

注意事项 #

• 确保FBInstant SDK已完成初始化（你的代码中已包含初始化逻辑）
• pickMediaAsync()支持image和video两种媒体类型，可根据需求调整mediaType参数
• 转换File对象时需正确设置文件名和MIME类型，保证后续Cloudinary上传正常
• 必须处理API调用的异常情况，特别是用户取消选择的场景

内容的提问来源于stack exchange，提问作者Harshil Sharma