Skip to main content
se eliminaron 5 caracteres en el cuerpo
Origen Enlace
Origen Enlace

Como guardo el valor de un input en firebase firestore?

Mi idea es hacer una página para ayudar a un amigo, pero tuve problemas con el firebase y firestore a la hora de guardar datos de un formulario. La idea es una página de alquileres, que el pueda subir las publicaciones desde la página de admin y que estas al ser subidas se muestren en sus respectivas páginas. Hasta ahora es esto lo que he conseguido hacer con JavaScript y Firebase.

JS CSS HTML

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.9.0/firebase-app.js";
    import { getFirestore, addDoc, collection } from "https://www.gstatic.com/firebasejs/9.9.0/firebase-firestore.js";

    const firebaseConfig = {
      apiKey: "AIzaSyCmY8EnoBQzJ47554J1SmOBzmCUv1xUsQI",
      authDomain: "alquileres-santo.firebaseapp.com",
      projectId: "alquileres-santo",
      storageBucket: "alquileres-santo.appspot.com",
      messagingSenderId: "673241510521",
      appId: "1:673241510521:web:f5ed6085213680f7b79aa8"
    };

    const app = initializeApp(firebaseConfig);
    const db = getFirestore()

    const TipoPublicacion =  document.getElementById("type");
    const SubtipoPublicacion = document.getElementById("subtype");
    const TituloPublicacion = document.getElementById("title");
    const DescripcionPublicacion = document.getElementById("description");
    const ImagenesPublicacion = document.getElementById("image");
    const Publicar = document.getElementById("btnsave");

    let setData = await addDoc(collection(db, "publicacion"), {
      tipo: TipoPublicacion.value,
      subtipo: SubtipoPublicacion.value,
      titulo: TituloPublicacion.value,
      descripcion: DescripcionPublicacion.value,
      imagenes: ImagenesPublicacion.value
    });

<!-- begin snippet: js hide: false console: true babel: false -->
:root {
        --color-blanco: #FEF5ED;
        --color-negro: #000000;
        --color-oscuro: #333;
    }
      
    html {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
    }
      
    body {
        background: var(--color-blanco);
    }
      
    header {
        margin: -0.6%;
    }
      
    .logo-img {
        display: block;
        position: absolute;
        height: 45px;
        border-radius: 30px;
    }
      
    .navbar {
        height: 45px;
        background-color: var(--color-oscuro);
    }
      
    .navbar a {
        float: left;
        font-size: 16px;
        color: white;
        text-align: center;
        margin-left: 10rem;
        padding: 14px 16px;
        text-decoration: none;
    }
      
    .subnav {
        float: left;
        overflow: hidden;
    }
      
    .subnav .subnavbtn {
        font-size: 16px;
        border: none;
        outline: none;
        color: white;
        padding: 12px 16px;
        background-color: inherit;
        font-family: inherit;
        margin: 0;
        margin-left: 10rem;
    }
      
    .navbar a:hover, .subnav:hover .subnavbtn {
        background-color: blue;
    }
      
    .subnav-content {
        display: none;
        position: absolute;
        left: 0;
        background-color: var(--color-blanco);
        width: 100%;
        z-index: 1;
    }
      
    .subnav-content a {
        float: left;
        color: var(--color-negro);
        text-decoration: none;
    }
      
    .subnav-content a:hover {
        background-color: #eee;
        color: black;
    }
      
    .subnav:hover .subnav-content {
        display: block;
    }
      
    .agregar-container {
        text-align: center;
        margin-top: 5rem;
        margin-left: 25rem;
    }
      
    .send-form {
        display: flex;
        flex-direction: column;
        width: 50%;
    }
      
    .footer {
        position: inherit;
        margin: -0.6%;
        margin-top: 15%;
        background-color: var(--color-oscuro);
        color: var(--color-blanco);
        text-align: center;
        font-weight: 300;
        padding: 2rem 0;
        height: 7.5rem;
    }
      
    .footer__title {
        font-size: 2rem;
        margin-bottom: 2rem;
    }
      
    .footer__social {
        margin-bottom: 2rem;
    }
      
    .footer__icon {
        font-size: 1.5rem;
        color: var(--color-blanco);
        margin: 0 2rem;
    }
      
    .footer__copy {
        font-size: 10px;
    }
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="../CSS/admin.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
        <link href='https://cdn.jsdelivr.net/npm/[email protected]/css/boxicons.min.css' rel='stylesheet'>
        <title>Santo Tomé Casas</title>
    </head>
    <body>
        <header>
          <a href="../index.html"><img src="../IMG/Logo page.jpg" alt="logo" class="logo-img"></a>
            <div class="navbar">
              <a href="./index.html">Inicio</a>
              <div class="subnav">
                <button class="subnavbtn">Alquileres <i class="fa fa-caret-down"></i></button>
                <div class="subnav-content">
                  <a href="./HTML/alquiler-casa.html">Casa</a>
                  <a href="./HTML/alquiler-depto.html">Departamento</a>
                  <a href="./HTML/alquiler-bodega.html">Bodega-Galpón</a>
                  <a href="./HTML/alquiler-local.html">Local</a>
                </div>
              </div>
              <div class="subnav">
                <button class="subnavbtn">Ventas <i class="fa fa-caret-down"></i></button>
                <div class="subnav-content">
                  <a href="./HTML/venta-casa.html">Casa</a>
                  <a href="./HTML/venta-depto.html">Departamento</a>
                  <a href="./HTML/venta-bodega.html">Bodega-Galpón</a>
                  <a href="./HTML/venta-local.html">Local</a>
                </div>
              </div>
              <a href="./HTML/consulta.html">Consultas</a>
              <a href="./HTML/login.html"><i class="fas fa-user"></i></a>
            </div>
        </header>

        <section class="agregar-container">
            <form id="sendForm" class="send-form">
              <label>Ingrese la opción a publicar</label>
              <select id="type">
                <option>--Seleccione la opción--</option>
                <option value="Alquiler">Alquiler</option>
                <option value="Venta">Venta</option>
              </select>
              <label>Ingrese el tipo de publicación:</label>
              <select id="subtype">
                <option>--Selecciona el tipo de publicación--</option>
                <option value="departamento">Departamento</option>
                <option value="casa">Casa</option>
                <option value="galpon">Bodega/Galpón</option>
                <option value="local">Local</option>
              </select>
              <label>Titulo de la publicación:</label>
              <input id="title" type="text" placeholder="Ingresa el titulo de tu publicación...">
              <label>Descripción de la publicación:</label>
              <textarea id="description" cols="30" rows="10" placeholder="Ingrese la descripción de la publicación..."></textarea>
              <br>
              <label>Ingrese las imagenes a subir:</label>
              <input id="image" type="file">
              <br>
              <div class="btns">
                <button id="btnsave">Publicar</button>
                <input type="reset">
              </div>
            </form>
        </section>

        <footer class="footer">
            <p class="footer__title">Santo Tomé Casas</p>
            <div class="footer__social">
                <a href="#" class="footer__icon"><i class="bx bxl-facebook" ></i></a>
                <a href="#" class="footer__icon"><i class="bx bxl-instagram" ></i></a>
                <a href="#" class="footer__icon"><i class="bx bxl-telegram" ></i></a>
            </div>
        </footer>
    </body>
    <script type="module" src="../JS/admin.js"></script>
