Firebase es un producto de Google que ayuda a los desarrolladores a crear, administrar y hacer crecer sus aplicaciones fácilmente. Ayuda a los desarrolladores a crear sus aplicaciones de forma más rápida y segura. No se requiere programación en el lado de firebase, lo que facilita el uso de sus funciones de manera más eficiente. Proporciona almacenamiento en la nube. Utiliza NoSQL para el almacenamiento de datos.
Aquí, vamos a aprender cómo podemos cargar imágenes usando HTML y JavaScript en firebase. Mientras trabajamos con la base de datos, es posible que también necesitemos cargar un archivo de imagen.
Implementación paso a paso
Paso 1: si es nuevo en firebase, consulte este .
Activa el almacenamiento de Firebase:
Haga clic en el botón Almacenamiento a la izquierda y haga clic en Comenzar.
Después de eso, aparecerá este cuadro. Haga clic en Siguiente .
Luego haga clic en Listo .
Paso 2: aquí vamos a escribir el código HTML y JavaScript para conectar el código HTML con la base de datos de Firebase.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Collecting Data</title>
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity=
"sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous">
</head>
<body class="container"
style="margin-top: 50px;
width: 50% height:auto; ">
<h2 class="text-primary"
style="margin-left: 15px; margin-bottom: 10px">
Hey There,Here we are going to upload
</h2>
<form class="container" id="contactForm">
<div class="card">
<div class="card-body">
<div class="form-group"
style="margin-left: 15px;
margin-top: 10px;
display:none;>
<label for=" exampleFormControlSelect1 ">Select Type</label>
<select class="form-control " id="types ">
<option>1</option>
</select>
</div>
<br>
Document Upload:
<br>
<!-- click here to choose file -->
<input type="file " name="files[] " id="files ">
<!-- click here to upload file -->
<input type="hidden "
name="url "
id="url ">
<button type="button " onclick="uploadimage() ">
Upload Image
</button>
<br><br>
</div>
</div>
<button type="submit "
class="btn btn-primary "
style="margin-left: 15px; margin-top: 10px; display:none; ">
Submit
</button>
</form>
</body>
<script src="https://www.gstatic.com/firebasejs/3.7.4/firebase.js ">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js ">
</script>
<link type="text/css " rel="stylesheet " href=
"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css " />
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js ">
</script>
<script>
// adding firebase data
var firebaseConfig = {
apiKey: "*********************- ",
authDomain: "-********************* ",
databaseURL: "********************* ",
projectId: "********************* ",
storageBucket: "********************* ",
messagingSenderId: "********************* ",
appId: "********************* "
};
firebase.initializeApp(firebaseConfig);
var messagesRef = firebase.database().ref('Checking');
document.getElementById(
'contactForm').addEventListener('submit', submitForm);
//uploading file in storage
function uploadimage(){
var type = getInputVal('types');
var storage = firebase.storage();
var file=document.getElementById("files ").files[0];
var storageref=storage.ref();
var thisref=storageref.child(type).child(file.name).put(file);
thisref.on('state_changed',function(snapshot) {
}, function(error) {
}, function() {
// Uploaded completed successfully, now we can get the download URL
thisref.snapshot.ref.getDownloadURL().then(function(downloadURL) {
//getting url of image
document.getElementById("url ").value=downloadURL;
alert('uploaded successfully');
saveMessage(downloadURL);
});
});
// Get values
var url = getInputVal('url');
// Save message
// saveMessage(url);
}
function getInputVal(id){
document.getElementById('contactForm').reset();
}
// Function to get get form values
function getInputVal(id){
return document.getElementById(id).value;
}
// Save message to firebase database
function saveMessage(url){
var newMessageRef = messagesRef.push();
newMessageRef.set({
imageurl:url,
});
}
</script>
</html>
Después de haber escrito el código, puede ejecutarlo usando el siguiente comando en la terminal
python manage.py runserver
Aquí, veremos la siguiente pantalla después de ejecutarlo en cualquier navegador web.
Después de seleccionar una imagen con el botón Elegir archivo , podemos elegir cualquier archivo y luego haremos clic en el botón Cargar imagen para cargar la imagen en Firebase.
En la base de datos en tiempo real , podemos ver que la imagen se cargó correctamente.
