|
Firebase en español
Base de datos activa. Firebase - Juan Antonio Villalpando
-- Tutorial de iniciación de Firebase en español --
Volver al índice del tutorial
____________________________
________________________________________________________
150.- Firebase storage. JavaScript.
- Vamos a subir y bajar archivos a Firebase storage.
________________________________
- Reglas de Seguridad.
- Establecemos estas reglas públicas, cualquiera podrá leer y escribir en esta base.
- De vez en cuando Google nos avisará mediante nuestro correo que tenemos este proyecto con reglas públicas.
- rules_version = '2' ;
lo he puesto para que pueda funcionar la parte de "Listar archivos" que veremos más adelante.
|
rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write;
}
}
}
|
________________________________
- Información necesaria.
- Necesitaremos la siguente información:
________________________________
- Código JavaScript.
- Copiamos este código en un archivo llamado firebasestorage.htm, en nuestro ordenador, cambiando los parámetros de configuración firebaseConfig.
|
<!DOCTYPE html>
<html><head>
<meta name="viewport" content="width=device-width, initial-scale=4, maximum-scale=1" />
</head><body>
<div>
<input type="file" id="files" multiple /><br /><br />
<button id="send">Upload</button>
<p id="uploading"></p>
<progress value="0" max="100" id="progress"></progress>
<br /><br /><br /><br />
<input type="text" name="nombre" id="name" value ="hello.wav" /><br /><br />
<button id="get_url">Get url file</button>
<p id="response"></p>
<button id="list_files">List files</button>
<p id="response_list"></p>
</div>
<script src="https://www.gstatic.com/firebasejs/7.15.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.1/firebase-storage.js"></script>
<script>
var firebaseConfig = {
apiKey: "AIzaSyADXXXXXXXXXXXXXXXXXXXXXXXXX-fEk",
authDomain: "kio4.firebaseapp.com",
databaseURL: "https://kio4.firebaseio.com",
projectId: "firebase-kio4",
storageBucket: "firebase-kio4.appspot.com",
// messagingSenderId: "851XXXXXXXX7",
// appId: "1:851XXXXXXXX7:web:6fXXXXXXXXXX866"
};
firebase.initializeApp(firebaseConfig);
</script>
<script>
//// CHOICE /////
var files = [];
document.getElementById("files").addEventListener("change", function(e) {
files = e.target.files;
});
///// SEND FILES //////
document.getElementById("send").addEventListener("click", function() {
if (files.length != 0) {
for (let i = 0; i < files.length; i++) {
var storage = firebase.storage().ref(files[i].name);
var upload = storage.put(files[i]);
upload.on("state_changed", function progress(snapshot) {
var percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
document.getElementById("progress").value = percentage;
},
function error() {alert("Error uploading file.");},
function complete() {document.getElementById( "uploading").innerHTML += `${files[i].name} uploaded <br />`;}); }
} else {alert("No file chosen."); }
});
////////////////////////////////////
// GET URL ////////////////////
document.getElementById("get_url").addEventListener("click", function() {
var get_url_file = document.getElementById("name").value;
var storage = firebase.storage().ref(get_url_file);
storage.getDownloadURL().then(function(url) {document.getElementById("response").innerHTML += `${url} <br />`; })
.catch(function(error) {alert("Error encountered."); });
});
////////////////////////////////////
// LIST FILES ////////////////////
document.getElementById("list_files").addEventListener("click", function() {
var storageRef = firebase.storage().ref();
storageRef.listAll().then(function(result) {
result.items.forEach(function(urlFile) {document.getElementById("response_list").innerHTML += `${urlFile} <br />`; });
}).catch(function(error) {alert("No file chosen."); });
});
////////////////////////////////////
</script>
</body>
</html>
|
________________________________
- Ejecución del código anterior.
- Pulsamos sobre el nombre del archivo y se deberá abrir nuestro navegador web con esta página.
- Observa que el archivo firebasestorage.htm está en una carpeta de nuestro ordenador.
- Subimos varios archivos. Se pueden elegir varios archivos a la vez.
________________________________
- Aquí tenemos los archivos.
________________________________
________________________________
________________________________
1.- App Inventor. Obtener url y archivo.
 p150_firebase_js.aia
