Firebase deposuna bir görüntü nasıl yüklenir ve bu görüntülerin URL'si React+Firebase'de firestore veritabanına nasıl kaydedilir?

Son zamanlarda, yüklenen görüntülerin URL'sini bir firestore veritabanı belgesine kaydetmek istediğim tepki ve firebase'de kayıt formuyla çalışırken küçük bir uygulamada sıkışıp kaldım.
Bu makalede inceleyelim.

TL;DR
Demomuzu çalışırken görelim:

Uygulama:

Sizinle birlikte standart tepki uygulamasına hazır olduğunuz ve ayrıca firebase hesabı, yeni proje ve bunun içinde yeni bir web uygulaması oluşturma ve firestore veritabanını ve ondan depolamayı etkinleştirme hakkında bilinen bazı temel ön gereksinimlere sahip olduğunuz varsayılır. Hayatımızı kolaylaştırmak için bazı kütüphanelerden yararlanacağız:

• materyal-ui (seçtiğiniz herhangi bir css çerçevesini kullanabilirsiniz)
• ateş üssü

Şimdi app ,auth & storage nesnesi gibi bazı varlıkları dışa aktaracağız ve bunları app.js'mizde kullanacağız.

Ana dosyamızın çekirdeğine atlayalım, önce bir material-ui giriş elemanımız vardı ve onu bir handleSubmit olay işleyicisinin içine sardık.
Şimdi, yüklenen resimlerin URL'lerini küresel olarak erişilebilir kılmak için firestore veritabanına nasıl kaydedebileceğimizi yakından göreceğiz:

• ADIM 1: yüklenen resmin depoda saklanması:
  Önce, storageRef adlı resim depomuza bir referans oluşturduk ve bunu , bu referansı ve yüklenmesi gereken dosyayı kabul eden uploadBytesResumable işlevine ilettik. Daha ayrıntılı prosedür için buna bakın .
• ADIM 2: bu görüntüyü firestore veritabanında bir URL olarak depolamak: Firestore'umuza, db nesnesi, koleksiyon adı ve sonuncusu belge kimliği olan (otomatik olarak oluşturulabilen veya bağlam içinde anlamlı bir şey olabilen)
  3 parametre alan collectionRef adlı genel bir referans oluşturduk. uygulamanıza, basitlik adına burada belge kimliğini sabit olarak kodladım.Ardından , içinde vaat tabanlı getDownloadURL işlevini kullandığımız ve görüntülerin URL'sini downloadURL değişkeninde aldığımız bir geri çağırma işlevine sahip bir uploadTask.on() olayımız var. . Şimdi, updateDoc işlevini kullanarak bu url'yi belgemize ittiğimiz önemli kısım geliyor .(Dikkat edin, setDoc işlevini kullanabilirdik ama kullandık
  
  updateDoc çünkü bir belgenin bazı alanlarını tüm belgenin üzerine yazmadan güncellemek istiyorduk.

İşte bu, şüpheniz varsa veya daha fazla yardıma ihtiyacınız olursa bana ulaşın, okuduğunuz için teşekkürler