pythonfirebasegoogle-cloud-platformgoogle-cloud-firestorefirebase-storage

How to save and display images from Firestore Database from Firebase

I'm writing an application for my IT studies in Python with Flask. I use Firestore Database as a database. Everything is alright, but I wonder if it is possible to save a photo to a given collection and read/display this photo from the collection on the website?

My endpoint to change user settings where where I want it to be possible to upload this photo and, of course, after the correct uploading of the display:

@blueprint.route("/employer_settings", methods=["GET", "POST"])
@login_required
def employer_settings():
    error_message = None
    employer_data = {}

    try:
        employer_uid = session.get("user", {}).get("uid")
        employer_ref = db.collection("Company").document(employer_uid)
        employer_settings = employer_ref.get().to_dict()

        # Dodaj dane zespołu do słownika
        if employer_settings:
            employer_data = employer_settings

        if request.method == "POST":
            # Pobierz dane z formularza
            name = request.form.get("name")
            phone = request.form.get("phone")

            # Aktualizuj dane zespołu w bazie danych
            employer_ref.update(
                {
                    "first_name": name,
                    "phone": phone,
                }
            )

            # Zaktualizuj dane w słowniku
            employer_data["first_name"] = name
            employer_data["phone"] = phone

    except Exception as e:
        error_message = str(e)
        print("Error retrieving data:", e)  # Dodaj print dla błędu

    return render_template(
        "employer_settings.html",
        employer_data=employer_data,
        error_message=error_message,
    )

and his view in html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Ustawienia firmy</title>
    <script src="/static/script/search_script.js" defer></script>
  </head>
  <body>
    <a href="/employer_main_page"
    ><img
      src="/static/img/logo.PNG"
      alt="logo"
      class="company-logo"
      width="80"
      height="80" /></a
      ><br />
      <form id="searchForm">
        <label for="global_search_query">Wyszukaj pracowników:</label>
        <input type="text" id="global_search_query" name="query" required />
      </form>
      <br />
    <!-- Wyświetl wyniki na bieżącej stronie -->
      <div id="searchResults"></div>
      <br />
      <br />

    {# Wyświetlanie błędu #} {% if error_message %}
        <p style="color: red">{{ error_message }}</p>
      {% endif %}

      <h1>Dane osobowe firmy</h1>

    {# Formularz do aktualizacji danych zespołu #}
      <form method="post">
        <label for="name">Nazwa firmy:</label>
        <input
          type="text"
          id="name"
          name="name"
          value="{{ employer_data['first_name'] }}"
        /><br /><br />

        <label for="phone">Numer telefonu:</label>
        <input
          type="text"
          id="phone"
          name="phone"
          value="{{ employer_data['phone'] }}"
        /><br /><br />

        <input type="submit" value="Zapisz zmiany" />
      </form>

      <br />
      <form method="post" action="{{ url_for('web_routes.delete_account_employer') }}">
        <input type="submit" value="Usuń konto" style="background-color: red; color: white;" />
      </form>

      <a href="{{ url_for('web_routes.employer_main_page') }}"
      >< Powrót na stronę główną</a
        >
      </body>
    </html>

Is it possible to modify this to do that? The collection in which I want it to be included:

Company>id_logged_employer>field 'image'

Solution

  • Unless you're storing very small images or icons Base64-encoded, I'd recommend not storing them in Firestore.

    You can indeed store native binary data, but please note that there are some limits when it comes to how much data you can put in a single document in Firestore. So you can store up to a maximum of 1 MiB (1,048,576 bytes). So in the case of storing images, you might hit this limitation really quickly.

    Please note that Firestore is designed to store data of different types but not files. So the best option that you have is to use a Firebase product called Cloud Storage for Firebase which is indeed designed to store images, audio, video, or other user-generated content.

    So might consider storing the images in Cloud Storage for Firebase and the corresponding URLs in Firestore or the Realtime Database. That's the recommended way because Cloud Storage for Firebase is approximately 7x cheaper when it comes to storage costs, and has much larger limits when it comes to the maximum file size.