________________________________
- Diseño.
- WebViewer está puesto como oculto.
________________________________
- Bloques.
|
<!DOCTYPE html>
<html><head></head><body>
<script src="https://www.gstatic.com/firebasejs/7.15.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.1/firebase-storage.js"></script>
<script>
var firebaseConfig = {
apiKey: "AIzaSyADXXXXXXXXXXXXXXXXXXXXXXXXX-fEk",
authDomain: "kio4.firebaseapp.com",
databaseURL: "https://kio4.firebaseio.com",
projectId: "firebase-kio4",
storageBucket: "firebase-kio4.appspot.com",
// messagingSenderId: "851XXXXXXXX7",
// appId: "1:851XXXXXXXX7:web:6fXXXXXXXXXX866"
};
firebase.initializeApp(firebaseConfig);
</script>
<script>
datos = window.AppInventor.getWebViewString(); // Input.
var get_url_file = datos;
var storage = firebase.storage().ref(get_url_file);
storage.getDownloadURL().then(function(url) { window.AppInventor.setWebViewString("" + url); }) // Output.
.catch(function(error) {alert("Error encountered."); });
</script>
</body>
</html>
|
- Obtener la información de un archivo:
https://firebasestorage.googleapis.com/v0/b/firebase-kio4.appspot.com/o/hello.wav
_________________________________________________________________
- Borrar archivo.
|
<!DOCTYPE html>
<html><head></head><body>
<script src="https://www.gstatic.com/firebasejs/7.15.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.1/firebase-storage.js"></script>
<script>
var firebaseConfig = {
apiKey: "AIzaSyADXXXXXXXXXXXXXXXXXXXXXXXXX-fEk",
authDomain: "kio4.firebaseapp.com",
databaseURL: "https://kio4.firebaseio.com",
projectId: "firebase-kio4",
storageBucket: "firebase-kio4.appspot.com",
// messagingSenderId: "851XXXXXXXX7",
// appId: "1:851XXXXXXXX7:web:6fXXXXXXXXXX866"
};
firebase.initializeApp(firebaseConfig);
</script>
<script>
datos = window.AppInventor.getWebViewString(); // Input.
var get_url_file = datos;
var storage = firebase.storage().ref(get_url_file);
storage.delete().then(function(url) { window.AppInventor.setWebViewString("Deleted."); }) // Output.
.catch(function(error) {alert("Error encountered."); });
</script>
</body>
</html>
|
________________________________
________________________________
________________________________
2.- App Inventor. Subir archivo.
p150_firebase_js_2.aia
- Con el VisorWeb no podemos cargar la página y luego elegir archivo.
- Así que mediante el ActivityStarter abriremos el navegador que tenga el móvil por defecto y desde ahí eligiremos los archivos.
________________________________
- Bloques.
Action: android.intent.action.VIEW
DataUri: file:///mnt/sdcard/AppInventor/assets/firebasestorage.htm
________________________________
________________________________
________________________________
3.- App Inventor. Subir archivo mediante el componente Web.
p150_firebase_js_3.aia
- Mediante el componente Web también podemos subir archivos a Firebase storage.
- Aquí estamos teniendo en cuenta que los permisos son públicos, es decir todos pueden subir y bajar archivos.
________________________________
- Bloques.
https://firebasestorage.googleapis.com/v0/b/[storageBucket]/o/namefile.abc
In Content-Type:
image/gif, image/png, image/jpeg, image/bmp, image/webp, audio/midi, audio/mpeg, audio/webm, audio/ogg, audio/wav, application/octet-stream, application/pkcs12, application/vnd.mspowerpoint, application/xhtml+xml, application/xml, application/pdf, MIME Office .
________________________________
________________________________
________________________________
4.- App Inventor. Crear imagen QR. Subirla a Firebase Storage mediante componente Web.
p150_firebase_js_4.aia
- Convertimos un text a imagen QR mediante esta web:
- https://quickchart.io/documentation/#qr
- Esa imagen la ponemos en un SpriteImagen de un Lienzo.
- Además la guardamos en la SdCard (en Android 10+ debes guardarlo en el directorio ASD).
- Subimos esa imagen a FireBase Storage mediante el componente Web.
https://firebasestorage.googleapis.com/v0/b/[storageBucket]/o/miqr.png
- El storgeBucket lo obtenemos de la manera que hemos visto al principio de esta página.
- Una vez subida la imagen a FireBase, obtenemos su dirección mediante la información de contenidoDeRespuesta.
________________________________
- Diseño.
________________________________
- Bloques.
________________________________
________________________________
________________________________
5.- App Inventor. Subir archivo a DataBase mediante la extensión Base64.
- Fíjate que en Firebase tenemos dos tipos de base de datos Database y Storage.
- Storage es para guardar archivos, como acabamos de ver en este tutorial.
- Database es para guardar información corta, como temperatura, velocidad, texto corto,...
- Database no está destinado a guardar archivos, pero podemos guardarlos.
- Podemos convertir un archivo a String mediante Base64, subirlo. Luego se podría bajar convirtiéndo ese String Base64 a archivo.
appinventor/277_extension_imagen_string.htm
________________________________
________________________________
________________________________
6.- App Inventor. Subir archivo a DataBase mediante la extensión FireBaseStorage.
p150_firebase_6.aia
- Mediante esta extensión podemos subir y bajar archivos a Firebase
- La extensión com.mirxtremapps.FirebaseStorage.aix puedes bajarla de:
https://community.appinventor.mit.edu/t/firebase-storage-extension/58184/2
- Para facilitar el aprendizaje he puesto estos permisos:
|
rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write;
}
}
}
|
- StorageBucket.
________________________________
- Diseño.
- En Android < 10, para que funcione el ImagePicker cuando la aplicación está instalada es necesario en Diseño. Screen1.
DefaultFileScope = Legacy
________________________________
- Bloques.
__________________________________
|
