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.
handleFileChange
?