0

I created a Instant Game which runs inside the Facebook, It have a file input tag, which works fine on Facebook website but not working on Facebook phone app,

When clicking on choose file, it is not showing anything to select file.

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

Complete Code:

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);
      });
  }, []); // Empt

  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;

This code is written in react, It works perfectly when run on https://www.facebook.com/gaming/play/gameId

but not opening any thing when running on Facebook phone application.

2
  • Please provide more details for us to help you debug. For e.g. what is handleFileChange?
    – Owenn
    Commented Apr 14 at 10:32
  • @Owenn I provided the complete code. Commented Apr 14 at 10:48

0