</html>

<!-- language: lang-html -->
    <!DOCTYPE html>
    <html lang="es">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="stylesheet" href="../CSS/admin.css">
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
            <link href='https://cdn.jsdelivr.net/npm/[email protected]/css/boxicons.min.css' rel='stylesheet'>
            <title>Casas</title>
        </head>
        <body>
            <header>
              <a href="../index.html"><img src="../IMG/Logo page.jpg" alt="logo" class="logo-img"></a>
                <div class="navbar">
                  <a href="./index.html">Inicio</a>
                  <div class="subnav">
                    <button class="subnavbtn">Alquileres <i class="fa fa-caret-down"></i></button>
                    <div class="subnav-content">
                      <a href="./HTML/alquiler-casa.html">Casa</a>
                      <a href="./HTML/alquiler-depto.html">Departamento</a>
                      <a href="./HTML/alquiler-bodega.html">Bodega-Galpón</a>
                      <a href="./HTML/alquiler-local.html">Local</a>
                    </div>
                  </div>
                  <div class="subnav">
                    <button class="subnavbtn">Ventas <i class="fa fa-caret-down"></i></button>
                    <div class="subnav-content">
                      <a href="./HTML/venta-casa.html">Casa</a>
                      <a href="./HTML/venta-depto.html">Departamento</a>
                      <a href="./HTML/venta-bodega.html">Bodega-Galpón</a>
                      <a href="./HTML/venta-local.html">Local</a>
                    </div>
                  </div>
                  <a href="./HTML/consulta.html">Consultas</a>
                  <a href="./HTML/login.html"><i class="fas fa-user"></i></a>
                </div>
            </header>

            <section class="agregar-container">
                <form id="sendForm" class="send-form">
                  <label>Ingrese la opción a publicar</label>
                  <select id="type">
                    <option>--Seleccione la opción--</option>
                    <option value="Alquiler">Alquiler</option>
                    <option value="Venta">Venta</option>
                  </select>
                  <label>Ingrese el tipo de publicación:</label>
                  <select id="subtype">
                    <option>--Selecciona el tipo de publicación--</option>
                    <option value="departamento">Departamento</option>
                    <option value="casa">Casa</option>
                    <option value="galpon">Bodega/Galpón</option>
                    <option value="local">Local</option>
                  </select>
                  <label>Titulo de la publicación:</label>
                  <input id="title" type="text" placeholder="Ingresa el titulo de tu publicación...">
                  <label>Descripción de la publicación:</label>
                  <textarea id="description" cols="30" rows="10" placeholder="Ingrese la descripción de la publicación..."></textarea>
                  <br>
                  <label>Ingrese las imagenes a subir:</label>
                  <input id="image" type="file">
                  <br>
                  <div class="btns">
                    <button id="btnsave">Publicar</button>
                    <input type="reset">
                  </div>
                </form>
            </section>

            <footer class="footer">
                <p class="footer__title">Casas</p>
                <div class="footer__social">
                    <a href="#" class="footer__icon"><i class="bx bxl-facebook" ></i></a>
                    <a href="#" class="footer__icon"><i class="bx bxl-instagram" ></i></a>
                    <a href="#" class="footer__icon"><i class="bx bxl-telegram" ></i></a>
                </div>
            </footer>
        </body>
        <script type="module" src="../JS/admin.js"></script>
    </html>

<!-- end snippet -->

La imagen es el firestore, cuando intento guardar los datos de los input, el textarea y la imagen, los guarda vacios y no se por que. Por favor ayuda!!