Estoy usando import { Camera } from 'expo-camera'; para tomar fotografias. La foto tomada se almacena en la memoria caché del dispositivo. Hasta ahora, todo bien.
Ahora estoy tratando de cargar estas imágenes tomadas en Google Firebase Storage usando import { getStorage, ref, uploadBytes } from "firebase/storage";
El retorno de hacer una foto es:
{ "width":5472, "uri":"file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540g1sm0%252Feprojstant/Camera/3689f575-d849-4e3e-b4ea-1ba40b96cf02.jpg", "height":7296 }Ahora intento subir esto así:
const storageRef = ref(storage, 'some-child'); const file = photo.uri uploadBytes(storageRef, file).then((snapshot) => { console.log('Uploaded a blob or file!'); }); Después de un poco de retraso, se crea un archivo en firebase/storage . Puedo abrir este archivo con un editor de texto. el archivo incluye el texto indefinido
La suposición es que el uri que entrego no es la solución correcta. Sin embargo, soy demasiado nuevo en el desarrollo y no puedo encontrar ninguna ayuda para reaccionar de forma nativa. ¿Tienes una idea, un enlace o un ejemplo? ¿Primero tengo que convertir el archivo a un blob o base64 y, de ser así, cómo?
Cada vez que publico una pregunta, encuentro la solución.
Blob el archivo así:
const blob = await new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.onload = function () { resolve(xhr.response); }; xhr.onerror = function (e) { console.log(e); reject(new TypeError("Network request failed")); }; xhr.responseType = "blob"; xhr.open("GET", uri, true); xhr.send(null); });y subí este resultado así:
uploadBytes(storageRef, blob).then((snapshot) => { console.log('Uploaded a blob or file!'); });Aquí está la función completa para mi solución:
const [hasPermission, setHasPermission] = useState(null); const [type, setType] = useState(Camera.Constants.Type.back); const [previewVisible, setPreviewVisible] = useState(false) const [capturedImage, setCapturedImage] = useState(null) let camera = Camera const __takePicture = async () => { if (!camera) return const photo = await camera.takePictureAsync() setPreviewVisible(true) setCapturedImage(photo) // Create a root reference const storage = getStorage(); const uri = photo.uri const blob = await new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.onload = function () { resolve(xhr.response); }; xhr.onerror = function (e) { console.log(e); reject(new TypeError("Network request failed")); }; xhr.responseType = "blob"; xhr.open("GET", uri, true); xhr.send(null); }); // TODO: UUID @some-child const storageRef = ref(storage, 'some-child'); uploadBytes(storageRef, blob).then((snapshot) => { console.log('Uploaded a blob or file!'); }); } useEffect(() => { (async () => { const { status } = await Camera.requestCameraPermissionsAsync(); setHasPermission(status === 'granted'); })(); }, []); if (hasPermission === null) { return <View />; } if (hasPermission === false) { return <Text>No access to camera</Text>; } return (YOUR VIEW RENDERING HERE)